Merge pull request #250 from php-flasher/themes

add themes doc pages
2026-03-31 15:07:47 +01:00 · 2025-03-08 12:04:37 +00:00
parent 5eddda90c5 1c8b0bf081
commit c062ae7cf5
18 changed files with 2891 additions and 0 deletions
@@ -0,0 +1,213 @@
+# PHPFlasher Theme System
+
+## Overview
+
+The PHPFlasher theme system allows for consistent, customizable notification designs across your application. Themes define both the visual appearance (using CSS/SCSS) and the HTML structure (using template functions) of notifications.
+
+## Core Concepts
+
+### Theme Structure
+
+Each theme consists of:
+
+1. **SCSS file**: Defines the styling for the notification
+2. **TypeScript file**: Contains the `render` function that generates HTML
+3. **Index file**: Registers the theme with PHPFlasher
+
+### Theme Registration
+
+Themes are registered using the `addTheme` method:
+
+```typescript
+flasher.addTheme('themeName', myTheme);
+```
+
+### Using Themes
+
+Themes can be used in two ways:
+
+1. **Direct Usage**: Using the theme as a plugin
+   ```typescript
+   flasher.use('theme.material').success('Operation completed');
+   ```
+
+2. **Default Theme**: Setting a theme as the default
+   ```typescript
+   // Make material theme the default
+   const defaultTheme = 'theme.material';
+   flasher.defaultPlugin = defaultTheme;
+   ```
+
+## Theme Components
+
+### CSS Variables
+
+PHPFlasher uses CSS variables to maintain consistent styling across themes. The main variables are:
+
+```css
+:root {
+  /* State Colors */
+  --fl-success: #10b981;
+  --fl-info: #3b82f6;
+  --fl-warning: #f59e0b;
+  --fl-error: #ef4444;
+
+  /* Base colors */
+  --fl-bg-light: #ffffff;
+  --fl-bg-dark: rgb(15, 23, 42);
+  --fl-text-light: rgb(75, 85, 99);
+  --fl-text-dark: #ffffff;
+
+  /* Appearance */
+  --fl-font: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --fl-border-radius: 4px;
+  --fl-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+```
+
+### Layout Components
+
+1. **Wrapper** (`fl-wrapper`): Controls positioning and stacking of notifications
+2. **Container** (`fl-container`): Base for individual notifications
+3. **Progress Bar** (`fl-progress-bar`): Shows time remaining before auto-dismiss
+4. **Icons**: Type-specific icons for visual recognition
+
+### SASS Mixins
+
+PHPFlasher provides several mixins to help with theme creation:
+
+1. **variants**: Apply styles to each notification type
+   ```scss
+   @include variants using($type) {
+     background-color: var(--#{$type}-color);
+   }
+   ```
+
+2. **close-button**: Standard close button styling
+   ```scss
+   @include close-button;
+   ```
+
+3. **rtl-support**: Right-to-left language support
+   ```scss
+   @include rtl-support;
+   ```
+
+4. **progress-bar**: Add a progress bar with type-specific colors
+   ```scss
+   @include progress-bar(0.125em);
+   ```
+
+5. **dark-mode**: Dark mode styling support
+   ```scss
+   @include dark-mode {
+     background-color: var(--fl-bg-dark);
+     color: var(--fl-text-dark);
+   }
+   ```
+
+## Creating Custom Themes
+
+### Basic Theme Structure
+
+```typescript
+// my-theme.ts
+import './my-theme.scss'
+import type { Envelope } from '@flasher/flasher/dist/types'
+
+export const myTheme = {
+  render: (envelope: Envelope): string => {
+    const { type, title, message } = envelope
+    
+    return `
+      <div class="fl-my-theme fl-${type}">
+        <div class="fl-content">
+          <strong>${title || type}</strong>
+          <p>${message}</p>
+          <button class="fl-close">&times;</button>
+        </div>
+        <div class="fl-progress-bar">
+          <div class="fl-progress"></div>
+        </div>
+      </div>
+    `
+  },
+  
+  // Optional: CSS stylesheets to load
+  styles: ['path/to/additional-styles.css']
+}
+```
+
+### SCSS Template
+
+```scss
+// my-theme.scss
+@use '../mixins' as *;
+
+.fl-my-theme {
+  padding: 1rem;
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: var(--fl-shadow);
+  
+  .fl-content {
+    display: flex;
+    align-items: center;
+  }
+  
+  // Use built-in mixins for common functionality
+  @include close-button;
+  @include rtl-support;
+  @include progress-bar;
+  
+  // Type-specific styling
+  @include variants using($type) {
+    border-left: 3px solid var(--#{$type}-color);
+  }
+  
+  // Dark mode support
+  @include dark-mode {
+    background-color: var(--fl-bg-dark);
+    color: var(--fl-text-dark);
+  }
+}
+```
+
+### Theme Registration
+
+```typescript
+// Register your custom theme
+import { myTheme } from './my-theme';
+flasher.addTheme('custom', myTheme);
+
+// Use your theme
+flasher.use('theme.custom').success('This uses my custom theme!');
+```
+
+## Included Themes
+
+PHPFlasher comes with several built-in themes:
+
+- **flasher**: Default bordered notification with colored accents (default)
+- **material**: Google Material Design inspired notifications
+- **bootstrap**: Bootstrap-styled notifications
+- **tailwind**: Tailwind CSS styled notifications
+- And many more...
+
+## Accessibility Features
+
+PHPFlasher themes include several accessibility features:
+
+1. **ARIA roles**: Appropriate roles (`alert` or `status`) based on type
+2. **ARIA live regions**: Assertive for critical messages, polite for others
+3. **Reduced motion**: Respects user preferences for reduced animations
+4. **RTL support**: Right-to-left language direction support
+5. **Keyboard interaction**: Close buttons are keyboard accessible
+
+## Best Practices
+
+1. **Use semantic HTML** in your theme's render function
+2. **Leverage CSS variables** for consistent styling
+3. **Include proper ARIA attributes** for accessibility
+4. **Use the provided mixins** to ensure consistent behavior
+5. **Test in both light and dark modes** using the dark mode mixin
@@ -0,0 +1,110 @@
+# PHPFlasher Amazon Theme
+
+## Overview
+
+The Amazon theme provides notification styling inspired by Amazon's e-commerce platform. It features clean, minimal design with a focus on readability and accessibility.
+
+![Amazon Theme Preview](./images/amazon-theme.png)
+
+## Features
+
+- **Amazon-Inspired Design**: Clean, minimal styling that matches Amazon's design language
+- **Type-Specific Styling**: Each notification type (success, error, warning, info) has unique colors and icons
+- **SVG Icons**: Lightweight vector icons that scale perfectly at any size
+- **Dark Mode Support**: Full dark mode implementation with type-specific dark colors
+- **RTL Support**: Complete right-to-left language support
+- **Accessibility**: ARIA roles, reduced motion support, and keyboard accessibility
+
+## Usage
+
+```typescript
+// Import the theme (if not auto-registered)
+import { amazonTheme } from '@flasher/flasher/themes';
+flasher.addTheme('amazon', amazonTheme);
+
+// Use the theme
+flasher.use('theme.amazon').success('Your order has been completed successfully');
+flasher.use('theme.amazon').error('There was a problem processing your payment');
+flasher.use('theme.amazon').warning('Your account will expire in 3 days');
+flasher.use('theme.amazon').info('New features have been added to your account');
+
+// Set as default theme
+flasher.defaultPlugin = 'theme.amazon';
+```
+
+## Customization
+
+The Amazon theme uses CSS variables that can be customized to match your brand:
+
+```css
+:root {
+    /* Amazon theme colors - Light mode */
+    --amazon-success-bg: #f0fff5;       /* Success background */
+    --amazon-success-border: #7fda95;   /* Success border */
+    --amazon-success-icon: #007600;     /* Success icon color */
+    --amazon-info-bg: #f3f9ff;          /* Info background */
+    --amazon-info-border: #7fb4da;      /* Info border */
+    --amazon-info-icon: #0066c0;        /* Info icon color */
+    --amazon-warning-bg: #fffcf3;       /* Warning background */
+    --amazon-warning-border: #ffd996;   /* Warning border */
+    --amazon-warning-icon: #c45500;     /* Warning icon color */
+    --amazon-error-bg: #fff5f5;         /* Error background */
+    --amazon-error-border: #ff8f8f;     /* Error border */
+    --amazon-error-icon: #c40000;       /* Error icon color */
+    
+    /* Dark mode colors are also available with -dark suffix */
+}
+```
+
+## Structure
+
+The Amazon theme generates notifications with the following HTML structure:
+
+```html
+<div class="fl-amazon fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
+    <div class="fl-amazon-alert">
+        <div class="fl-alert-content">
+            <div class="fl-icon-container">
+                <!-- SVG icon -->
+            </div>
+            <div class="fl-text-content">
+                <div class="fl-alert-title">Title</div>
+                <div class="fl-alert-message">Message</div>
+            </div>
+        </div>
+        <div class="fl-alert-actions">
+            <button class="fl-close" aria-label="Close notification">
+                <!-- Close icon -->
+            </button>
+        </div>
+    </div>
+</div>
+```
+
+## Accessibility Features
+
+- **ARIA Roles**: Uses appropriate role="alert" for error/warning and role="status" for success/info
+- **ARIA Live Regions**: Uses aria-live="assertive" for critical messages 
+- **Reduced Motion**: Respects prefers-reduced-motion media query
+- **Keyboard Access**: Close button is fully keyboard accessible
+- **High Contrast**: All text meets WCAG 2.1 AA color contrast standards
+- **Screen Reader Support**: Proper labeling of interactive elements
+
+## Browser Support
+
+The Amazon theme is compatible with all modern browsers:
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Opera (latest)
+
+## Implementation Details
+
+The Amazon theme uses native CSS features:
+
+- **CSS Variables**: For theme customization
+- **Flexbox**: For layout structure
+- **SVG Icons**: For resolution-independent icons
+- **Media Queries**: For responsive design, dark mode, and reduced motion
@@ -0,0 +1,115 @@
+# PHPFlasher Amber Theme
+
+## Overview
+
+The Amber theme is a modern, elegant notification style with refined aesthetics that focuses on clean design and readability. It offers a minimalist approach while maintaining visual appeal with subtle animations and transitions.
+
+![Amber Theme Preview](./images/amber-theme.png)
+
+## Features
+
+- **Modern Design**: Clean, minimalist styling with optimal readability
+- **Type-Specific Icons**: Each notification type (success, error, warning, info) has its own icon
+- **Progress Indicator**: Shows the time remaining before auto-dismiss
+- **Smooth Animation**: Subtle entrance animation for a polished feel
+- **Dark Mode Support**: Complete dark mode implementation with optimized colors
+- **RTL Support**: Full right-to-left language support
+- **Accessibility**: ARIA roles, reduced motion support, and keyboard accessibility
+
+## Usage
+
+```typescript
+// Import the theme (if not auto-registered)
+import { amberTheme } from '@flasher/flasher/themes';
+flasher.addTheme('amber', amberTheme);
+
+// Use the theme
+flasher.use('theme.amber').success('Your changes have been saved');
+flasher.use('theme.amber').error('An error occurred while saving changes');
+flasher.use('theme.amber').warning('Your session will expire in 5 minutes');
+flasher.use('theme.amber').info('New features have been added');
+
+// Set as default theme
+flasher.defaultPlugin = 'theme.amber';
+```
+
+## Customization
+
+The Amber theme uses CSS variables that can be customized to match your brand:
+
+```css
+: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 */
+}
+```
+
+## Structure
+
+The Amber theme generates notifications with the following HTML structure:
+
+```html
+<div class="fl-amber fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
+    <div class="fl-content">
+        <div class="fl-icon"></div>
+        <div class="fl-text">
+            <div class="fl-message">Message text</div>
+        </div>
+        <button class="fl-close" aria-label="Close [type] message">×</button>
+    </div>
+    <div class="fl-progress-bar">
+        <div class="fl-progress"></div>
+    </div>
+</div>
+```
+
+## Accessibility Features
+
+- **ARIA Roles**: Uses appropriate role="alert" for error/warning and role="status" for success/info
+- **ARIA Live Regions**: Uses aria-live="assertive" for critical messages and aria-live="polite" for non-critical messages
+- **Reduced Motion**: Respects prefers-reduced-motion media query
+- **Keyboard Access**: Close button is fully keyboard accessible
+- **Color Contrast**: All text meets WCAG 2.1 AA color contrast standards
+- **Button Labels**: Close button has descriptive aria-label for screen readers
+
+## Differences from Default Theme
+
+The Amber theme differs from the default theme in several ways:
+
+1. **More Minimal**: Cleaner design with less ornamentation
+2. **Subtle Shadows**: Uses softer box shadows for a modern look
+3. **Smaller Icon**: Uses a more compact icon size
+4. **No Title**: Focuses solely on the message content for simplicity
+5. **Different Animation**: Uses a top-down entrance animation
+6. **Colored Close Button**: Close button is colored based on notification type
+
+## Browser Support
+
+The Amber theme is compatible with all modern browsers:
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Opera (latest)
+
+## Implementation Details
+
+The Amber theme uses:
+
+- **CSS Variables**: For theme customization
+- **Flexbox**: For layout structure
+- **CSS Animations**: For entrance effects
+- **Media Queries**: For responsive design and accessibility
+- **Core Icons**: Uses the PHPFlasher core icon system
@@ -0,0 +1,125 @@
+# PHPFlasher Aurora Theme
+
+## Overview
+
+The Aurora theme provides an elegant, glass-like notification style with translucent backgrounds, subtle gradients, and backdrop blur effects. It offers a modern, refined aesthetic inspired by contemporary UI design trends like Apple's glass morphism.
+
+![Aurora Theme Preview](./images/aurora-theme.png)
+
+## Features
+
+- **Glass Morphism**: Semi-transparent backgrounds with backdrop blur for a frosted glass effect
+- **Subtle Gradients**: Type-specific color gradients that elegantly indicate notification type
+- **Soft Edges**: Generous border radius for a friendly, modern look
+- **Minimalist Design**: Focuses on content by omitting icons and unnecessary UI elements
+- **Smooth Animation**: Gentle fade-in with subtle scaling for a refined entrance
+- **Progress Indicator**: Understated progress bar that shows remaining time
+- **Dark Mode Support**: Beautiful dark mode implementation with adjusted colors and contrast
+- **RTL Support**: Full right-to-left language support
+
+## Usage
+
+```typescript
+// Import the theme (if not auto-registered)
+import { auroraTheme } from '@flasher/flasher/themes';
+flasher.addTheme('aurora', auroraTheme);
+
+// Use the theme
+flasher.use('theme.aurora').success('Your profile has been updated');
+flasher.use('theme.aurora').error('Please check your connection');
+flasher.use('theme.aurora').warning('Your session will expire soon');
+flasher.use('theme.aurora').info('New feature available');
+
+// Set as default theme
+flasher.defaultPlugin = 'theme.aurora';
+```
+
+## Customization
+
+The Aurora theme uses CSS variables that can be customized to match your brand:
+
+```css
+:root {
+    /* Base appearance */
+    --aurora-bg-light: rgba(255, 255, 255, 0.95);  /* Light background */
+    --aurora-bg-dark: rgba(20, 20, 28, 0.92);      /* Dark background */
+    --aurora-text-light: #1e293b;                  /* Light mode text */
+    --aurora-text-dark: #f8fafc;                   /* Dark mode text */
+    --aurora-border-radius: 16px;                  /* Corner radius */
+    --aurora-blur: 15px;                           /* Blur amount */
+    
+    /* Type-specific colors */
+    --aurora-success: #10b981;                     /* Success color */
+    --aurora-info: #3b82f6;                        /* Info color */
+    --aurora-warning: #f59e0b;                     /* Warning color */
+    --aurora-error: #ef4444;                       /* Error color */
+    
+    /* Gradient colors can also be customized */
+    --aurora-success-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.2) 100%);
+}
+```
+
+## Structure
+
+The Aurora theme generates notifications with the following HTML structure:
+
+```html
+<div class="fl-aurora fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
+    <div class="fl-content">
+        <div class="fl-message">Message text</div>
+        <button class="fl-close" aria-label="Close [type] message">×</button>
+    </div>
+    <div class="fl-progress-bar">
+        <div class="fl-progress"></div>
+    </div>
+</div>
+```
+
+## Accessibility Features
+
+- **ARIA Roles**: Uses appropriate role="alert" for error/warning and role="status" for success/info
+- **ARIA Live Regions**: Uses aria-live="assertive" for critical messages and aria-live="polite" for non-critical messages
+- **Reduced Motion**: Respects prefers-reduced-motion media query
+- **Keyboard Access**: Close button is fully keyboard accessible
+- **Color Contrast**: Maintains proper contrast even with translucent backgrounds
+- **Button Labels**: Close button has descriptive aria-label for screen readers
+
+## Technical Details
+
+### Backdrop Filter Support
+
+The Aurora theme uses CSS `backdrop-filter` to create its signature glass effect. While this property has good browser support, you should be aware of a few considerations:
+
+- **Browser Compatibility**: Supported in most modern browsers
+- **Performance**: Backdrop filters can be GPU-intensive on older devices
+- **Fallback**: On browsers without backdrop-filter support, notifications still look good with just the translucent background
+
+### Animation Technique
+
+The entrance animation combines three effects for a refined appearance:
+
+1. **Opacity**: Fade in from transparent to visible
+2. **Translation**: Slight movement from above
+3. **Scale**: Subtle growth from slightly smaller to full size
+
+This combination creates a more organic, sophisticated appearance than simple fades or slides.
+
+### CSS Implementation Notes
+
+- Uses `::before` pseudo-element for gradient overlays
+- Applies different gradients based on notification type
+- Leverages CSS custom properties for easy theming
+- Implements proper RTL support with direction adjustments
+- Provides complete dark mode styling
+
+## Browser Support
+
+The Aurora theme is compatible with all modern browsers that support CSS variables and backdrop filters:
+
+- Chrome 76+
+- Firefox 70+
+- Safari 9+
+- Edge 17+
+- Opera 64+
+
+For browsers that don't support backdrop filters, the theme gracefully degrades to using just the translucent background.
@@ -0,0 +1,116 @@
+# PHPFlasher Crystal Theme
+
+## Overview
+
+The Crystal theme provides an elegant, clean notification style with subtle animations and a focus on simplicity. It features a monochromatic design with type-specific colored text and a gentle pulsing shadow effect on hover.
+
+![Crystal Theme Preview](./images/crystal-theme.png)
+
+## Features
+
+- **Clean Design**: Minimal, white background that lets the content shine
+- **Colored Text**: Each notification type has its own text color for easy identification
+- **Animated Shadows**: Gentle pulsing shadow effect when hovering over notifications
+- **Smooth Entrance**: Subtle slide-in animation when notifications appear
+- **Progress Indicator**: Shows the time remaining before auto-dismiss
+- **Dark Mode Support**: Complete dark mode implementation with adjusted colors
+- **RTL Support**: Full right-to-left language support
+
+## Usage
+
+```typescript
+// Import the theme (if not auto-registered)
+import { crystalTheme } from '@flasher/flasher/themes';
+flasher.addTheme('crystal', crystalTheme);
+
+// Use the theme
+flasher.use('theme.crystal').success('Document saved successfully');
+flasher.use('theme.crystal').error('An error occurred while saving');
+flasher.use('theme.crystal').warning('Your session will expire in 5 minutes');
+flasher.use('theme.crystal').info('New features have been added');
+
+// Set as default theme
+flasher.defaultPlugin = 'theme.crystal';
+```
+
+## Customization
+
+The Crystal theme uses CSS variables that can be customized to match your brand:
+
+```css
+: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 */
+}
+```
+
+## Structure
+
+The Crystal theme generates notifications with the following HTML structure:
+
+```html
+<div class="fl-crystal fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
+    <div class="fl-content">
+        <div class="fl-text">
+            <p class="fl-message">Message text</p>
+        </div>
+        <button class="fl-close" aria-label="Close [type] message">×</button>
+    </div>
+    <div class="fl-progress-bar">
+        <div class="fl-progress"></div>
+    </div>
+</div>
+```
+
+## Animations
+
+The Crystal theme features two distinct animations:
+
+1. **Entrance Animation**: A smooth slide-in from above with a fade-in effect
+2. **Hover Animation**: A gentle pulsing shadow that creates a subtle "breathing" effect
+
+The hover animation is disabled in dark mode and for users who prefer reduced motion, replaced with a static enhanced shadow effect.
+
+## Accessibility Features
+
+- **ARIA Roles**: Uses appropriate role="alert" for error/warning and role="status" for success/info
+- **ARIA Live Regions**: Uses aria-live="assertive" for critical messages and aria-live="polite" for non-critical messages
+- **Reduced Motion**: Respects prefers-reduced-motion media query and disables animations
+- **Keyboard Access**: Close button is fully keyboard accessible with visual feedback
+- **Color Contrast**: High contrast between text and background for readability
+- **Button Labels**: Close button has descriptive aria-label for screen readers
+
+## Design Philosophy
+
+The Crystal theme embodies clarity and simplicity. Rather than using colored backgrounds or borders, it employs colored text to indicate notification types. This creates a cleaner, more sophisticated appearance while still providing clear visual cues about the notification's nature.
+
+The theme's name "Crystal" reflects its clean, transparent design and the subtle light effects created by its animations.
+
+## Browser Support
+
+The Crystal theme is compatible with all modern browsers:
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Opera (latest)
+
+## Implementation Notes
+
+- Uses CSS transitions for smooth hover effects
+- Employs keyframe animations for entrance and pulsing shadow
+- Uses absolute positioning for the close button to maintain consistent layout
+- Provides comprehensive RTL support for international applications
+- Implements different behavior in dark mode for optimal visibility
@@ -0,0 +1,125 @@
+# PHPFlasher Emerald Theme
+
+## Overview
+
+The Emerald theme provides an elegant, glass-like notification style with a distinctive bounce animation and translucent background. It focuses on minimalism and modern aesthetics, featuring colored text rather than backgrounds to indicate notification types.
+
+![Emerald Theme Preview](./images/emerald-theme.png)
+
+## Features
+
+- **Glass Morphism**: Semi-transparent background with backdrop blur for a frosted glass effect
+- **Bounce Animation**: Distinctive bounce animation when notifications appear
+- **Colored Text**: Each notification type has its own text color for subtle visual distinction
+- **Clean Typography**: Uses the modern Inter font with optimized readability
+- **Minimalist Design**: Omits icons and progress bars for a cleaner, more elegant look
+- **Soft Shadows**: Gentle shadows that add depth without heaviness
+- **Dark Mode Support**: Complete dark mode implementation with adjusted opacity and contrast
+- **RTL Support**: Full right-to-left language support
+
+## Usage
+
+```typescript
+// Import the theme (if not auto-registered)
+import { emeraldTheme } from '@flasher/flasher/themes';
+flasher.addTheme('emerald', emeraldTheme);
+
+// Use the theme
+flasher.use('theme.emerald').success('Your changes have been saved');
+flasher.use('theme.emerald').error('An error occurred while saving');
+flasher.use('theme.emerald').warning('Your session will expire soon');
+flasher.use('theme.emerald').info('New features have been added');
+
+// Set as default theme
+flasher.defaultPlugin = 'theme.emerald';
+```
+
+## Customization
+
+The Emerald theme uses CSS variables that can be customized to match your brand:
+
+```css
+:root {
+    /* Base colors */
+    --emerald-bg-light: rgba(255, 255, 255, 0.9);  /* Light background */
+    --emerald-bg-dark: rgba(30, 30, 30, 0.9);      /* Dark background */
+    --emerald-text-light: #333333;                 /* Light mode text */
+    --emerald-text-dark: rgba(255, 255, 255, 0.9); /* Dark mode text */
+    --emerald-shadow: rgba(0, 0, 0, 0.1);          /* Shadow color */
+    --emerald-blur: 8px;                           /* Blur amount */
+    
+    /* Type colors */
+    --emerald-success: #16a085;                    /* Success color */
+    --emerald-error: #e74c3c;                      /* Error color */
+    --emerald-warning: #f39c12;                    /* Warning color */
+    --emerald-info: #3498db;                       /* Info color */
+}
+```
+
+## Structure
+
+The Emerald theme generates notifications with the following HTML structure:
+
+```html
+<div class="fl-emerald fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
+    <div class="fl-content">
+        <div class="fl-message">Message text</div>
+        <button class="fl-close" aria-label="Close [type] message">×</button>
+    </div>
+</div>
+```
+
+## Animation
+
+The Emerald theme features a distinctive bounce animation that works as follows:
+
+1. **Start**: The notification begins at 50% size and slightly below its final position
+2. **Middle**: It quickly grows to 110% size and slightly above its final position
+3. **End**: It settles back to 100% size at its final position
+
+This creates a playful yet elegant "bounce" effect that draws attention without being too disruptive.
+
+## Design Philosophy
+
+The Emerald theme is named after its polished, refined appearance that gives notifications a gem-like quality. Its design principles include:
+
+- **Simplicity**: Only essential elements are included
+- **Elegance**: Soft blurs, shadows, and animations create a premium feel
+- **Subtlety**: Colored text rather than backgrounds for a more refined look
+- **Modernity**: Contemporary typography and glass-like effects
+- **Focus**: Clear emphasis on the message content
+
+## Accessibility Features
+
+- **ARIA Roles**: Uses appropriate role="alert" for error/warning and role="status" for success/info
+- **ARIA Live Regions**: Uses aria-live="assertive" for critical messages and aria-live="polite" for non-critical messages
+- **Reduced Motion**: Respects prefers-reduced-motion media query
+- **Keyboard Access**: Close button is fully keyboard accessible
+- **Text Sizing**: Uses relative units (rem) for text to respect user font size preferences
+- **Button Labels**: Close button has descriptive aria-label for screen readers
+
+## Technical Notes
+
+### Backdrop Filter Support
+
+The glass effect uses CSS `backdrop-filter` which has good but not universal browser support. In browsers without support, the theme falls back gracefully to a semi-transparent background without the blur effect.
+
+### Font Selection
+
+The theme specifies Inter as the preferred font, with fallback to the system font stack. To ensure optimal appearance, you may want to include Inter in your project:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
+```
+
+## Browser Support
+
+The Emerald theme is compatible with all modern browsers:
+
+- Chrome 76+
+- Firefox 70+
+- Safari 9+
+- Edge 79+
+- Opera 63+
+
+For browsers that don't support backdrop-filter, the theme gracefully degrades to a translucent background without blur.
@@ -0,0 +1,154 @@
+# PHPFlasher Facebook Theme
+
+## Overview
+
+The Facebook theme replicates the familiar notification style from Facebook's interface, providing a user experience that billions of people worldwide will instantly recognize. It features Facebook's signature look and feel, including rounded cards, circular icons, and the platform's distinctive typography and color scheme.
+
+![Facebook Theme Preview](./images/facebook-theme.png)
+
+## Features
+
+- **Facebook-Style Cards**: Rounded notification cards with subtle shadows and hover effects
+- **Circular Icons**: Type-specific colored icons in Facebook's style
+- **Timestamp Display**: Shows the time when the notification was created
+- **Interactive Elements**: Close button with hover effects
+- **Facebook Typography**: Uses Facebook's font stack for authentic appearance
+- **Dark Mode Support**: Complete dark mode implementation matching Facebook's dark theme
+- **RTL Support**: Full right-to-left language support
+
+## Usage
+
+```typescript
+// Import the theme (if not auto-registered)
+import { facebookTheme } from '@flasher/flasher/themes';
+flasher.addTheme('facebook', facebookTheme);
+
+// Use the theme
+flasher.use('theme.facebook').success('Your post was published successfully');
+flasher.use('theme.facebook').error('There was a problem uploading your photo');
+flasher.use('theme.facebook').warning('Your account is approaching storage limits');
+flasher.use('theme.facebook').info('3 people reacted to your comment');
+
+// Set as default theme
+flasher.defaultPlugin = 'theme.facebook';
+
+// Add a timestamp to your notification
+flasher.use('theme.facebook').success('Your post was published', {
+  timestamp: '2023-03-08 15:43:27'
+});
+```
+
+## Customization
+
+The Facebook theme uses CSS variables that can be customized:
+
+```css
+: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-hover-light: #f0f2f5;               /* Light 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 */
+}
+```
+
+## Structure
+
+The Facebook theme generates notifications with the following HTML structure:
+
+```html
+<div class="fl-facebook fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
+    <div class="fl-fb-notification">
+        <div class="fl-icon-container">
+            <div class="fl-fb-icon fl-fb-icon-[type]">
+                <!-- SVG icon -->
+            </div>
+        </div>
+        <div class="fl-content">
+            <div class="fl-message">Message text</div>
+            <div class="fl-meta">
+                <span class="fl-time">15:43</span>
+            </div>
+        </div>
+        <div class="fl-actions">
+            <button class="fl-button fl-close" aria-label="Close [type] message">
+                <div class="fl-button-icon">
+                    <!-- Close SVG icon -->
+                </div>
+            </button>
+        </div>
+    </div>
+</div>
+```
+
+## Configuration Options
+
+### Timestamp
+
+You can customize the timestamp displayed in the notification:
+
+```typescript
+flasher.use('theme.facebook').success('Your post was published', {
+  timestamp: '2023-03-08 15:43:27' // Format: YYYY-MM-DD HH:MM:SS
+});
+```
+
+If no timestamp is provided, the current time will be used.
+
+## Accessibility Features
+
+- **ARIA Roles**: Uses appropriate role="alert" for error/warning and role="status" for success/info
+- **ARIA Live Regions**: Uses aria-live="assertive" for critical messages and aria-live="polite" for non-critical messages
+- **Reduced Motion**: Respects prefers-reduced-motion media query
+- **Keyboard Access**: Close button is fully keyboard accessible
+- **Color Contrast**: Maintains Facebook's visual identity while ensuring readability
+- **Button Labels**: Close button has descriptive aria-label for screen readers
+
+## Design Notes
+
+### Icons
+
+The theme uses SVG icons similar to those used in Facebook notifications:
+
+- **Success**: Checkmark circle icon
+- **Info**: Information circle icon
+- **Warning**: Exclamation triangle icon
+- **Error**: Alert circle icon
+
+### Dark Mode
+
+The dark mode implementation follows Facebook's dark theme approach:
+
+- Dark background (#242526)
+- Light text (#e4e6eb)
+- Colored icons with dark backgrounds
+- Subtle hover states
+
+### Animation
+
+The entrance animation uses a subtle slide-down with fade effect, providing a familiar experience for Facebook users who are accustomed to seeing notifications appear this way.
+
+## Browser Support
+
+The Facebook theme is compatible with all modern browsers:
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Opera (latest)
+
+## Implementation Details
+
+- Uses Facebook's font stack for authentic typography
+- Implements Facebook's signature color palette
+- Recreates Facebook's card design, shadows, and hover effects
+- Uses a simplified version of Facebook's notification structure
+- Includes timestamps in Facebook's time format
@@ -0,0 +1,160 @@
+# PHPFlasher Default Theme
+
+## Overview
+
+The Flasher theme is the default notification theme for PHPFlasher. It provides a classic, clean design with a distinctive colored left border that visually indicates the notification type. This theme balances visual clarity with simplicity, making it suitable for a wide range of applications.
+
+![Flasher Theme Preview](./images/flasher-theme.png)
+
+## Features
+
+- **Colored Left Border**: Prominent left border that clearly indicates notification type
+- **Type-Specific Icons**: Each notification type has its own distinctive icon
+- **Title & Message**: Supports both a title and message text for clear communication
+- **Hover Animation**: Subtle lift effect when hovering over notifications
+- **Progress Bar**: Shows the time remaining before auto-dismiss
+- **Slide-in Animation**: Smooth entrance animation from the left
+- **Dark Mode Support**: Complete dark mode implementation with optimized colors
+- **RTL Support**: Full right-to-left language support
+
+## Usage
+
+The Flasher theme is available by default without requiring explicit registration:
+
+```typescript
+// Use directly without specifying a theme
+flasher.success('Operation completed successfully');
+flasher.error('An error occurred during the operation');
+flasher.warning('This action cannot be undone');
+flasher.info('New updates are available');
+
+// Or explicitly use the theme
+flasher.use('theme.flasher').success('Operation completed successfully');
+
+// With a title
+flasher.success('Operation completed successfully', 'Success');
+```
+
+## Customization
+
+The Flasher theme uses CSS variables that can be customized:
+
+```css
+:root {
+    /* Base colors */
+    --fl-bg-light: #ffffff;            /* Light mode background */
+    --fl-bg-dark: rgb(15, 23, 42);     /* Dark mode background */
+    --fl-text-light: rgb(75, 85, 99);  /* Light mode text */
+    --fl-text-dark: #ffffff;           /* Dark mode text */
+    
+    /* Type colors */
+    --fl-success: #10b981;             /* Success color */
+    --fl-info: #3b82f6;                /* Info color */
+    --fl-warning: #f59e0b;             /* Warning color */
+    --fl-error: #ef4444;               /* Error color */
+    
+    /* Legacy support */
+    --background-color: var(--fl-bg-light);
+    --text-color: var(--fl-text-light);
+    --dark-background-color: var(--fl-bg-dark);
+    --dark-text-color: var(--fl-text-dark);
+    --success-color: var(--fl-success);
+    --info-color: var(--fl-info);
+    --warning-color: var(--fl-warning);
+    --error-color: var(--fl-error);
+}
+```
+
+## Structure
+
+The Flasher theme generates notifications with the following HTML structure:
+
+```html
+<div class="fl-flasher fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
+    <div class="fl-content">
+        <div class="fl-icon"></div>
+        <div>
+            <strong class="fl-title">Title text</strong>
+            <span class="fl-message">Message text</span>
+        </div>
+        <button class="fl-close" aria-label="Close [type] message">&times;</button>
+    </div>
+    <span class="fl-progress-bar">
+        <span class="fl-progress"></span>
+    </span>
+</div>
+```
+
+## Animation
+
+The Flasher theme features two animations:
+
+1. **Entrance Animation**: A slide-in from the left with a fade-in effect:
+   ```css
+   @keyframes flasherIn {
+       from {
+           opacity: 0;
+           transform: translateX(-10px);
+       }
+       to {
+           opacity: 1;
+           transform: translateX(0);
+       }
+   }
+   ```
+
+2. **Hover Animation**: A subtle lift effect when hovering over notifications:
+   ```css
+   &:hover {
+       transform: translateY(-2px);
+   }
+   ```
+
+Both animations are disabled for users who prefer reduced motion.
+
+## Design Philosophy
+
+As the default theme for PHPFlasher, the Flasher theme is designed with these principles:
+
+1. **Clarity**: The colored left border makes it immediately clear what type of notification is being shown
+2. **Versatility**: The clean design fits well in a wide range of applications and design systems
+3. **Accessibility**: High contrast, clear typography, and semantic HTML ensure notifications are accessible
+4. **Familiarity**: The design follows common notification patterns that users will find intuitive
+
+## Visual Characteristics
+
+- **Border**: Thick, colored left border (0.8em) that visually identifies the notification type
+- **Typography**: Clear hierarchy with distinct title and message styles
+- **Shadow**: Subtle shadow that gives depth without being too prominent
+- **Icons**: Type-specific icons that help with quick visual identification
+- **Progress Bar**: Thin progress indicator at the bottom that shows remaining time
+
+## Accessibility Features
+
+- **ARIA Roles**: Uses appropriate role="alert" for error/warning and role="status" for success/info
+- **ARIA Live Regions**: Uses aria-live="assertive" for critical messages and aria-live="polite" for non-critical messages
+- **Reduced Motion**: Respects prefers-reduced-motion media query
+- **Keyboard Access**: Close button is fully keyboard accessible
+- **Color Contrast**: All text meets WCAG 2.1 AA color contrast standards
+- **RTL Support**: Full right-to-left language support with appropriately mirrored layout
+
+## Browser Support
+
+The Flasher theme is compatible with all modern browsers:
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Opera (latest)
+
+## Implementation Details
+
+The Flasher theme is built using:
+
+- **SCSS Mixins**: Uses shared mixins for common functionality
+- **CSS Variables**: For theme customization and consistency
+- **Flexbox**: For layout structure
+- **CSS Animation**: For entrance and hover effects
+- **Media Queries**: For responsive design, dark mode, and reduced motion
+- **CSS Transitions**: For smooth hover interactions
@@ -0,0 +1,181 @@
+# PHPFlasher Google Theme
+
+## Overview
+
+The Google theme provides notifications inspired by Google's Material Design system, one of the most recognized design languages worldwide. It features Google's distinctive card-based layout, typography, elevation patterns, and interactive elements like ripple effects that will be immediately familiar to users of Google products.
+
+![Google Theme Preview](./images/google-theme.png)
+
+## Features
+
+- **Material Design Cards**: Elevated cards with proper shadow depth following Material guidelines
+- **Material Icons**: SVG icons following Google's Material Design iconography
+- **Ripple Effect**: Interactive feedback with ripple animation on button press
+- **Action Button**: DISMISS button with uppercase text following Material conventions
+- **Slide-Up Animation**: Smooth entrance animation with Material motion easing
+- **Material Typography**: Roboto font with Google's type scale and weights
+- **Linear Progress**: Material Design progress indicator at the bottom of card
+- **Dark Mode Support**: Proper implementation of Material dark theme
+- **RTL Support**: Full right-to-left language support
+
+## Usage
+
+```typescript
+// Import the theme (if not auto-registered)
+import { googleTheme } from '@flasher/flasher/themes';
+flasher.addTheme('google', googleTheme);
+
+// Use the theme
+flasher.use('theme.google').success('Operation completed successfully');
+flasher.use('theme.google').error('An error occurred during the operation');
+flasher.use('theme.google').warning('This action cannot be undone');
+flasher.use('theme.google').info('New updates are available');
+
+// With a title
+flasher.use('theme.google').success('Your changes have been saved', 'Success');
+
+// Set as default theme
+flasher.defaultPlugin = 'theme.google';
+```
+
+## Customization
+
+The Google theme uses CSS variables that can be customized to match your brand while maintaining the Material Design feel:
+
+```css
+:root {
+    /* Base appearance */
+    --md-bg-light: #ffffff;              /* Light mode background */
+    --md-bg-dark: #2d2d2d;               /* Dark mode background */
+    --md-text-light: rgba(0, 0, 0, 0.87); /* Primary text in light mode */
+    --md-text-secondary-light: rgba(0, 0, 0, 0.6); /* Secondary text in light mode */
+    --md-elevation: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12); /* Card shadow */
+    --md-border-radius: 4px;             /* Card corner radius */
+    
+    /* Type colors - based on Material palette */
+    --md-success: #43a047;               /* Green 600 */
+    --md-info: #1e88e5;                  /* Blue 600 */
+    --md-warning: #fb8c00;               /* Orange 600 */
+    --md-error: #e53935;                 /* Red 600 */
+    
+    /* Animation timing */
+    --md-animation-duration: 0.3s;       /* Entrance animation duration */
+    --md-ripple-duration: 0.6s;          /* Button ripple effect duration */
+}
+```
+
+## Structure
+
+The Google theme generates notifications with the following HTML structure:
+
+```html
+<div class="fl-google fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
+    <div class="fl-md-card">
+        <div class="fl-content">
+            <div class="fl-icon-wrapper">
+                <!-- SVG icon -->
+            </div>
+            <div class="fl-text-content">
+                <div class="fl-title">Title (if provided)</div>
+                <div class="fl-message">Message text</div>
+            </div>
+        </div>
+        <div class="fl-actions">
+            <button class="fl-action-button fl-close" aria-label="Close [type] message">
+                DISMISS
+            </button>
+        </div>
+    </div>
+    <div class="fl-progress-bar">
+        <div class="fl-progress"></div>
+    </div>
+</div>
+```
+
+## Material Design Elements
+
+### Elevation
+
+The theme uses proper Material Design elevation with three shadow components:
+
+1. **Umbra**: The darkest, sharpest shadow representing the main shadow
+2. **Penumbra**: The mid-tone, slightly softer shadow
+3. **Ambient**: The lightest, most diffuse shadow
+
+This creates the characteristic Material Design "floating" effect for cards.
+
+### Typography
+
+Following Material Design typography guidelines:
+
+- **Title**: 16px (1rem), medium weight (500)
+- **Message**: 14px (0.875rem), regular weight (400), 60% opacity for secondary text
+- **Button**: 13px (0.8125rem), medium weight (500), uppercase with letterSpacing
+
+### Ripple Effect
+
+The theme includes Material Design's signature "ink ripple" effect:
+
+1. A small circle appears at the point of interaction
+2. The circle rapidly expands outward
+3. The effect fades out as it reaches full size
+
+This provides visual feedback that enhances the tactile feeling of the interface.
+
+## Animation Details
+
+### Entrance Animation
+
+The Google theme uses Material Design's standard motion curve (cubic-bezier(0.4, 0, 0.2, 1)) for its slide-up animation. This creates a natural-feeling motion that follows the principles of Material motion:
+
+- Quick acceleration from start
+- Smooth deceleration to end
+- Total duration of 300ms
+
+### Interaction Animations
+
+The theme includes several interaction animations:
+
+1. **Button Hover**: Background color transition (200ms)
+2. **Button Press**: Ripple effect (600ms)
+3. **Progress Bar**: Linear progress animation
+
+## Accessibility Features
+
+- **ARIA Roles**: Uses appropriate role="alert" for error/warning and role="status" for success/info
+- **ARIA Live Regions**: Uses aria-live="assertive" for critical messages and aria-live="polite" for non-critical messages
+- **Reduced Motion**: Respects prefers-reduced-motion media query and disables animations
+- **Keyboard Access**: Action button is fully keyboard accessible
+- **Color Contrast**: All text meets WCAG 2.1 AA color contrast standards
+- **Text Alternatives**: Descriptive aria-labels for interactive elements
+
+## Dark Mode
+
+The Google theme implements Material Design's dark theme guidelines:
+
+- Dark surfaces (#2d2d2d)
+- Light text (87% white for primary, 60% white for secondary)
+- Adjusted shadows for better visibility on dark backgrounds
+- Higher contrast for hover states (8% opacity instead of 4%)
+
+## Font Considerations
+
+For the best experience, it's recommended to include the Roboto font in your project:
+
+```html
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+```
+
+If Roboto is not available, the theme falls back to system fonts while maintaining the Material Design aesthetic as much as possible.
+
+## Browser Support
+
+The Google theme is compatible with all modern browsers:
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Opera (latest)
+
+The ripple effect and other animations may have slightly different appearances across browsers, but the core functionality works everywhere.
@@ -0,0 +1,192 @@
+# PHPFlasher iOS Theme
+
+## Overview
+
+The iOS theme provides notifications styled after Apple's iOS notification system, creating a familiar experience for users of iPhones and iPads. It features Apple's distinctive frosted glass effect, app icon style, and subtle animations that mimic native iOS notifications.
+
+![iOS Theme Preview](./images/ios-theme.png)
+
+## Features
+
+- **Frosted Glass Effect**: Semi-transparent background with backdrop blur
+- **App Icon**: Type-specific colored app icon with white symbol
+- **iOS Typography**: Apple's San Francisco font (with system fallbacks)
+- **Current Time**: Real-time timestamp in iOS format
+- **Smooth Animations**: iOS-like entrance and content expansion animations
+- **iOS-Style Close Button**: Small circular button in the top right
+- **Dark Mode Support**: Proper implementation of iOS dark appearance
+- **RTL Support**: Full right-to-left language support
+
+## Usage
+
+```typescript
+// Import the theme (if not auto-registered)
+import { iosTheme } from '@flasher/flasher/themes';
+flasher.addTheme('ios', iosTheme);
+
+// Use the theme
+flasher.use('theme.ios').success('Your photo was uploaded successfully');
+flasher.use('theme.ios').error('Unable to connect to server');
+flasher.use('theme.ios').warning('Low storage space on your device');
+flasher.use('theme.ios').info('New software update available');
+
+// With a custom app name (title)
+flasher.use('theme.ios').success('Message sent', 'Messages');
+
+// Set as default theme
+flasher.defaultPlugin = 'theme.ios';
+```
+
+## Customization
+
+The iOS theme uses CSS variables that can be customized to match your brand while maintaining the iOS look:
+
+```css
+:root {
+    /* Base appearance */
+    --ios-bg-light: rgba(255, 255, 255, 0.85);  /* Light mode background */
+    --ios-bg-dark: rgba(30, 30, 30, 0.85);      /* Dark mode background */
+    --ios-text-light: #000000;                  /* Light mode text */
+    --ios-text-secondary-light: #6e6e6e;        /* Light mode secondary text */
+    --ios-border-radius: 13px;                  /* Corner radius */
+    --ios-blur: 30px;                           /* Backdrop blur amount */
+    
+    /* Type colors - based on iOS system colors */
+    --ios-success: #34c759;                     /* iOS green */
+    --ios-info: #007aff;                        /* iOS blue */
+    --ios-warning: #ff9500;                     /* iOS orange */
+    --ios-error: #ff3b30;                       /* iOS red */
+}
+```
+
+## Structure
+
+The iOS theme generates notifications with the following HTML structure:
+
+```html
+<div class="fl-ios fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
+    <div class="fl-ios-notification">
+        <div class="fl-header">
+            <div class="fl-app-icon">
+                <!-- SVG icon -->
+            </div>
+            <div class="fl-app-info">
+                <div class="fl-app-name">App Name/Title</div>
+                <div class="fl-time">Current time</div>
+            </div>
+        </div>
+        <div class="fl-content">
+            <div class="fl-message">Message text</div>
+        </div>
+        <button class="fl-close" aria-label="Close [type] message">
+            <span aria-hidden="true">×</span>
+        </button>
+    </div>
+</div>
+```
+
+## Animation Details
+
+The iOS theme features two carefully crafted animations that work together to create a smooth, iOS-like appearance:
+
+### Entrance Animation
+
+The main notification slides in from above with a subtle scaling effect:
+
+```css
+@keyframes iosSlideIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-15px) scale(0.96);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+```
+
+This animation uses a custom easing curve (cubic-bezier(0.23, 1, 0.32, 1)) which mimics the iOS animation style with a quick start and gentle end.
+
+### Content Expansion Animation
+
+After the notification appears, the content area expands with a slight delay:
+
+```css
+@keyframes iosExpand {
+    0% {
+        max-height: 0;
+        opacity: 0;
+    }
+    100% {
+        max-height: 100px;
+        opacity: 1;
+    }
+}
+```
+
+This creates a subtle two-step effect where the header appears first, followed by the message content—similar to how iOS reveals notification content.
+
+## iOS-Specific Design Elements
+
+### Frosted Glass Effect
+
+The iOS theme uses `backdrop-filter: blur()` to create Apple's signature frosted glass effect. This creates a semi-transparent background that blurs content behind the notification.
+
+### App Icon
+
+The app icon follows iOS design principles:
+- Square with slightly rounded corners (5px radius)
+- Colored background based on notification type
+- White icon centered within the square
+
+### Typography
+
+The theme uses Apple's system font stack:
+- San Francisco on Apple devices
+- Appropriate fallbacks for other platforms
+- Font weights and sizes that match iOS notifications
+
+### Close Button
+
+The close button mimics iOS UI elements:
+- Small circular button (18px diameter)
+- Semi-transparent background
+- Simple "×" symbol
+- Subtle hover effect
+
+## Dark Mode
+
+The iOS theme implements Apple's dark mode approach:
+- Dark semi-transparent background
+- Light text
+- Adjusted shadows for better visibility
+- Lighter close button background
+
+## Accessibility Features
+
+- **ARIA Roles**: Uses appropriate role="alert" for error/warning and role="status" for success/info
+- **ARIA Live Regions**: Uses aria-live="assertive" for critical messages and aria-live="polite" for non-critical messages
+- **Reduced Motion**: Respects prefers-reduced-motion media query and disables animations
+- **Keyboard Access**: Close button is fully keyboard accessible
+- **Color Contrast**: Maintains proper contrast ratios in both light and dark modes
+- **Mobile Optimization**: Responsive design that adjusts for small screens
+
+## Browser Support
+
+The iOS theme is compatible with all modern browsers:
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Opera (latest)
+
+For browsers that don't support backdrop-filter, the theme gracefully degrades to using just the semi-transparent background without blur.
+
+## Implementation Notes
+
+- The theme automatically displays the current time in a format similar to iOS notifications
+- The title parameter is used as the "app name" in the notification
+- If no title is provided, it defaults to "PHPFlasher"
+- The theme does not include a progress bar, matching iOS's notification style
@@ -0,0 +1,154 @@
+# PHPFlasher Jade Theme
+
+## Overview
+
+The Jade theme provides a calm, minimalist notification style with soft colors and subtle animations. It features a clean design that emphasizes message content through generous padding, rounded corners, and type-specific color schemes. The theme takes its name from the natural, soothing quality of its appearance.
+
+![Jade Theme Preview](./images/jade-theme.png)
+
+## Features
+
+- **Minimalist Design**: Clean layout without icons for a streamlined appearance
+- **Soft Color Palette**: Gentle, pastel backgrounds with contrasting text colors
+- **Rounded Corners**: Large border radius (1rem) for a friendly, approachable feel
+- **Subtle Animation**: Combined scaling and movement for an elegant entrance
+- **Type-Specific Styling**: Each notification type has its own color scheme
+- **Refined Interactions**: Thoughtful hover effects and transitions
+- **Progress Indicator**: Subtle progress bar showing time remaining
+- **Dark Mode Support**: Complete dark mode implementation with adjusted colors
+- **RTL Support**: Full right-to-left language support
+
+## Usage
+
+```typescript
+// Import the theme (if not auto-registered)
+import { jadeTheme } from '@flasher/flasher/themes';
+flasher.addTheme('jade', jadeTheme);
+
+// Use the theme
+flasher.use('theme.jade').success('Your changes have been saved');
+flasher.use('theme.jade').error('An error occurred while saving changes');
+flasher.use('theme.jade').warning('Your session will expire in 5 minutes');
+flasher.use('theme.jade').info('New features have been added');
+
+// Set as default theme
+flasher.defaultPlugin = 'theme.jade';
+```
+
+## Customization
+
+The Jade theme uses CSS variables that can be customized to match your brand while maintaining its calm aesthetic:
+
+```css
+:root {
+    /* Base appearance */
+    --jade-text-light: #5f6c7b;                /* Text color in light mode */
+    --jade-text-dark: #e2e8f0;                 /* Text color in dark mode */
+    --jade-border-radius: 1rem;                /* Corner roundness */
+    
+    /* Type-specific colors - Light mode */
+    --jade-success-bg: #f0fdf4;                /* Success background */
+    --jade-success-color: #16a34a;             /* Success text/accent */
+    --jade-info-bg: #eff6ff;                   /* Info background */
+    --jade-info-color: #3b82f6;                /* Info text/accent */
+    --jade-warning-bg: #fffbeb;                /* Warning background */
+    --jade-warning-color: #f59e0b;             /* Warning text/accent */
+    --jade-error-bg: #fef2f2;                  /* Error background */
+    --jade-error-color: #dc2626;               /* Error text/accent */
+    
+    /* Dark mode backgrounds */
+    --jade-success-bg-dark: rgba(22, 163, 74, 0.15);  /* Dark mode success */
+    --jade-info-bg-dark: rgba(59, 130, 246, 0.15);    /* Dark mode info */
+    --jade-warning-bg-dark: rgba(245, 158, 11, 0.15); /* Dark mode warning */
+    --jade-error-bg-dark: rgba(220, 38, 38, 0.15);    /* Dark mode error */
+}
+```
+
+## Structure
+
+The Jade theme generates notifications with the following HTML structure:
+
+```html
+<div class="fl-jade fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
+    <div class="fl-content">
+        <div class="fl-message">Message text</div>
+        <button class="fl-close" aria-label="Close [type] message">×</button>
+    </div>
+    <div class="fl-progress-bar">
+        <div class="fl-progress"></div>
+    </div>
+</div>
+```
+
+## Animation
+
+The Jade theme features a refined entrance animation that combines two effects:
+
+```css
+@keyframes jadeIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-10px) scale(0.95);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+```
+
+This animation creates a subtle effect where notifications:
+1. Fade in from invisible to fully visible
+2. Move upward slightly from their final position
+3. Scale from 95% to 100% of their final size
+
+The combination of these effects creates a more organic, refined entrance than simple fades or slides. The animation uses a carefully tuned easing curve (`cubic-bezier(0.4, 0, 0.2, 1)`) for a natural feel.
+
+## Design Philosophy
+
+The Jade theme embodies several design principles:
+
+1. **Simplicity**: Only essential elements are included, with no icons or extraneous components
+2. **Softness**: Rounded corners, pastel colors, and subtle transitions create a gentle feel
+3. **Clarity**: Clear color coding with strong contrast between background and text
+4. **Refinement**: Thoughtful attention to details like animation timing and hover states
+5. **Consistency**: Each notification type follows the same pattern with its own color scheme
+
+## Color System
+
+The Jade theme uses a dual-color system for each notification type:
+
+- **Background**: Very light, pastel version of the type color (e.g., very light green for success)
+- **Text/Accents**: More saturated version of the same color (e.g., medium green for success text)
+
+This approach maintains excellent readability while providing clear visual differentiation between notification types.
+
+## Dark Mode
+
+In dark mode, the theme switches to semi-transparent colored backgrounds that create a subtle glow effect:
+
+- Base text becomes lighter (#e2e8f0)
+- Backgrounds use semi-transparent colored overlays (15% opacity)
+- Borders become slightly more visible (20% opacity instead of 10%)
+- Hover states use white instead of black (10% white opacity)
+
+This creates a cohesive dark appearance that maintains the theme's calm aesthetic.
+
+## Accessibility Features
+
+- **ARIA Roles**: Uses appropriate role="alert" for error/warning and role="status" for success/info
+- **ARIA Live Regions**: Uses aria-live="assertive" for critical messages and aria-live="polite" for non-critical messages
+- **Reduced Motion**: Respects prefers-reduced-motion media query
+- **Keyboard Access**: Close button is fully keyboard accessible with visual feedback
+- **Color Contrast**: All text meets WCAG 2.1 AA color contrast standards
+- **Button Labeling**: Close button has descriptive aria-label for screen readers
+
+## Browser Support
+
+The Jade theme is compatible with all modern browsers:
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Opera (latest)
@@ -0,0 +1,181 @@
+# PHPFlasher Material Theme
+
+## Overview
+
+The Material theme provides a minimalist implementation of Google's Material Design system for notifications. It features clean cards with proper elevation, Material Design typography, and interactive elements that follow Material guidelines, all without unnecessary visual elements to maintain focus on the message content.
+
+![Material Theme Preview](./images/material-theme.png)
+
+## Features
+
+- **Material Design Card**: Clean, elevated card with proper shadow depth
+- **Minimalist Approach**: No icons or extraneous elements for a focused experience
+- **Material Typography**: Roboto font with proper text hierarchy and opacity
+- **Action Button**: DISMISS button with uppercase text following Material conventions
+- **Ripple Effect**: Interactive feedback with ripple animation on button press
+- **Slide-Up Animation**: Smooth entrance animation with Material motion easing
+- **Linear Progress**: Material Design progress indicator at the bottom
+- **Dark Mode Support**: Proper implementation of Material dark theme
+- **RTL Support**: Full right-to-left language support
+
+## Usage
+
+```typescript
+// Import the theme (if not auto-registered)
+import { materialTheme } from '@flasher/flasher/themes';
+flasher.addTheme('material', materialTheme);
+
+// Use the theme
+flasher.use('theme.material').success('Operation completed successfully');
+flasher.use('theme.material').error('An error occurred during the operation');
+flasher.use('theme.material').warning('This action cannot be undone');
+flasher.use('theme.material').info('New updates are available');
+
+// Set as default theme
+flasher.defaultPlugin = 'theme.material';
+```
+
+## Customization
+
+The Material theme uses CSS variables that can be customized to match your brand while maintaining the Material Design feel:
+
+```css
+:root {
+    /* Base appearance */
+    --md-bg-light: #ffffff;              /* Light mode background */
+    --md-bg-dark: #2d2d2d;               /* Dark mode background */
+    --md-text-light: rgba(0, 0, 0, 0.87); /* Primary text in light mode */
+    --md-text-secondary-light: rgba(0, 0, 0, 0.6); /* Secondary text in light mode */
+    --md-elevation: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12); /* Card shadow */
+    --md-border-radius: 4px;             /* Card corner radius */
+    
+    /* Type colors - based on Material palette */
+    --md-success: #43a047;               /* Green 600 */
+    --md-info: #1e88e5;                  /* Blue 600 */
+    --md-warning: #fb8c00;               /* Orange 600 */
+    --md-error: #e53935;                 /* Red 600 */
+    
+    /* Animation timing */
+    --md-animation-duration: 0.3s;       /* Entrance animation duration */
+    --md-ripple-duration: 0.6s;          /* Button ripple effect duration */
+}
+```
+
+## Structure
+
+The Material theme generates notifications with the following HTML structure:
+
+```html
+<div class="fl-material fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
+    <div class="fl-md-card">
+        <div class="fl-content">
+            <div class="fl-text-content">
+                <div class="fl-message">Message text</div>
+            </div>
+        </div>
+        <div class="fl-actions">
+            <button class="fl-action-button fl-close" aria-label="Close [type] message">
+                DISMISS
+            </button>
+        </div>
+    </div>
+    <div class="fl-progress-bar">
+        <div class="fl-progress"></div>
+    </div>
+</div>
+```
+
+## Material Design Elements
+
+### Elevation
+
+The theme uses proper Material Design elevation with three shadow components:
+
+1. **Umbra**: The darkest, sharpest shadow representing the main shadow
+2. **Penumbra**: The mid-tone, slightly softer shadow
+3. **Ambient**: The lightest, most diffuse shadow
+
+This creates the characteristic Material Design "floating" effect for cards.
+
+### Typography
+
+Following Material Design typography guidelines:
+
+- **Message**: 14px (0.875rem), regular weight (400), 60% opacity for secondary text
+- **Button**: 13px (0.8125rem), medium weight (500), uppercase with letterSpacing
+
+### Ripple Effect
+
+The theme includes Material Design's signature "ink ripple" effect:
+
+1. A small circle appears at the point of interaction
+2. The circle rapidly expands outward
+3. The effect fades out as it reaches full size
+
+This provides visual feedback that enhances the tactile feeling of the interface.
+
+## Animation Details
+
+### Entrance Animation
+
+The Material theme uses Material Design's standard motion curve (cubic-bezier(0.4, 0, 0.2, 1)) for its slide-up animation. This creates a natural-feeling motion that follows the principles of Material motion:
+
+- Quick acceleration from start
+- Smooth deceleration to end
+- Total duration of 300ms
+
+### Interaction Animations
+
+The theme includes several interaction animations:
+
+1. **Button Hover**: Background color transition (200ms)
+2. **Button Press**: Ripple effect (600ms)
+3. **Progress Bar**: Linear progress animation
+
+## Differences from Google Theme
+
+While both the Material theme and Google theme follow Material Design guidelines, they differ in these key ways:
+
+1. **Minimalist Approach**: The Material theme omits icons entirely for a more streamlined appearance
+2. **Focus on Content**: With fewer visual elements, more focus is placed on the message text
+3. **Simplified Structure**: The HTML structure is more straightforward without icon containers
+
+## Accessibility Features
+
+- **ARIA Roles**: Uses appropriate role="alert" for error/warning and role="status" for success/info
+- **ARIA Live Regions**: Uses aria-live="assertive" for critical messages and aria-live="polite" for non-critical messages
+- **Reduced Motion**: Respects prefers-reduced-motion media query and disables animations
+- **Keyboard Access**: Action button is fully keyboard accessible
+- **Color Contrast**: All text meets WCAG 2.1 AA color contrast standards
+- **Text Alternatives**: Descriptive aria-labels for interactive elements
+
+## Dark Mode
+
+The Material theme implements Material Design's dark theme guidelines:
+
+- Dark surfaces (#2d2d2d)
+- Light text (87% white for primary, 60% white for secondary)
+- Adjusted shadows for better visibility on dark backgrounds
+- Higher contrast for hover states (8% opacity instead of 4%)
+
+## Font Considerations
+
+For the best experience, it's recommended to include the Roboto font in your project:
+
+```html
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+```
+
+If Roboto is not available, the theme falls back to system fonts while maintaining the Material Design aesthetic as much as possible.
+
+## Browser Support
+
+The Material theme is compatible with all modern browsers:
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Opera (latest)
+
+The ripple effect and other animations may have slightly different appearances across browsers, but the core functionality works everywhere.
@@ -0,0 +1,161 @@
+# PHPFlasher Minimal Theme
+
+## Overview
+
+The Minimal theme provides an ultra-clean, distraction-free notification design that prioritizes simplicity and unobtrusiveness. With its compact dimensions, subtle visual styling, and reduced visual elements, this theme is perfect for applications where notifications should provide information without competing for attention with the main interface.
+
+![Minimal Theme Preview](./images/minimal-theme.png)
+
+## Features
+
+- **Ultra-Clean Design**: Stripped down to only essential elements
+- **Translucent Background**: Semi-transparent with subtle backdrop blur
+- **Compact Size**: Smaller footprint with comfortable spacing
+- **Small Dot Indicator**: Uses a small colored dot instead of large icons
+- **System Fonts**: Uses the system font stack for optimal readability
+- **Thin Progress Bar**: Nearly invisible 2px progress indicator
+- **Quick Animation**: Brief, subtle entrance animation
+- **Minimal Shadows**: Very light shadows for just a hint of depth
+- **Dark Mode Support**: Refined dark appearance with adjusted opacity
+- **RTL Support**: Full right-to-left language support
+
+## Usage
+
+```typescript
+// Import the theme (if not auto-registered)
+import { minimalTheme } from '@flasher/flasher/themes';
+flasher.addTheme('minimal', minimalTheme);
+
+// Use the theme
+flasher.use('theme.minimal').success('Changes saved');
+flasher.use('theme.minimal').error('Connection lost');
+flasher.use('theme.minimal').warning('Low disk space');
+flasher.use('theme.minimal').info('Updates available');
+
+// Set as default theme
+flasher.defaultPlugin = 'theme.minimal';
+```
+
+## Customization
+
+The Minimal theme uses CSS variables that can be customized:
+
+```css
+:root {
+    /* Base appearance */
+    --minimal-bg-light: rgba(255, 255, 255, 0.8);  /* Light mode background */
+    --minimal-bg-dark: rgba(25, 25, 25, 0.8);      /* Dark mode background */
+    --minimal-text-light: #333333;                 /* Light mode text */
+    --minimal-text-dark: #f5f5f5;                  /* Dark mode text */
+    --minimal-border-radius: 6px;                  /* Corner radius */
+    
+    /* Type colors */
+    --minimal-success: rgba(34, 197, 94, 0.9);     /* Success color */
+    --minimal-info: rgba(14, 165, 233, 0.9);       /* Info color */
+    --minimal-warning: rgba(245, 158, 11, 0.9);    /* Warning color */
+    --minimal-error: rgba(239, 68, 68, 0.9);       /* Error color */
+}
+```
+
+## Structure
+
+The Minimal theme generates notifications with the following HTML structure:
+
+```html
+<div class="fl-minimal fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
+    <div class="fl-content">
+        <div class="fl-message">Message text</div>
+        <button class="fl-close" aria-label="Close [type] message">×</button>
+    </div>
+    <div class="fl-progress-bar">
+        <div class="fl-progress"></div>
+    </div>
+</div>
+```
+
+Note: The HTML includes the class `fl-dot`, but this element is not present in the rendered structure (this appears to be a small inconsistency in the theme).
+
+## Design Philosophy
+
+The Minimal theme embodies several key design principles:
+
+1. **Reduction**: Eliminating all non-essential visual elements
+2. **Unobtrusiveness**: Staying out of the way while delivering information
+3. **Clarity**: Maintaining excellent readability with system fonts
+4. **Subtlety**: Using transparency, small indicators, and minimal animation
+5. **Consistency**: Applying the same minimal approach to all aspects
+
+The theme deliberately avoids large icons, bold colors, or pronounced animations that might distract users from their primary tasks. The small colored dot provides just enough visual indication of the notification type without overwhelming the interface.
+
+## Visual Characteristics
+
+### Frosted Glass Effect
+
+The theme uses a semi-transparent background (80% opacity) with an 8px backdrop blur, creating a subtle "frosted glass" effect that lets the underlying content partially show through.
+
+### System Font Stack
+
+```css
+font-family: -apple-system, BlinkMacSystemFont, var(--fl-font), sans-serif;
+```
+
+This stack uses the system UI font of the user's device (San Francisco on Apple devices, Segoe UI on Windows, etc.), ensuring that notifications look native to the platform.
+
+### Size and Space
+
+- **Max Width**: 320px
+- **Padding**: 0.75rem 1rem (12px 16px at default font size)
+- **Text Size**: 0.875rem (14px at default font size)
+- **Dot Size**: 8px diameter
+
+### Animation
+
+The entrance animation is intentionally brief (0.2s) and subtle:
+
+```css
+@keyframes minimalIn {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+```
+
+## Accessibility Features
+
+- **ARIA Roles**: Uses appropriate role="alert" for error/warning and role="status" for success/info
+- **ARIA Live Regions**: Uses aria-live="assertive" for critical messages and aria-live="polite" for non-critical messages
+- **Reduced Motion**: Respects prefers-reduced-motion media query
+- **Keyboard Access**: Close button is fully keyboard accessible
+- **Color Indications**: Uses color dots to indicate type without relying solely on color
+- **System Fonts**: Improved readability through native font rendering
+- **Adequate Contrast**: Maintains good contrast ratio between text and background
+
+## Dark Mode
+
+The dark mode implementation maintains the minimal aesthetic while ensuring readability:
+
+- Dark semi-transparent background (rgba(25, 25, 25, 0.8))
+- Light text color (#f5f5f5)
+- Slightly stronger shadows
+- Subtle white border (10% opacity)
+
+The colors of the dot indicators remain the same in both light and dark modes to maintain consistency.
+
+## Browser Compatibility
+
+The Minimal theme is compatible with all modern browsers. For the backdrop blur effect:
+- Full support: Chrome 76+, Safari 9+, Edge 17+
+- No backdrop blur: Firefox (falls back gracefully to semi-transparent background)
+
+## Performance Considerations
+
+The theme is designed for optimal performance:
+- Uses `will-change: transform, opacity` to optimize animations
+- Minimal DOM structure reduces rendering complexity
+- Short animations minimize computation
+- No complex gradients or heavy visual effects
@@ -0,0 +1,192 @@
+# PHPFlasher Neon Theme
+
+## Overview
+
+The Neon theme provides elegant notifications with subtle glowing accents that evoke the gentle illumination of neon lights. It features a frosted glass background, floating illuminated indicators, and refined typography that come together to create a modern, sophisticated appearance.
+
+![Neon Theme Preview](./images/neon-theme.png)
+
+## Features
+
+- **Subtle Glow Effects**: Gentle illumination based on notification type
+- **Floating Indicator**: Colored dot that appears to float above the notification
+- **Frosted Glass**: Semi-transparent background with backdrop blur
+- **Elegant Typography**: Clean, refined text using Inter font
+- **Pulsing Animation**: Subtle "breathing" effect on the glowing indicator
+- **Entrance Animation**: Smooth appearance with combined movement and blur transitions
+- **Progress Indicator**: Colored bar showing time remaining
+- **Dark Mode Support**: Enhanced dark appearance that preserves glow effects
+- **RTL Support**: Full right-to-left language support
+
+## Usage
+
+```typescript
+// Import the theme (if not auto-registered)
+import { neonTheme } from '@flasher/flasher/themes';
+flasher.addTheme('neon', neonTheme);
+
+// Use the theme
+flasher.use('theme.neon').success('Your changes have been saved');
+flasher.use('theme.neon').error('There was a problem saving your changes');
+flasher.use('theme.neon').warning('This action cannot be undone');
+flasher.use('theme.neon').info('New features are available');
+
+// Set as default theme
+flasher.defaultPlugin = 'theme.neon';
+```
+
+## Customization
+
+The Neon theme uses CSS variables that can be customized to match your brand:
+
+```css
+:root {
+    /* Base appearance */
+    --neon-bg-light: rgba(255, 255, 255, 0.9);    /* Light mode background */
+    --neon-bg-dark: rgba(15, 23, 42, 0.9);        /* Dark mode background */
+    --neon-text-light: #334155;                   /* Light mode text */
+    --neon-text-dark: #f1f5f9;                    /* Dark mode text */
+    --neon-border-radius: 12px;                   /* Corner roundness */
+    
+    /* Glow colors */
+    --neon-success: #10b981;                      /* Success color */
+    --neon-info: #3b82f6;                         /* Info color */
+    --neon-warning: #f59e0b;                      /* Warning color */
+    --neon-error: #ef4444;                        /* Error color */
+    
+    /* Glow properties */
+    --neon-glow-strength: 10px;                   /* How far the glow extends */
+}
+```
+
+## Structure
+
+The Neon theme generates notifications with the following HTML structure:
+
+```html
+<div class="fl-neon fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
+    <div class="fl-content">
+        <div class="fl-message">Message text</div>
+        <button class="fl-close" aria-label="Close [type] message">×</button>
+    </div>
+    <div class="fl-progress-bar">
+        <div class="fl-progress"></div>
+    </div>
+</div>
+```
+
+The `fl-icon-box` element is created using CSS pseudo-elements rather than being part of the HTML structure.
+
+## Animation Details
+
+The Neon theme features two distinctive animations:
+
+### Entrance Animation
+
+```css
+@keyframes neonEntrance {
+    0% {
+        opacity: 0;
+        transform: translateY(-15px);
+        filter: blur(3px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+        filter: blur(0);
+    }
+}
+```
+
+This combined animation creates a refined entrance where notifications:
+1. Fade in from invisible to fully visible
+2. Move downward slightly from above
+3. Transition from a blurred state to sharp focus
+
+### Glow Animation
+
+```css
+@keyframes neonGlow {
+    0%, 100% {
+        filter: drop-shadow(0 0 var(--neon-glow-strength) currentColor);
+    }
+    50% {
+        filter: drop-shadow(0 0 calc(var(--neon-glow-strength) * 0.7) currentColor);
+    }
+}
+```
+
+This creates a subtle "breathing" effect where the glow gently pulses, becoming slightly dimmer in the middle of the animation cycle before returning to full brightness.
+
+## Floating Indicator Design
+
+The floating illuminated indicator is created using a combination of elements:
+
+1. **Container**: Positioned above the notification's top edge
+2. **Glow**: Applied using a filter drop-shadow with the type's color
+3. **Background**: Semi-transparent circle created with ::before pseudo-element
+4. **Center dot**: Solid-colored small dot created with ::after pseudo-element
+
+This layering creates the illusion of a floating, glowing dot that serves as a visual indicator of the notification type.
+
+## Frosted Glass Effect
+
+The theme uses a semi-transparent background combined with backdrop-filter to create a frosted glass effect:
+
+```css
+backdrop-filter: blur(10px);
+-webkit-backdrop-filter: blur(10px);
+```
+
+This creates a modern, sophisticated appearance where the notification appears to float above the page with a subtle blur applied to content behind it.
+
+## Typography
+
+The Neon theme prioritizes elegant typography:
+
+- Uses the Inter font (with fallbacks) for a clean, modern look
+- Medium font weight (500) for better readability without being too heavy
+- Comfortable line height (1.5) for easy scanning
+- Slightly larger than standard text size (15px) for better visibility
+
+## Dark Mode
+
+The dark mode implementation maintains the glowing aesthetic while adjusting for low-light environments:
+
+- Dark slate semi-transparent background
+- Light colored text for better contrast
+- Stronger shadow for better depth perception
+- Adjusted hover state for the close button
+
+The glowing colors remain consistent between light and dark modes to maintain brand color recognition.
+
+## Accessibility Features
+
+- **ARIA Roles**: Uses appropriate role="alert" for error/warning and role="status" for success/info
+- **ARIA Live Regions**: Uses aria-live="assertive" for critical messages and aria-live="polite" for non-critical messages
+- **Reduced Motion**: Respects prefers-reduced-motion media query and disables both entrance and glow animations
+- **Keyboard Access**: Close button is fully keyboard accessible with visual feedback
+- **Color Contrast**: Maintains sufficient contrast ratio between text and background
+- **Visual Indicators**: Uses both color and position to signal notification type
+
+## Browser Support
+
+The Neon theme is compatible with all modern browsers:
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Opera (latest)
+
+For browsers that don't support backdrop-filter (like Firefox), the theme gracefully degrades to using just the semi-transparent background without the blur effect.
+
+## Font Considerations
+
+For the best experience with the Neon theme, it's recommended to include the Inter font in your project:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
+```
+
+If Inter is not available, the theme falls back to the system font stack while maintaining its elegant aesthetic as much as possible.
@@ -0,0 +1,166 @@
+# PHPFlasher Onyx Theme
+
+## Overview
+
+The Onyx theme provides modern, floating notifications with a clean design and subtle accent elements. It features elegant shadows, colored corner dots indicating notification type, and smooth animations to create a sophisticated, contemporary appearance that integrates well with modern interfaces.
+
+![Onyx Theme Preview](./images/onyx-theme.png)
+
+## Features
+
+- **Floating Appearance**: Clean cards with elegant shadows for a floating effect
+- **Accent Dots**: Small colored dots in the corners indicate notification type
+- **Generous Rounded Corners**: Large border radius (1rem) for a contemporary look
+- **Smooth Animation**: Combined movement and blur transitions for refined entrance
+- **Minimal Design**: No large icons or visual elements to maintain focus on content
+- **Progress Indicator**: Colored bar showing time remaining
+- **Type-Specific Accents**: Each notification type has its own color scheme
+- **Dark Mode Support**: Enhanced dark appearance with adjusted shadows and colors
+- **RTL Support**: Full right-to-left language support with proper dot positioning
+
+## Usage
+
+```typescript
+// Import the theme (if not auto-registered)
+import { onyxTheme } from '@flasher/flasher/themes';
+flasher.addTheme('onyx', onyxTheme);
+
+// Use the theme
+flasher.use('theme.onyx').success('Your changes have been saved');
+flasher.use('theme.onyx').error('There was a problem saving your changes');
+flasher.use('theme.onyx').warning('This action cannot be undone');
+flasher.use('theme.onyx').info('New features are available');
+
+// Set as default theme
+flasher.defaultPlugin = 'theme.onyx';
+```
+
+## Customization
+
+The Onyx theme uses CSS variables that can be customized to match your brand:
+
+```css
+:root {
+    /* Base appearance */
+    --onyx-bg-light: #ffffff;                    /* Light mode background */
+    --onyx-bg-dark: #1e1e1e;                     /* Dark mode background */
+    --onyx-text-light: #333333;                  /* Light mode text */
+    --onyx-text-dark: #f5f5f5;                   /* Dark mode text */
+    --onyx-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); /* Light mode shadow */
+    --onyx-border-radius: 1rem;                  /* Corner roundness */
+    
+    /* Accent colors */
+    --onyx-success: #10b981;                     /* Success color */
+    --onyx-info: #3b82f6;                        /* Info color */
+    --onyx-warning: #f59e0b;                     /* Warning color */
+    --onyx-error: #ef4444;                       /* Error color */
+}
+```
+
+## Structure
+
+The Onyx theme generates notifications with the following HTML structure:
+
+```html
+<div class="fl-onyx fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
+    <div class="fl-content">
+        <div class="fl-text">
+            <div class="fl-message">Message text</div>
+        </div>
+        <button class="fl-close" aria-label="Close [type] message">×</button>
+    </div>
+    <div class="fl-progress-bar">
+        <div class="fl-progress"></div>
+    </div>
+</div>
+```
+
+The accent dots are created using CSS pseudo-elements (`::before` and `::after`) rather than being part of the HTML structure.
+
+## Animation Details
+
+The Onyx theme features a sophisticated entrance animation that combines multiple effects:
+
+```css
+@keyframes onyxIn {
+    0% {
+        opacity: 0;
+        transform: translateY(15px);
+        filter: blur(3px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+        filter: blur(0);
+    }
+}
+```
+
+This combined animation creates a refined appearance where notifications:
+1. Fade in from invisible to fully visible
+2. Move upward slightly from below their final position
+3. Transition from a blurred state to sharp focus
+
+The animation uses a carefully crafted easing curve (`cubic-bezier(0.16, 1, 0.3, 1)`) for a natural, refined movement.
+
+## Accent Dots Design
+
+One of the distinctive features of the Onyx theme is its use of subtle accent dots in the corners:
+
+1. **Top-left dot**: Positioned 10px from the top and left edges
+2. **Bottom-right dot**: Positioned 10px from the bottom and right edges
+3. **Small size**: Each dot is just 6px in diameter
+4. **Type-specific colors**: The dots match the color associated with the notification type
+
+These small visual elements provide a subtle but clear indication of the notification type without requiring large icons or colored backgrounds.
+
+## Typography
+
+The Onyx theme features clean, modern typography:
+
+- Regular weight (400) for a light, contemporary feel
+- Comfortable line height (1.5) for easy reading
+- Slight letter spacing (0.01rem) for improved legibility
+- Modest font size (0.925rem or approximately 14.8px at default size)
+
+## Dark Mode
+
+The dark mode implementation maintains the sophisticated aesthetic while adjusting for low-light environments:
+
+- Dark background (#1e1e1e)
+- Light text color (#f5f5f5)
+- Deeper shadow for enhanced depth perception
+- Adjusted hover state for the close button using white opacity
+
+The accent dot colors remain consistent between light and dark modes to maintain brand color recognition.
+
+## Accessibility Features
+
+- **ARIA Roles**: Uses appropriate role="alert" for error/warning and role="status" for success/info
+- **ARIA Live Regions**: Uses aria-live="assertive" for critical messages and aria-live="polite" for non-critical messages
+- **Reduced Motion**: Respects prefers-reduced-motion media query and disables entrance animation
+- **Keyboard Access**: Close button is fully keyboard accessible with visual feedback
+- **Color Indicators**: Uses colored dots to indicate type without relying solely on color for meaning
+- **Adequate Contrast**: Ensures good contrast between text and background in both light and dark modes
+
+## Design Philosophy
+
+The Onyx theme embodies several design principles:
+
+1. **Elegance**: Clean, sophisticated appearance with subtle details
+2. **Minimalism**: Only essential elements are included, with no icons or extraneous components
+3. **Focus**: The clean design keeps attention on the message content
+4. **Refinement**: Thoughtful attention to details like animation timing and corner dots 
+5. **Consistency**: Each notification type follows the same pattern with its own accent color
+
+## Browser Support
+
+The Onyx theme is compatible with all modern browsers:
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Opera (latest)
+
+No special polyfills or fallbacks are required as the theme uses standard CSS features that are well-supported across browsers.
@@ -0,0 +1,195 @@
+# PHPFlasher Ruby Theme
+
+## Overview
+
+The Ruby theme provides vibrant notifications with rich gradient backgrounds and a distinctive gemstone-like appearance. It features an elegant shine animation that mimics light reflecting off a precious stone, along with circular icon containers and smooth animations to create a premium, eye-catching visual experience.
+
+![Ruby Theme Preview](./images/ruby-theme.png)
+
+## Features
+
+- **Gradient Backgrounds**: Rich, vibrant gradients for each notification type
+- **Gemstone Shine Effect**: Animated light reflection that moves across notifications
+- **Circular Icon Container**: Translucent white circle housing the notification icon
+- **Scale Animation**: Smooth entrance with a subtle scale effect
+- **Enhanced Close Button**: Interactive button with scale and opacity effects
+- **Thick Progress Bar**: More prominent progress indicator than other themes
+- **High Contrast Text**: White text for excellent readability on colored backgrounds
+- **RTL Support**: Full right-to-left language support
+- **Reduced Motion Support**: Respectful fallbacks for users who prefer reduced motion
+
+## Usage
+
+```typescript
+// Import the theme (if not auto-registered)
+import { rubyTheme } from '@flasher/flasher/themes';
+flasher.addTheme('ruby', rubyTheme);
+
+// Use the theme
+flasher.use('theme.ruby').success('Your changes have been saved');
+flasher.use('theme.ruby').error('There was a problem saving your changes');
+flasher.use('theme.ruby').warning('This action cannot be undone');
+flasher.use('theme.ruby').info('New features are available');
+
+// Set as default theme
+flasher.defaultPlugin = 'theme.ruby';
+```
+
+## Customization
+
+The Ruby theme uses CSS variables that can be customized:
+
+```css
+:root {
+    /* Base appearance */
+    --ruby-text: #ffffff;                        /* Text color */
+    --ruby-border-radius: 1.125rem;              /* Corner roundness */
+    --ruby-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.2); /* Shadow depth */
+    
+    /* Type-specific gradients */
+    --ruby-success-gradient: linear-gradient(135deg, #059669 0%, #10b981 100%); /* Success */
+    --ruby-info-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);    /* Info */
+    --ruby-warning-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); /* Warning */
+    --ruby-error-gradient: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);   /* Error */
+}
+```
+
+## Structure
+
+The Ruby theme generates notifications with the following HTML structure:
+
+```html
+<div class="fl-ruby fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
+    <div class="fl-shine"></div>
+    <div class="fl-content">
+        <div class="fl-icon-circle">
+            <div class="fl-icon"></div>
+        </div>
+        <div class="fl-text">
+            <div class="fl-message">Message text</div>
+        </div>
+        <button class="fl-close" aria-label="Close [type] message">×</button>
+    </div>
+    <div class="fl-progress-bar">
+        <div class="fl-progress"></div>
+    </div>
+</div>
+```
+
+## Animation Details
+
+The Ruby theme features two distinctive animations:
+
+### Shine Animation
+
+```css
+@keyframes rubyShine {
+    0% {
+        left: -100%;
+        opacity: 0.6;
+    }
+    60% {
+        left: 100%;
+        opacity: 0.6;
+    }
+    100% {
+        left: 100%;
+        opacity: 0;
+    }
+}
+```
+
+This animation creates a moving highlight that travels across the notification from left to right, mimicking light reflecting off a gemstone surface. The effect:
+- Is angled with a skew transform
+- Uses a semi-transparent white gradient
+- Repeats every 6 seconds after an initial 1-second delay
+- Fades out at the end of each cycle
+
+### Entrance Animation
+
+```css
+@keyframes rubyIn {
+    0% {
+        opacity: 0;
+        transform: scale(0.96);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+```
+
+This animation creates a smooth appearance where notifications:
+- Fade in from invisible to fully visible
+- Scale up slightly from 96% to 100% of their final size
+
+The animation uses a custom easing curve (`cubic-bezier(0.21, 1.02, 0.73, 1)`) for a natural, premium feel.
+
+## Gradient Design
+
+The theme uses rich, vibrant gradients that flow from a deeper shade to a brighter one:
+
+- **Success**: Green gradient from #059669 to #10b981
+- **Info**: Blue gradient from #2563eb to #3b82f6
+- **Warning**: Amber gradient from #d97706 to #f59e0b
+- **Error**: Red gradient from #b91c1c to #ef4444
+
+All gradients are angled at 135 degrees, creating a consistent diagonal flow across all notification types.
+
+## Icon Container Design
+
+The circular icon container uses:
+- Semi-transparent white background (25% opacity)
+- Perfect circular shape (border-radius: 50%)
+- 36px diameter (2.25rem)
+- Centered icon with white color
+
+This creates a subtle but distinctive visual element that helps identify the notification type.
+
+## Progress Bar
+
+The Ruby theme features a more prominent progress bar:
+- 5px height (taller than most themes)
+- Semi-transparent black background (10% opacity)
+- Semi-transparent white progress indicator (40% opacity)
+- Positioned at the bottom edge of the notification
+
+## Close Button Design
+
+The close button has several interactive features:
+- Semi-transparent white background (20% opacity)
+- Perfect circular shape
+- Scale effect on hover (grows to 105% size)
+- Opacity change from 80% to 100% on hover
+- Background lightens to 30% opacity on hover
+
+## Accessibility Features
+
+- **ARIA Roles**: Uses appropriate role="alert" for error/warning and role="status" for success/info
+- **ARIA Live Regions**: Uses aria-live="assertive" for critical messages and aria-live="polite" for non-critical messages
+- **Reduced Motion**: Respects prefers-reduced-motion media query by disabling animations and shine effect
+- **Color Contrast**: White text (#ffffff) on colored backgrounds meets WCAG 2.1 AA contrast requirements
+- **Keyboard Access**: Close button is fully keyboard accessible with visual feedback
+- **RTL Support**: Complete right-to-left language support with appropriate directional adjustments
+
+## Design Philosophy
+
+The Ruby theme embodies a premium, attention-grabbing design philosophy:
+1. **Vibrance**: Rich, saturated colors that stand out
+2. **Movement**: Dynamic shine animation that draws the eye
+3. **Depth**: Shadows and translucent elements create a layered appearance
+4. **Polish**: Refined animations and hover states reflect a premium quality
+5. **Legibility**: Despite the colorful backgrounds, text remains highly readable
+
+## Browser Support
+
+The Ruby theme is compatible with all modern browsers:
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Opera (latest)
+
+The gradient backgrounds and animations are well-supported across modern browsers, requiring no special fallbacks.
@@ -0,0 +1,178 @@
+# PHPFlasher Sapphire Theme
+
+## Overview
+
+The Sapphire theme provides modern, glassmorphic notifications with a blurred backdrop effect. It features a clean, minimal design that emphasizes simplicity and contemporary aesthetics, with semi-transparent colored backgrounds and subtle animations that create a sophisticated, unobtrusive appearance.
+
+![Sapphire Theme Preview](./images/sapphire-theme.png)
+
+## Features
+
+- **Glassmorphic Design**: Semi-transparent backgrounds with backdrop blur effect
+- **Minimal Interface**: Clean design without icons or close buttons
+- **Bounce Animation**: Subtle entrance animation with a slight bounce effect
+- **Colored Backgrounds**: Type-specific colors with high transparency
+- **Progress Indicator**: Clean progress bar showing time remaining
+- **Modern Typography**: Uses Roboto font for a contemporary look
+- **Type-Based Colors**: Each notification type has its own colored background
+- **RTL Support**: Full right-to-left language support
+- **Reduced Motion Support**: Respects user preferences for reduced motion
+
+## Usage
+
+```typescript
+// Import the theme (if not auto-registered)
+import { sapphireTheme } from '@flasher/flasher/themes';
+flasher.addTheme('sapphire', sapphireTheme);
+
+// Use the theme
+flasher.use('theme.sapphire').success('Your changes have been saved');
+flasher.use('theme.sapphire').error('There was a problem saving your changes');
+flasher.use('theme.sapphire').warning('This action cannot be undone');
+flasher.use('theme.sapphire').info('New features are available');
+
+// Set as default theme
+flasher.defaultPlugin = 'theme.sapphire';
+```
+
+## Customization
+
+The Sapphire theme uses CSS variables that can be customized:
+
+```css
+:root {
+    /* Base appearance */
+    --sapphire-bg-base: rgba(30, 30, 30, 0.9);    /* Base background color */
+    --sapphire-text: #f0f0f0;                     /* Text color */
+    --sapphire-shadow: rgba(0, 0, 0, 0.15);       /* Shadow color */
+    
+    /* Progress bar colors */
+    --sapphire-progress-bg: rgba(255, 255, 255, 0.2);  /* Progress background */
+    --sapphire-progress-fill: rgba(255, 255, 255, 0.9); /* Progress fill */
+    
+    /* Notification type colors */
+    --sapphire-success: rgba(16, 185, 129, 0.95); /* Success color */
+    --sapphire-error: rgba(239, 68, 68, 0.95);    /* Error color */
+    --sapphire-warning: rgba(245, 158, 11, 0.95); /* Warning color */
+    --sapphire-info: rgba(59, 130, 246, 0.95);    /* Info color */
+}
+```
+
+## Structure
+
+The Sapphire theme generates notifications with the following HTML structure:
+
+```html
+<div class="fl-sapphire fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
+    <div class="fl-content">
+        <span class="fl-message">Message text</span>
+    </div>
+    <div class="fl-progress-bar">
+        <div class="fl-progress"></div>
+    </div>
+</div>
+```
+
+Note that unlike most themes, Sapphire intentionally omits a close button and icons for a more streamlined appearance.
+
+## Animation Details
+
+The Sapphire theme features a distinctive bounce animation for a more dynamic entrance:
+
+```css
+@keyframes sapphireIn {
+    0% {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    60% {
+        transform: translateY(-3px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+```
+
+This animation creates a refined entrance where notifications:
+1. Fade in from invisible to fully visible
+2. Move upward from below their final position
+3. Slightly overshoot their target position before settling (bounce effect)
+
+The animation uses a carefully tuned easing curve (`cubic-bezier(0.25, 0.46, 0.45, 0.94)`) that enhances the natural feel of the motion.
+
+## Glassmorphic Design
+
+The Sapphire theme implements the popular glassmorphism design trend:
+
+```css
+backdrop-filter: blur(12px);
+-webkit-backdrop-filter: blur(12px);
+```
+
+This creates a frosted glass effect where:
+- The notification background is semi-transparent
+- Content behind the notification appears blurred
+- The effect creates depth and visual interest
+- The notification feels like it's floating above the content
+
+## Minimalist Approach
+
+Unlike many notification themes, Sapphire takes a distinctly minimalist approach:
+
+- No close button (notifications auto-dismiss)
+- No icons or visual indicators beyond color
+- Clean typography with minimal styling
+- Focus purely on the message content
+- Subtle progress indicator
+
+This approach reduces visual noise and creates a more elegant, unobtrusive notification experience.
+
+## Color System
+
+The Sapphire theme uses a sophisticated color system:
+
+- High transparency backgrounds (95% opacity)
+- Type-specific colors that maintain a consistent visual language
+- Light text (#f0f0f0) for excellent contrast on all background colors
+- Semi-transparent progress indicator that works across all notification types
+
+## Typography
+
+The theme prioritizes clean, modern typography:
+
+- Prefers the Roboto font for a contemporary look
+- Comfortable line height (1.4) for easy reading
+- Slightly smaller than standard text size (0.925em)
+- Consistent text color across all notification types
+
+## Accessibility Features
+
+- **ARIA Roles**: Uses appropriate role="alert" for error/warning and role="status" for success/info
+- **ARIA Live Regions**: Uses aria-live="assertive" for critical messages and aria-live="polite" for non-critical messages
+- **Reduced Motion**: Respects prefers-reduced-motion media query and disables animations
+- **Color Contrast**: Ensures good contrast between text and all background colors
+- **RTL Support**: Complete right-to-left language support
+
+## Browser Support
+
+The Sapphire theme is compatible with all modern browsers:
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Opera (latest)
+
+For browsers that don't support backdrop-filter (like older Firefox versions), the theme gracefully degrades to using just the semi-transparent background without the blur effect.
+
+## Font Considerations
+
+For the best experience with the Sapphire theme, it's recommended to include the Roboto font in your project:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+```
+
+If Roboto is not available, the theme falls back to the system font stack while maintaining its clean aesthetic.
@@ -0,0 +1,173 @@
+# PHPFlasher Slack Theme
+
+## Overview
+
+The Slack theme provides notifications styled after Slack's familiar messaging interface. It features message bubbles with colored avatars, clean typography, and interactive hover effects that closely resemble the appearance and behavior of messages in the popular workplace communication platform.
+
+![Slack Theme Preview](./images/slack-theme.png)
+
+## Features
+
+- **Message Bubbles**: Clean, bordered containers resembling Slack messages
+- **Colored Avatars**: Type-specific colored icon containers (green, blue, orange, red)
+- **Slack Typography**: Font styles matching Slack's clean text appearance
+- **Hover Interactions**: Background change and button reveal on hover
+- **Close Button**: SVG "X" icon that appears when hovering over messages
+- **Quick Animation**: Fast fade-in animation for a responsive feel
+- **Dark Mode Support**: Dark theme matching Slack's dark mode appearance
+- **RTL Support**: Full right-to-left language support
+
+## Usage
+
+```typescript
+// Import the theme (if not auto-registered)
+import { slackTheme } from '@flasher/flasher/themes';
+flasher.addTheme('slack', slackTheme);
+
+// Use the theme
+flasher.use('theme.slack').success('Your file was uploaded successfully');
+flasher.use('theme.slack').error('Unable to connect to the server');
+flasher.use('theme.slack').warning('Your session will expire soon');
+flasher.use('theme.slack').info('New comments on your post');
+
+// Set as default theme
+flasher.defaultPlugin = 'theme.slack';
+```
+
+## Customization
+
+The Slack theme uses CSS variables that can be customized to match your brand while maintaining the Slack-like appearance:
+
+```css
+: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-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 */
+}
+```
+
+## Structure
+
+The Slack theme generates notifications with the following HTML structure:
+
+```html
+<div class="fl-slack fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
+    <div class="fl-slack-message">
+        <div class="fl-avatar">
+            <div class="fl-type-icon fl-[type]-icon">[Symbol]</div>
+        </div>
+        <div class="fl-message-content">
+            <div class="fl-message-text">Message text</div>
+        </div>
+        <div class="fl-actions">
+            <button class="fl-close" aria-label="Close [type] message">
+                <svg><!-- Close icon --></svg>
+            </button>
+        </div>
+    </div>
+</div>
+```
+
+## Design Details
+
+### Message Bubble
+
+The main container follows Slack's message styling:
+- White background (#ffffff) in light mode
+- Dark background (#1a1d21) in dark mode
+- Subtle border (1px solid #e0e0e0)
+- Slight bottom shadow for depth (0 1px 0 rgba(0, 0, 0, 0.1))
+- Subtle hover state (#f8f8f8)
+- 4px border radius
+
+### Avatar Design
+
+Each notification type has a colored square avatar:
+- Success: Green (#2bac76) with ✓ symbol
+- Error: Pink/Red (#e01e5a) with ✕ symbol
+- Warning: Orange (#e8912d) with ! symbol
+- Info: Blue (#1264a3) with i symbol
+
+The avatars are 36px × 36px squares with slightly rounded corners (4px border radius).
+
+### Typography
+
+The theme uses Slack's typography style:
+- Font family: Lato, Slack-Lato, Helvetica Neue, Helvetica, sans-serif
+- Font size: 15px for message text
+- Line height: 1.46668 (Slack's specific line height)
+- Text color: Near black (#1d1c1d) in light mode, off-white (#e0e0e0) in dark mode
+
+### Animation
+
+The theme uses a simple, quick fade-in animation:
+- Duration: 150ms (matches Slack's quick, responsive feel)
+- Timing function: ease-out
+- Effect: Simple opacity change from 0 to 1
+
+### Interactive Elements
+
+The close button appears on hover:
+- Initially hidden (opacity: 0, visibility: hidden)
+- Fades in when hovering over the message
+- Uses Slack's "X" SVG icon
+- Changes color on hover (from #616061 to #1d1c1d)
+- Has a subtle background on hover (#f8f8f8)
+
+## Dark Mode
+
+The dark mode implementation closely matches Slack's dark theme:
+- Background: #1a1d21 (Slack's dark mode color)
+- Text: #e0e0e0 (light gray)
+- Border: #393a3e (dark gray)
+- Hover background: #222529 (slightly lighter than the background)
+
+The avatar colors remain consistent between light and dark modes to maintain clear visual indicators.
+
+## Accessibility Features
+
+- **ARIA Roles**: Uses appropriate role="alert" for error/warning and role="status" for success/info
+- **ARIA Live Regions**: Uses aria-live="assertive" for critical messages and aria-live="polite" for non-critical messages
+- **Reduced Motion**: Respects prefers-reduced-motion media query and disables animations
+- **Keyboard Access**: Close button is fully keyboard accessible
+- **Color Indicators**: Each notification type has its own color, but also includes a symbol
+- **Text Contrast**: Maintains good contrast ratios in both light and dark modes
+
+## RTL Support
+
+The theme includes comprehensive right-to-left language support:
+- Swaps all directional padding and margins
+- Moves the avatar to the right side
+- Moves the close button to the left side
+- Properly aligns text for RTL languages
+
+## Font Considerations
+
+For the best experience with the Slack theme, it's recommended to include the Lato font in your project:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
+```
+
+If Lato is not available, the theme falls back to Helvetica Neue or Helvetica, which provide a similar clean appearance.
+
+## Browser Support
+
+The Slack theme is compatible with all modern browsers:
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Opera (latest)
+
+The theme uses standard CSS features that are well-supported across browsers, ensuring a consistent experience for all users.