Solidarity with Palestine.Slack Theme
Familiar workspace messaging style
Configuration
// config/flasher.php
return [
'default' => 'theme.slack',
'themes' => [
'slack' => [
'scripts' => [
'/vendor/flasher/flasher.min.css',
'/vendor/flasher/themes/theme.slack.min.js',
],
'styles' => [
'/vendor/flasher/themes/theme.slack.min.css',
],
],
],
];Usage
flash()->success('Your changes have been saved!');flash()->use('theme.slack')->success('This uses Slack Theme');Key Features
Visual Design
-
Message bubble design with subtle borders and shadow effects
-
Colored square avatars with notification type symbols
-
Clean typography mimicking Slack's font styling
-
Interactive close button that appears on hover
-
Consistent styling between notification types with color-coded avatars
Accessibility
-
Type-specific ARIA roles for screen readers
-
Appropriate aria-live regions based on message importance
-
Reduced motion option for users with motion sensitivity
-
Fully keyboard accessible close button
-
Multiple indicators (color and symbol) for notification types
-
High contrast text in both light and dark modes
-
Complete RTL language support with properly flipped layout
Customization
:root {
/* Base appearance */
--slack-bg-light: #ffffff; /* Light mode background */
--slack-bg-dark: #1a1d21; /* Dark mode background */
--slack-text-light: #1d1c1d; /* Light mode text */
--slack-text-dark: #e0e0e0; /* Dark mode text */
--slack-border-light: #e0e0e0; /* Light mode border */
--slack-border-dark: #393a3e; /* Dark mode border */
--slack-avatar-size: 36px; /* Avatar size */
/* Type colors */
--slack-success: #2bac76; /* Success avatar color */
--slack-info: #1264a3; /* Info avatar color */
--slack-warning: #e8912d; /* Warning avatar color */
--slack-error: #e01e5a; /* Error avatar color */
}