Solidarity with Palestine.Facebook Theme
Familiar social media notification style
Configuration
// config/flasher.php
return [
'default' => 'theme.facebook',
'themes' => [
'facebook' => [
'scripts' => [
'/vendor/flasher/themes/theme.facebook.min.js',
],
'styles' => [
'/vendor/flasher/themes/theme.facebook.min.css',
],
],
],
];Usage
flash()->success('Your changes have been saved!');flash()->use('theme.facebook')->success('This uses Facebook Theme');Key Features
Visual Design
-
Rounded notification cards with subtle drop shadows
-
Circular colored icons for each notification type
-
Facebook's signature typography and color scheme
-
Timestamp display showing when notifications were created
-
Interactive elements with familiar hover states
Accessibility
-
Type-specific ARIA roles for screen readers
-
Appropriate aria-live regions based on message importance
-
Reduced motion support for users with motion sensitivity
-
Fully keyboard accessible interactive elements
-
Color contrast optimized for readability while maintaining Facebook's look
-
Descriptive aria-labels for all controls
Customization
:root {
/* Base colors */
--fb-bg-light: #ffffff; /* Light mode background */
--fb-bg-dark: #242526; /* Dark mode background */
--fb-text-light: #050505; /* Light mode primary text */
--fb-text-secondary-light: #65676b; /* Light mode secondary text */
--fb-text-dark: #e4e6eb; /* Dark mode primary text */
--fb-text-secondary-dark: #b0b3b8; /* Dark mode secondary text */
--fb-hover-light: #f0f2f5; /* Light mode hover state */
--fb-hover-dark: #3a3b3c; /* Dark mode hover state */
/* Type colors */
--fb-success: #31a24c; /* Success color */
--fb-info: #1876f2; /* Info color (Facebook blue) */
--fb-warning: #f7b928; /* Warning color */
--fb-error: #e41e3f; /* Error color */
}