Solidarity with Palestine.Crystal Theme
Clean, monochromatic notification system
Configuration
// config/flasher.php
return [
'default' => 'theme.crystal',
'themes' => [
'crystal' => [
'scripts' => [
'/vendor/flasher/flasher.min.css',
'/vendor/flasher/themes/theme.crystal.min.js',
],
'styles' => [
'/vendor/flasher/themes/theme.crystal.min.css',
],
],
],
];Usage
flash()->success('Your changes have been saved!');flash()->use('theme.crystal')->success('This uses Crystal Theme');Key Features
Visual Design
-
Monochromatic design with type-specific colored text
-
Subtle entrance animation with smooth slide-in and fade effects
-
Gentle pulsing shadow on hover creates a "breathing" effect
-
Clean, minimalist interface focused on content clarity
Accessibility
-
Type-appropriate ARIA roles for screen readers
-
Optimized aria-live regions based on message importance
-
Reduced motion adaptation for motion-sensitive users
-
High contrast text for optimal readability
-
Fully keyboard accessible with visual feedback
-
Descriptive aria-labels for interactive elements
Customization
:root {
/* Base appearance */
--crystal-bg-light: #ffffff; /* Light mode background */
--crystal-bg-dark: rgba(30, 30, 30, 0.95); /* Dark mode background */
--crystal-text-light: #2c3e50; /* Light mode text */
--crystal-text-dark: rgba(255, 255, 255, 0.95); /* Dark mode text */
--crystal-shadow: rgba(0, 0, 0, 0.08); /* Light mode shadow */
--crystal-shadow-dark: rgba(0, 0, 0, 0.25); /* Dark mode shadow */
/* Type colors (uses default PHPFlasher colors) */
--fl-success: #10b981; /* Success color */
--fl-info: #3b82f6; /* Info color */
--fl-warning: #f59e0b; /* Warning color */
--fl-error: #ef4444; /* Error color */
}