Solidarity with Palestine.Amber Theme
Modern, elegant notification system
Configuration
// config/flasher.php
return [
'default' => 'theme.amber',
'themes' => [
'amber' => [
'scripts' => [
'/vendor/flasher/themes/theme.amber.min.js',
],
'styles' => [
'/vendor/flasher/themes/theme.amber.min.css',
],
],
],
];Usage
flash()->success('Your changes have been saved!');flash()->use('theme.amber')->success('This uses Amber Theme');Key Features
Visual Design
-
Modern, minimalist design with clean aesthetics
-
Subtle animations and transitions for a refined feel
-
Visual progress bar indicating time before auto-dismiss
-
Automatic dark mode support with elegant color shifts
Accessibility
-
Proper ARIA roles for different notification types
-
Live regions with appropriate assertiveness levels
-
Respects user's reduced motion preferences
-
Fully keyboard accessible controls
-
High contrast text meeting WCAG 2.1 AA standards
-
Descriptive aria-labels for screen readers
Customization
:root {
/* Base appearance */
--amber-bg-light: #ffffff; /* Light mode background */
--amber-bg-dark: #1e293b; /* Dark mode background */
--amber-text-light: #4b5563; /* Light mode text */
--amber-text-dark: #f1f5f9; /* Dark mode text */
--amber-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Light mode shadow */
--amber-border-radius: 0.4rem; /* Border radius */
/* Type-specific colors */
--amber-success: #10b981; /* Success color */
--amber-info: #3b82f6; /* Info color */
--amber-warning: #f59e0b; /* Warning color */
--amber-error: #ef4444; /* Error color */
/* Dark mode shadows */
--amber-shadow-dark: 0 5px 15px rgba(0, 0, 0, 0.25);
}