add themes to the docs

2026-03-31 15:07:47 +01:00 · 2025-03-10 00:54:37 +00:00
parent a43cbd21ce
commit 88ae4cfc4c
59 changed files with 3231 additions and 1101 deletions
@@ -1,21 +1,21 @@
 {
-  "dist/main.css": "/dist/main.5346e699.css",
-  "dist/main.js": "/dist/main.4815a4d0.js",
+  "dist/main.css": "/dist/main.e2741770.css",
+  "dist/main.js": "/dist/main.855339d4.js",
  "dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
-  "dist/455.095e6545.js": "/dist/455.095e6545.js",
+  "dist/455.17bc016b.js": "/dist/455.17bc016b.js",
  "dist/411.29cd993e.css": "/dist/411.29cd993e.css",
-  "dist/411.277b21bc.js": "/dist/411.277b21bc.js",
+  "dist/411.42e6794f.js": "/dist/411.42e6794f.js",
  "dist/641.c0be7378.css": "/dist/641.c0be7378.css",
-  "dist/641.a938263c.js": "/dist/641.a938263c.js",
+  "dist/641.f8750364.js": "/dist/641.f8750364.js",
  "dist/160.554a2dcd.css": "/dist/160.554a2dcd.css",
-  "dist/160.22e7905c.js": "/dist/160.22e7905c.js",
-  "dist/265.52505228.js": "/dist/265.52505228.js",
+  "dist/160.264e6e64.js": "/dist/160.264e6e64.js",
+  "dist/265.396597b6.js": "/dist/265.396597b6.js",
  "dist/371.9523a7ff.css": "/dist/371.9523a7ff.css",
-  "dist/371.f9d2cf4e.js": "/dist/371.f9d2cf4e.js",
+  "dist/371.324a7072.js": "/dist/371.324a7072.js",
  "dist/735.11112420.css": "/dist/735.11112420.css",
-  "dist/735.5b8d44b1.js": "/dist/735.5b8d44b1.js",
+  "dist/735.3cd4e509.js": "/dist/735.3cd4e509.js",
  "dist/243.699ba66f.css": "/dist/243.699ba66f.css",
  "dist/243.991d9535.js": "/dist/243.991d9535.js",
  "dist/107.6a2ea759.css": "/dist/107.6a2ea759.css",
-  "dist/107.090fb6e1.js": "/dist/107.090fb6e1.js"
+  "dist/107.12087179.js": "/dist/107.12087179.js"
 }
@@ -5,8 +5,26 @@
    <i class="fa-duotone fa-ghost fa-lg text-pink-800 mr-1"></i> Livewire: '/livewire/'
    <i class="fa-duotone fa-angles-right fa-lg text-indigo-900 mr-1"></i> Inertia: '/inertia/'

-<i class="fa-duotone fa-plug"></i> libraries:
+<i class="fa-duotone fa-plug"></i> 3rd Party:
    <i class="fa-duotone fa-bell text-indigo-900 mr-1 fa-lg"></i> Noty: '/library/noty/'
    <i class="fa-duotone fa-info-circle text-indigo-900 mr-1 fa-lg"></i> Notyf: '/library/notyf/'
    <i class="fa-duotone fa-exclamation-circle text-indigo-900 mr-1 fa-lg"></i> Sweetalert: '/library/sweetalert/'
    <i class="fa-duotone fa-bread-loaf text-indigo-900 mr-1 fa-lg"></i> Toastr: '/library/toastr/'
+
+<i class="fa-duotone fa-palette"></i> Themes <i class="fa-duotone fa-clock-rotate-left text-gray-500" title="Coming soon"></i> <span class="text-xs bg-red-500 text-white px-2 py-0.5 rounded-full font-medium ml-1">soon</span>:
+    <i class="fa-duotone fa-circle-minus text-indigo-900 mr-1 fa-lg"></i> Minimal: '/theme/minimal/'
+    <i class="fa-duotone fa-sun text-yellow-600 mr-1 fa-lg"></i> Amber: '/theme/amber/'
+    <i class="fa-duotone fa-diamond text-indigo-900 mr-1 fa-lg"></i> Crystal: '/theme/crystal/'
+    <i class="fa-duotone fa-lightbulb text-yellow-300 mr-1 fa-lg"></i> Neon: '/theme/neon/'
+    <i class="fa-duotone fa-gem text-purple-800 mr-1 fa-lg"></i> Onyx: '/theme/onyx/'
+    <i class="fa-duotone fa-gem text-green-500 mr-1 fa-lg"></i> Emerald: '/theme/emerald/'
+    <i class="fa-duotone fa-leaf text-green-600 mr-1 fa-lg"></i> Jade: '/theme/jade/'
+    <i class="fa-duotone fa-sparkles text-blue-400 mr-1 fa-lg"></i> Aurora: '/theme/aurora/'
+    <i class="fa-duotone fa-gem text-red-600 mr-1 fa-lg"></i> Ruby: '/theme/ruby/'
+    <i class="fa-duotone fa-gem text-blue-500 mr-1 fa-lg"></i> Sapphire: '/theme/sapphire/'
+    <i class="fa-duotone fa-layer-group text-indigo-900 mr-1 fa-lg"></i> Material: '/theme/material/'
+    <i class="fa-brands fa-google text-red-500 mr-1 fa-lg"></i> Google: '/theme/google/'
+    <i class="fa-duotone fa-shopping-bag text-indigo-900 mr-1 fa-lg"></i> Amazon: '/theme/amazon/'
+    <i class="fa-brands fa-facebook text-blue-600 mr-1 fa-lg"></i> Facebook: '/theme/facebook/'
+    <i class="fa-brands fa-apple text-gray-800 mr-1 fa-lg"></i> IOS: '/theme/ios/'
+    <i class="fa-brands fa-slack text-purple-500 mr-1 fa-lg"></i> Slack: '/theme/slack/'
@@ -1,9 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-import { ray } from 'node-ray/web'
-
-export default class extends Controller {
-    initialize() {
-        window.ray = ray
-    }
-}
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/amazon/amazon.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.amazon')
+    }
+}
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/amber/amber.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.amber')
+    }
+}
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/aurora/aurora.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.aurora')
+    }
+}
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/crystal/crystal.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.crystal')
+    }
+}
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/emerald/emerald.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.emerald')
+    }
+}
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/facebook/facebook.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.facebook')
+    }
+}
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/flasher/flasher.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.flasher')
+    }
+}
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/google/google.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.google')
+    }
+}
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/ios/ios.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.ios')
+    }
+}
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/jade/jade.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.jade')
+    }
+}
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/material/material.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.material')
+    }
+}
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/minimal/minimal.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.minimal')
+    }
+}
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/neon/neon.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.neon')
+    }
+}
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/onyx/onyx.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.onyx')
+    }
+}
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/ruby/ruby.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.ruby')
+    }
+}
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/sapphire/sapphire.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.sapphire')
+    }
+}
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/slack/slack.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.slack')
+    }
+}
@@ -8,6 +8,23 @@ import '@flasher/flasher-noty'
 import '@flasher/flasher-notyf'
 import '@flasher/flasher-sweetalert'

+import '@flasher/flasher/dist/themes/amazon/amazon'
+import '@flasher/flasher/dist/themes/amber/amber'
+import '@flasher/flasher/dist/themes/aurora/aurora'
+import '@flasher/flasher/dist/themes/crystal/crystal'
+import '@flasher/flasher/dist/themes/emerald/emerald'
+import '@flasher/flasher/dist/themes/facebook/facebook'
+import '@flasher/flasher/dist/themes/google/google'
+import '@flasher/flasher/dist/themes/ios/ios'
+import '@flasher/flasher/dist/themes/jade/jade'
+import '@flasher/flasher/dist/themes/material/material'
+import '@flasher/flasher/dist/themes/minimal/minimal'
+import '@flasher/flasher/dist/themes/neon/neon'
+import '@flasher/flasher/dist/themes/onyx/onyx'
+import '@flasher/flasher/dist/themes/ruby/ruby'
+import '@flasher/flasher/dist/themes/sapphire/sapphire'
+import '@flasher/flasher/dist/themes/slack/slack'
+
 window.flasher = flasher

 export default class extends Controller {
@@ -14,15 +14,31 @@ function showNotifications(notifications) {
 export function showNotificationsForHandler(handler, options = {}) {
    const factory = flasher.use(handler)

-    factory.info('Welcome back', 'Info', options)
+    // Handle theme-based handlers with different positions
+    const isThemeHandler = handler.startsWith('theme.')
+
+    // Define position-specific options for theme handlers
+    let infoOptions = { ...options }
+    let errorOptions = { ...options }
+    let warningOptions = { ...options }
+    let successOptions = { ...options }
+
+    if (isThemeHandler) {
+        infoOptions = { ...options, position: 'bottom-right' }
+        errorOptions = { ...options, position: 'bottom-right' }
+        warningOptions = { ...options, position: 'bottom-right' }
+        successOptions = { ...options, position: 'bottom-right' }
+    }
+
+    factory.info('Welcome back', 'Info', infoOptions)

    if (['sweetalert'].includes(handler)) {
        return
    }

    showNotifications([
-        () => factory.error('Oops! Something went wrong!', 'Error', options),
-        () => factory.warning('Are you sure you want to proceed ?', 'Warning', options),
-        () => factory.success('Data has been saved successfully!', 'Success', options),
+        () => factory.error('Oops! Something went wrong!', 'Error', errorOptions),
+        () => factory.warning('Are you sure you want to proceed?', 'Warning', warningOptions),
+        () => factory.success('Data has been saved successfully!', 'Success', successOptions),
    ])
 }
@@ -1 +1 @@
-"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs||[]).push([[371],{9371:function(s,e,c){c.r(e)}}]);
+"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs||[]).push([[107],{107:function(s,e,c){c.r(e)}}]);
@@ -1 +1 @@
-"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs||[]).push([[107],{9107:function(s,e,c){c.r(e)}}]);
+"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs||[]).push([[160],{779:function(s,e,c){c.r(e)}}]);
@@ -1 +1 @@
-"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs||[]).push([[160],{3160:function(s,e,c){c.r(e)}}]);
+"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs||[]).push([[265],{265:function(s,e,c){c.r(e)}}]);
@@ -1 +1 @@
-"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs||[]).push([[265],{6265:function(s,e,c){c.r(e)}}]);
+"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs||[]).push([[371],{371:function(s,e,c){c.r(e)}}]);
@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs||[]).push([[411],{9792:function(s,e,c){c.r(e)}}]);
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs||[]).push([[411],{792:function(s,e,c){c.r(e)}}]);
@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs||[]).push([[455],{3455:function(s,e,c){c.r(e)}}]);
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs||[]).push([[455],{455:function(s,e,c){c.r(e)}}]);
@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs||[]).push([[641],{2641:function(s,e,c){c.r(e)}}]);
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs||[]).push([[641],{641:function(s,e,c){c.r(e)}}]);
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs||[]).push([[735],{735:function(s,e,c){c.r(e)}}]);
@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs||[]).push([[735],{8735:function(s,e,c){c.r(e)}}]);
@@ -2,10 +2,10 @@
  "entrypoints": {
    "main": {
      "css": [
-        "/dist/main.5346e699.css"
+        "/dist/main.e2741770.css"
      ],
      "js": [
-        "/dist/main.4815a4d0.js"
+        "/dist/main.855339d4.js"
      ]
    }
  }
@@ -92,6 +92,7 @@ Choose your framework and follow our quick-start guide:

 ## <i class="fa-duotone fa-list-radio"></i> Quick Installation

+
 ```bash
 # Laravel
 composer require php-flasher/flasher-laravel
@@ -1,38 +1,154 @@
-# PHPFlasher Amazon Theme
+---
+permalink: /theme/amazon/
+title: Amazon Theme
+description: Transform your notifications with the Amazon-inspired theme for PHPFlasher. Create clean, minimal notifications that match Amazon's design language with built-in accessibility and dark mode support.
+handler: theme.amazon
+data-controller: theme-amazon
+---

-## Overview
+## <i class="fa-solid fa-store"></i> Amazon Theme

-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.
+The Amazon theme provides notification styling inspired by Amazon's e-commerce platform, featuring clean, minimal design with a focus on readability and accessibility.

-![Amazon Theme Preview](./images/amazon-theme.png)
+> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
+> New to PHPFlasher? Check the [installation guide](/installation/) first.

-## Features
+## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup

- **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
+The easiest way to use the Amazon theme is to set it as your **default theme**:

-## Usage
+### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
+
+```php
+<?php // config/flasher.php
+
+return [
+    'default' => 'theme.amazon',  // Make Amazon the default theme
+    
+    'themes' => [
+        'amazon' => [
+            'scripts' => [
+                '/vendor/flasher/themes/amazon.min.js',
+            ],
+            'styles' => [
+                '/vendor/flasher/themes/amazon.min.css',
+            ],
+        ],
+    ],
+];
+```
+
+### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
+
+```yaml
+# config/packages/flasher.yaml
+
+flasher:
+    default: theme.amazon  # Make Amazon the default theme
+    
+    themes:
+        amazon:
+            scripts:
+                - '/vendor/flasher/themes/amazon.min.js'
+            styles:
+                - '/vendor/flasher/themes/amazon.min.css'
+```
+
+### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript

 ```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';
+
+// Or use it for specific notifications
+flasher.success('Your order has been completed successfully');
 ```

-## Customization
+## <i class="fa-solid fa-palette"></i> Notification Types
+
+Once configured, use standard PHPFlasher methods to create notifications with Amazon styling:
+
+{% assign successMessage = 'Order #12345 has been confirmed.' %}
+{% assign errorMessage = 'Your payment was declined.' %}
+{% assign warningMessage = 'Your subscription will expire soon.' %}
+{% assign infoMessage = 'New products are available in your area.' %}
+
+<script type="text/javascript">
+    messages['#/ amazon types'] = [
+        {
+            handler: 'theme.amazon',
+            type: 'success',
+            message: '{{ successMessage }}',
+            options: { theme: 'amazon' },
+        },
+        {
+            handler: 'theme.amazon',
+            type: 'error',
+            message: '{{ errorMessage }}',
+            options: { theme: 'amazon' },
+        },
+        {
+            handler: 'theme.amazon',
+            type: 'warning',
+            message: '{{ warningMessage }}',
+            options: { theme: 'amazon' },
+        },
+        {
+            handler: 'theme.amazon',
+            type: 'info',
+            message: '{{ infoMessage }}',
+            options: { theme: 'amazon' },
+        }
+    ];
+</script>
+
+### PHP
+
+```php
+#/ amazon types
+
+// With Amazon set as default theme
+flash()->success('{{ successMessage }}');
+flash()->error('{{ errorMessage }}');
+flash()->warning('{{ warningMessage }}');
+flash()->info('{{ infoMessage }}');
+```
+
+### JavaScript
+
+```javascript
+// With Amazon set as default theme
+flasher.success('{{ successMessage }}');
+flasher.error('{{ errorMessage }}');
+flasher.warning('{{ warningMessage }}');
+flasher.info('{{ infoMessage }}');
+```
+
+## <i class="fa-solid fa-brush"></i> Customization
+
+### Using Amazon Theme for Specific Notifications
+
+If Amazon isn't your default theme, you can use it for specific notifications:
+
+#### PHP
+
+```php
+flash()
+    ->use('theme.amazon')
+    ->success('This notification uses Amazon theme.');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('theme.amazon').success('This notification uses Amazon theme.');
+```
+
+### Custom Colors

 The Amazon theme uses CSS variables that can be customized to match your brand:

@@ -52,11 +168,23 @@ The Amazon theme uses CSS variables that can be customized to match your brand:
    --amazon-error-border: #ff8f8f;     /* Error border */
    --amazon-error-icon: #c40000;       /* Error icon color */
    
-    /* Dark mode colors are also available with -dark suffix */
+    /* Dark mode colors */
+    --amazon-success-bg-dark: #0a3317;
+    --amazon-success-border-dark: #2a6e3f;
+    --amazon-success-icon-dark: #7fda95;
+    --amazon-info-bg-dark: #0a2940;
+    --amazon-info-border-dark: #2a5d6e;
+    --amazon-info-icon-dark: #7fb4da;
+    --amazon-warning-bg-dark: #3d2800;
+    --amazon-warning-border-dark: #6e5c2a;
+    --amazon-warning-icon-dark: #ffd996;
+    --amazon-error-bg-dark: #400a0a;
+    --amazon-error-border-dark: #6e2a2a;
+    --amazon-error-icon-dark: #ff8f8f;
 }
 ```

-## Structure
+## <i class="fa-solid fa-code"></i> HTML Structure

 The Amazon theme generates notifications with the following HTML structure:

@@ -81,16 +209,26 @@ The Amazon theme generates notifications with the following HTML structure:
 </div>
 ```

-## Accessibility Features
+This structure provides proper semantic markup and accessibility attributes for screen readers and assistive technologies.

- **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
+## <i class="fa-solid fa-lightbulb"></i> Theme Features
+
+### Dark Mode
+
+The Amazon theme automatically adapts to system dark mode preferences without additional configuration using the `prefers-color-scheme` media query.
+
+### Accessibility Features
+
+The Amazon theme includes several 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
+## <i class="fa-solid fa-browser"></i> Browser Support

 The Amazon theme is compatible with all modern browsers:

@@ -99,12 +237,16 @@ The Amazon theme is compatible with all modern browsers:
 - Safari (latest)
 - Edge (latest)
 - Opera (latest)
+- Mobile browsers on iOS and Android

-## Implementation Details
+## <i class="fa-solid fa-gears"></i> Implementation Details

-The Amazon theme uses native CSS features:
+The Amazon theme uses modern web technologies:

- **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
+- **CSS Variables**: For theme customization and dark mode support
+- **Flexbox Layout**: For responsive and flexible notification structure
+- **SVG Icons**: For resolution-independent, lightweight icons
+- **Media Queries**: For responsive design, dark mode, and reduced motion support
+- **ARIA Attributes**: For accessibility and screen reader support
+
+All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
@@ -1,39 +1,154 @@
-# PHPFlasher Amber Theme
+---
+permalink: /theme/amber/
+title: Amber Theme
+description: Transform your notifications with the elegant Amber theme for PHPFlasher. Featuring a modern, minimalist design with subtle animations and comprehensive dark mode support.
+handler: theme.amber
+data-controller: theme-amber
+---

-## Overview
+## <i class="fa-solid fa-sun"></i> Amber Theme

-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.
+The Amber theme offers a modern, elegant notification style with refined aesthetics that focuses on clean design and readability. It provides a minimalist approach while maintaining visual appeal with subtle animations and transitions.

-![Amber Theme Preview](./images/amber-theme.png)
+> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
+> New to PHPFlasher? Check the [installation guide](/installation/) first.

-## Features
+## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup

- **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
+The easiest way to use the Amber theme is to set it as your **default theme**:

-## Usage
+### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
+
+```php
+<?php // config/flasher.php
+
+return [
+    'default' => 'theme.amber',  // Make Amber the default theme
+    
+    'themes' => [
+        'amber' => [
+            'scripts' => [
+                '/vendor/flasher/themes/amber.min.js',
+            ],
+            'styles' => [
+                '/vendor/flasher/themes/amber.min.css',
+            ],
+        ],
+    ],
+];
+```
+
+### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
+
+```yaml
+# config/packages/flasher.yaml
+
+flasher:
+    default: theme.amber  # Make Amber the default theme
+    
+    themes:
+        amber:
+            scripts:
+                - '/vendor/flasher/themes/amber.min.js'
+            styles:
+                - '/vendor/flasher/themes/amber.min.css'
+```
+
+### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript

 ```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';
+
+// Or use it for specific notifications
+flasher.success('Your changes have been saved successfully');
 ```

-## Customization
+## <i class="fa-solid fa-palette"></i> Notification Types
+
+Once configured, use standard PHPFlasher methods to create notifications with Amber styling:
+
+{% assign successMessage = 'Your changes have been saved successfully.' %}
+{% assign errorMessage = 'An error occurred while saving your changes.' %}
+{% assign warningMessage = 'Your session will expire in 5 minutes.' %}
+{% assign infoMessage = 'New features have been added to your account.' %}
+
+<script type="text/javascript">
+    messages['#/ amber types'] = [
+        {
+            handler: 'theme.amber',
+            type: 'success',
+            message: '{{ successMessage }}',
+            options: { theme: 'amber' },
+        },
+        {
+            handler: 'theme.amber',
+            type: 'error',
+            message: '{{ errorMessage }}',
+            options: { theme: 'amber' },
+        },
+        {
+            handler: 'theme.amber',
+            type: 'warning',
+            message: '{{ warningMessage }}',
+            options: { theme: 'amber' },
+        },
+        {
+            handler: 'theme.amber',
+            type: 'info',
+            message: '{{ infoMessage }}',
+            options: { theme: 'amber' },
+        }
+    ];
+</script>
+
+### PHP
+
+```php
+#/ amber types
+
+// With Amber set as default theme
+flash()->success('{{ successMessage }}');
+flash()->error('{{ errorMessage }}');
+flash()->warning('{{ warningMessage }}');
+flash()->info('{{ infoMessage }}');
+```
+
+### JavaScript
+
+```javascript
+// With Amber set as default theme
+flasher.success('{{ successMessage }}');
+flasher.error('{{ errorMessage }}');
+flasher.warning('{{ warningMessage }}');
+flasher.info('{{ infoMessage }}');
+```
+
+## <i class="fa-solid fa-brush"></i> Customization
+
+### Using Amber Theme for Specific Notifications
+
+If Amber isn't your default theme, you can use it for specific notifications:
+
+#### PHP
+
+```php
+flash()
+    ->use('theme.amber')
+    ->success('This notification uses Amber theme.');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('theme.amber').success('This notification uses Amber theme.');
+```
+
+### Custom Colors

 The Amber theme uses CSS variables that can be customized to match your brand:

@@ -52,10 +167,13 @@ The Amber theme uses CSS variables that can be customized to match your brand:
    --amber-info: #3b82f6;              /* Info color */
    --amber-warning: #f59e0b;           /* Warning color */
    --amber-error: #ef4444;             /* Error color */
+    
+    /* Dark mode shadows */
+    --amber-shadow-dark: 0 5px 15px rgba(0, 0, 0, 0.25);
 }
 ```

-## Structure
+## <i class="fa-solid fa-code"></i> HTML Structure

 The Amber theme generates notifications with the following HTML structure:

@@ -74,27 +192,37 @@ The Amber theme generates notifications with the following HTML structure:
 </div>
 ```

-## Accessibility Features
+This structure includes a progress bar that shows the time remaining before the notification auto-dismisses.

- **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
+## <i class="fa-solid fa-lightbulb"></i> Theme Features
+
+### Dark Mode
+
+The Amber theme automatically adapts to system dark mode preferences without additional configuration using the `prefers-color-scheme` media query.
+
+### Accessibility Features
+
+The Amber theme includes several 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
+### Key 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
+4. **Progress Bar**: Visual indicator for auto-dismiss timing
 5. **Different Animation**: Uses a top-down entrance animation
-6. **Colored Close Button**: Close button is colored based on notification type
+6. **Colored Close Button**: Close button color matches notification type

-## Browser Support
+## <i class="fa-solid fa-browser"></i> Browser Support

 The Amber theme is compatible with all modern browsers:

@@ -103,13 +231,16 @@ The Amber theme is compatible with all modern browsers:
 - Safari (latest)
 - Edge (latest)
 - Opera (latest)
+- Mobile browsers on iOS and Android

-## Implementation Details
+## <i class="fa-solid fa-gears"></i> Implementation Details

-The Amber theme uses:
+The Amber theme uses modern web technologies:

- **CSS Variables**: For theme customization
- **Flexbox**: For layout structure
- **CSS Animations**: For entrance effects
- **Media Queries**: For responsive design and accessibility
+- **CSS Variables**: For theme customization and dark mode support
+- **Flexbox Layout**: For responsive and flexible notification structure
+- **CSS Animations**: For entrance effects and progress bar
+- **Media Queries**: For responsive design, dark mode, and reduced motion support
 - **Core Icons**: Uses the PHPFlasher core icon system
+
+All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
@@ -1,40 +1,154 @@
-# PHPFlasher Aurora Theme
+---
+permalink: /theme/aurora/
+title: Aurora Theme
+description: Add elegant glass-like notifications to your application with the Aurora theme for PHPFlasher. Featuring translucent backgrounds, subtle gradients, and modern backdrop blur effects.
+handler: theme.aurora
+data-controller: theme-aurora
+---

-## Overview
+## <i class="fa-solid fa-sparkles"></i> Aurora Theme

-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.
+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 glass morphism.

-![Aurora Theme Preview](./images/aurora-theme.png)
+> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
+> New to PHPFlasher? Check the [installation guide](/installation/) first.

-## Features
+## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup

- **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
+The easiest way to use the Aurora theme is to set it as your **default theme**:

-## Usage
+### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
+
+```php
+<?php // config/flasher.php
+
+return [
+    'default' => 'theme.aurora',  // Make Aurora the default theme
+    
+    'themes' => [
+        'aurora' => [
+            'scripts' => [
+                '/vendor/flasher/themes/aurora.min.js',
+            ],
+            'styles' => [
+                '/vendor/flasher/themes/aurora.min.css',
+            ],
+        ],
+    ],
+];
+```
+
+### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
+
+```yaml
+# config/packages/flasher.yaml
+
+flasher:
+    default: theme.aurora  # Make Aurora the default theme
+    
+    themes:
+        aurora:
+            scripts:
+                - '/vendor/flasher/themes/aurora.min.js'
+            styles:
+                - '/vendor/flasher/themes/aurora.min.css'
+```
+
+### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript

 ```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';
+
+// Or use it for specific notifications
+flasher.success('Your profile has been updated');
 ```

-## Customization
+## <i class="fa-solid fa-palette"></i> Notification Types
+
+Once configured, use standard PHPFlasher methods to create notifications with Aurora styling:
+
+{% assign successMessage = 'Your profile has been updated successfully.' %}
+{% assign errorMessage = 'Please check your connection and try again.' %}
+{% assign warningMessage = 'Your session will expire in 5 minutes.' %}
+{% assign infoMessage = 'New feature available in your dashboard.' %}
+
+<script type="text/javascript">
+    messages['#/ aurora types'] = [
+        {
+            handler: 'theme.aurora',
+            type: 'success',
+            message: '{{ successMessage }}',
+            options: { theme: 'aurora' },
+        },
+        {
+            handler: 'theme.aurora',
+            type: 'error',
+            message: '{{ errorMessage }}',
+            options: { theme: 'aurora' },
+        },
+        {
+            handler: 'theme.aurora',
+            type: 'warning',
+            message: '{{ warningMessage }}',
+            options: { theme: 'aurora' },
+        },
+        {
+            handler: 'theme.aurora',
+            type: 'info',
+            message: '{{ infoMessage }}',
+            options: { theme: 'aurora' },
+        }
+    ];
+</script>
+
+### PHP
+
+```php
+#/ aurora types
+
+// With Aurora set as default theme
+flash()->success('{{ successMessage }}');
+flash()->error('{{ errorMessage }}');
+flash()->warning('{{ warningMessage }}');
+flash()->info('{{ infoMessage }}');
+```
+
+### JavaScript
+
+```javascript
+// With Aurora set as default theme
+flasher.success('{{ successMessage }}');
+flasher.error('{{ errorMessage }}');
+flasher.warning('{{ warningMessage }}');
+flasher.info('{{ infoMessage }}');
+```
+
+## <i class="fa-solid fa-brush"></i> Customization
+
+### Using Aurora Theme for Specific Notifications
+
+If Aurora isn't your default theme, you can use it for specific notifications:
+
+#### PHP
+
+```php
+flash()
+    ->use('theme.aurora')
+    ->success('This notification uses Aurora theme.');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('theme.aurora').success('This notification uses Aurora theme.');
+```
+
+### Custom Colors and Appearance

 The Aurora theme uses CSS variables that can be customized to match your brand:

@@ -54,12 +168,15 @@ The Aurora theme uses CSS variables that can be customized to match your brand:
    --aurora-warning: #f59e0b;                     /* Warning color */
    --aurora-error: #ef4444;                       /* Error color */
    
-    /* Gradient colors can also be customized */
+    /* Gradient colors */
    --aurora-success-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.2) 100%);
+    --aurora-info-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.2) 100%);
+    --aurora-warning-gradient: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.2) 100%);
+    --aurora-error-gradient: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.2) 100%);
 }
 ```

-## Structure
+## <i class="fa-solid fa-code"></i> HTML Structure

 The Aurora theme generates notifications with the following HTML structure:

@@ -75,25 +192,29 @@ The Aurora theme generates notifications with the following HTML structure:
 </div>
 ```

-## Accessibility Features
+This minimalist structure focuses on content by omitting unnecessary UI elements while still maintaining a progress bar that shows the time remaining before auto-dismiss.

- **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
+## <i class="fa-solid fa-lightbulb"></i> Theme Features
+
+### Glass Morphism Effect
+
+The Aurora theme uses CSS `backdrop-filter` to create its signature glass effect, giving notifications a modern, translucent appearance with background blur.
+
+### Dark Mode
+
+The theme automatically adapts to system dark mode preferences without additional configuration, adjusting both the background transparency and text colors for optimal readability.
+
+### Accessibility Features
+
+The Aurora theme includes several 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
+- **Color Contrast**: Maintains proper contrast ratios 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:
@@ -104,15 +225,7 @@ The entrance animation combines three effects for a refined appearance:

 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
+## <i class="fa-solid fa-browser"></i> Browser Support

 The Aurora theme is compatible with all modern browsers that support CSS variables and backdrop filters:

@@ -121,5 +234,18 @@ The Aurora theme is compatible with all modern browsers that support CSS variabl
 - Safari 9+
 - Edge 17+
 - Opera 64+
+- Mobile browsers on iOS and Android

 For browsers that don't support backdrop filters, the theme gracefully degrades to using just the translucent background.
+
+## <i class="fa-solid fa-gears"></i> Implementation Details
+
+The Aurora theme uses modern web technologies:
+
+- **CSS Variables**: For theme customization and dark mode support
+- **Backdrop Filter**: For the frosted glass effect
+- **Gradient Overlays**: Using `::before` pseudo-elements for type-specific styling
+- **CSS Animations**: For smooth entrance effects and progress bar
+- **Media Queries**: For responsive design, dark mode, and reduced motion support
+
+All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
@@ -1,39 +1,154 @@
-# PHPFlasher Crystal Theme
+---
+permalink: /theme/crystal/
+title: Crystal Theme
+description: Enhance your notifications with the elegant Crystal theme for PHPFlasher. Featuring a clean, monochromatic design with colored text and subtle animation effects.
+handler: theme.crystal
+data-controller: theme-crystal
+---

-## Overview
+## <i class="fa-solid fa-diamond"></i> Crystal Theme

 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)
+> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
+> New to PHPFlasher? Check the [installation guide](/installation/) first.

-## Features
+## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup

- **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
+The easiest way to use the Crystal theme is to set it as your **default theme**:

-## Usage
+### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
+
+```php
+<?php // config/flasher.php
+
+return [
+    'default' => 'theme.crystal',  // Make Crystal the default theme
+    
+    'themes' => [
+        'crystal' => [
+            'scripts' => [
+                '/vendor/flasher/themes/crystal.min.js',
+            ],
+            'styles' => [
+                '/vendor/flasher/themes/crystal.min.css',
+            ],
+        ],
+    ],
+];
+```
+
+### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
+
+```yaml
+# config/packages/flasher.yaml
+
+flasher:
+    default: theme.crystal  # Make Crystal the default theme
+    
+    themes:
+        crystal:
+            scripts:
+                - '/vendor/flasher/themes/crystal.min.js'
+            styles:
+                - '/vendor/flasher/themes/crystal.min.css'
+```
+
+### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript

 ```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';
+
+// Or use it for specific notifications
+flasher.success('Document saved successfully');
 ```

-## Customization
+## <i class="fa-solid fa-palette"></i> Notification Types
+
+Once configured, use standard PHPFlasher methods to create notifications with Crystal styling:
+
+{% assign successMessage = 'Document saved successfully.' %}
+{% assign errorMessage = 'An error occurred while saving your document.' %}
+{% assign warningMessage = 'Your session will expire in 5 minutes.' %}
+{% assign infoMessage = 'New features have been added to the editor.' %}
+
+<script type="text/javascript">
+    messages['#/ crystal types'] = [
+        {
+            handler: 'theme.crystal',
+            type: 'success',
+            message: '{{ successMessage }}',
+            options: { theme: 'crystal' },
+        },
+        {
+            handler: 'theme.crystal',
+            type: 'error',
+            message: '{{ errorMessage }}',
+            options: { theme: 'crystal' },
+        },
+        {
+            handler: 'theme.crystal',
+            type: 'warning',
+            message: '{{ warningMessage }}',
+            options: { theme: 'crystal' },
+        },
+        {
+            handler: 'theme.crystal',
+            type: 'info',
+            message: '{{ infoMessage }}',
+            options: { theme: 'crystal' },
+        }
+    ];
+</script>
+
+### PHP
+
+```php
+#/ crystal types
+
+// With Crystal set as default theme
+flash()->success('{{ successMessage }}');
+flash()->error('{{ errorMessage }}');
+flash()->warning('{{ warningMessage }}');
+flash()->info('{{ infoMessage }}');
+```
+
+### JavaScript
+
+```javascript
+// With Crystal set as default theme
+flasher.success('{{ successMessage }}');
+flasher.error('{{ errorMessage }}');
+flasher.warning('{{ warningMessage }}');
+flasher.info('{{ infoMessage }}');
+```
+
+## <i class="fa-solid fa-brush"></i> Customization
+
+### Using Crystal Theme for Specific Notifications
+
+If Crystal isn't your default theme, you can use it for specific notifications:
+
+#### PHP
+
+```php
+flash()
+    ->use('theme.crystal')
+    ->success('This notification uses Crystal theme.');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('theme.crystal').success('This notification uses Crystal theme.');
+```
+
+### Custom Colors and Appearance

 The Crystal theme uses CSS variables that can be customized to match your brand:

@@ -55,7 +170,7 @@ The Crystal theme uses CSS variables that can be customized to match your brand:
 }
 ```

-## Structure
+## <i class="fa-solid fa-code"></i> HTML Structure

 The Crystal theme generates notifications with the following HTML structure:

@@ -73,7 +188,11 @@ The Crystal theme generates notifications with the following HTML structure:
 </div>
 ```

-## Animations
+This minimalist structure focuses on content with a clean design, while still maintaining a progress bar that shows the time remaining before auto-dismiss.
+
+## <i class="fa-solid fa-lightbulb"></i> Theme Features
+
+### Elegant Animations

 The Crystal theme features two distinct animations:

@@ -82,22 +201,26 @@ The Crystal theme features two distinct animations:

 The hover animation is disabled in dark mode and for users who prefer reduced motion, replaced with a static enhanced shadow effect.

-## Accessibility Features
+### Dark Mode

- **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
+The theme automatically adapts to system dark mode preferences without additional configuration, adjusting both the background and text colors for optimal readability.
+
+### 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.
+
+### Accessibility Features
+
+The Crystal theme includes several 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
+## <i class="fa-solid fa-browser"></i> Browser Support

 The Crystal theme is compatible with all modern browsers:

@@ -106,11 +229,17 @@ The Crystal theme is compatible with all modern browsers:
 - Safari (latest)
 - Edge (latest)
 - Opera (latest)
+- Mobile browsers on iOS and Android

-## Implementation Notes
+## <i class="fa-solid fa-gears"></i> Implementation Details

- 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
+The Crystal theme uses modern web technologies:
+
+- **CSS Variables**: For theme customization and dark mode support
+- **CSS Transitions**: For smooth hover effects
+- **Keyframe Animations**: For entrance and pulsing shadow effects
+- **Absolute Positioning**: For consistent close button layout
+- **Progress Bar**: Shows countdown until notification dismissal
+- **Media Queries**: For responsive design, dark mode, and reduced motion support
+
+All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
@@ -1,40 +1,154 @@
-# PHPFlasher Emerald Theme
+---
+permalink: /theme/emerald/
+title: Emerald Theme
+description: Enhance your notifications with the elegant Emerald theme for PHPFlasher. Featuring a glass-like appearance with bounce animation and minimalist design for a modern, polished user experience.
+handler: theme.emerald
+data-controller: theme-emerald
+---

-## Overview
+## <i class="fa-solid fa-gem"></i> Emerald Theme

 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)
+> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
+> New to PHPFlasher? Check the [installation guide](/installation/) first.

-## Features
+## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup

- **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
+The easiest way to use the Emerald theme is to set it as your **default theme**:

-## Usage
+### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
+
+```php
+<?php // config/flasher.php
+
+return [
+    'default' => 'theme.emerald',  // Make Emerald the default theme
+    
+    'themes' => [
+        'emerald' => [
+            'scripts' => [
+                '/vendor/flasher/themes/emerald.min.js',
+            ],
+            'styles' => [
+                '/vendor/flasher/themes/emerald.min.css',
+            ],
+        ],
+    ],
+];
+```
+
+### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
+
+```yaml
+# config/packages/flasher.yaml
+
+flasher:
+    default: theme.emerald  # Make Emerald the default theme
+    
+    themes:
+        emerald:
+            scripts:
+                - '/vendor/flasher/themes/emerald.min.js'
+            styles:
+                - '/vendor/flasher/themes/emerald.min.css'
+```
+
+### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript

 ```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';
+
+// Or use it for specific notifications
+flasher.success('Your changes have been saved');
 ```

-## Customization
+## <i class="fa-solid fa-palette"></i> Notification Types
+
+Once configured, use standard PHPFlasher methods to create notifications with Emerald styling:
+
+{% assign successMessage = 'Your changes have been saved successfully.' %}
+{% assign errorMessage = 'An error occurred while saving your changes.' %}
+{% assign warningMessage = 'Your session will expire soon.' %}
+{% assign infoMessage = 'New features have been added to your dashboard.' %}
+
+<script type="text/javascript">
+    messages['#/ emerald types'] = [
+        {
+            handler: 'theme.emerald',
+            type: 'success',
+            message: '{{ successMessage }}',
+            options: { theme: 'emerald' },
+        },
+        {
+            handler: 'theme.emerald',
+            type: 'error',
+            message: '{{ errorMessage }}',
+            options: { theme: 'emerald' },
+        },
+        {
+            handler: 'theme.emerald',
+            type: 'warning',
+            message: '{{ warningMessage }}',
+            options: { theme: 'emerald' },
+        },
+        {
+            handler: 'theme.emerald',
+            type: 'info',
+            message: '{{ infoMessage }}',
+            options: { theme: 'emerald' },
+        }
+    ];
+</script>
+
+### PHP
+
+```php
+#/ emerald types
+
+// With Emerald set as default theme
+flash()->success('{{ successMessage }}');
+flash()->error('{{ errorMessage }}');
+flash()->warning('{{ warningMessage }}');
+flash()->info('{{ infoMessage }}');
+```
+
+### JavaScript
+
+```javascript
+// With Emerald set as default theme
+flasher.success('{{ successMessage }}');
+flasher.error('{{ errorMessage }}');
+flasher.warning('{{ warningMessage }}');
+flasher.info('{{ infoMessage }}');
+```
+
+## <i class="fa-solid fa-brush"></i> Customization
+
+### Using Emerald Theme for Specific Notifications
+
+If Emerald isn't your default theme, you can use it for specific notifications:
+
+#### PHP
+
+```php
+flash()
+    ->use('theme.emerald')
+    ->success('This notification uses Emerald theme.');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('theme.emerald').success('This notification uses Emerald theme.');
+```
+
+### Custom Colors and Appearance

 The Emerald theme uses CSS variables that can be customized to match your brand:

@@ -56,7 +170,7 @@ The Emerald theme uses CSS variables that can be customized to match your brand:
 }
 ```

-## Structure
+## <i class="fa-solid fa-code"></i> HTML Structure

 The Emerald theme generates notifications with the following HTML structure:

@@ -69,9 +183,13 @@ The Emerald theme generates notifications with the following HTML structure:
 </div>
 ```

-## Animation
+This minimalist structure focuses on content by omitting unnecessary UI elements for a cleaner, more elegant look.

-The Emerald theme features a distinctive bounce animation that works as follows:
+## <i class="fa-solid fa-lightbulb"></i> Theme Features
+
+### Distinctive Animation
+
+The Emerald theme features a unique 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
@@ -79,7 +197,15 @@ The Emerald theme features a distinctive bounce animation that works as follows:

 This creates a playful yet elegant "bounce" effect that draws attention without being too disruptive.

-## Design Philosophy
+### Glass Morphism Effect
+
+The theme uses CSS `backdrop-filter` to create a frosted glass effect, giving notifications a modern, translucent appearance with background blur.
+
+### Dark Mode
+
+The theme automatically adapts to system dark mode preferences without additional configuration, adjusting both the background transparency and text colors for optimal readability.
+
+### Design Philosophy

 The Emerald theme is named after its polished, refined appearance that gives notifications a gem-like quality. Its design principles include:

@@ -89,30 +215,18 @@ The Emerald theme is named after its polished, refined appearance that gives not
 - **Modernity**: Contemporary typography and glass-like effects
 - **Focus**: Clear emphasis on the message content

-## Accessibility Features
+### 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
+The Emerald theme includes several 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
+## <i class="fa-solid fa-browser"></i> Browser Support

 The Emerald theme is compatible with all modern browsers:

@@ -121,5 +235,19 @@ The Emerald theme is compatible with all modern browsers:
 - Safari 9+
 - Edge 79+
 - Opera 63+
+- Mobile browsers on iOS and Android

 For browsers that don't support backdrop-filter, the theme gracefully degrades to a translucent background without blur.
+
+## <i class="fa-solid fa-gears"></i> Implementation Details
+
+The Emerald theme uses modern web technologies:
+
+- **CSS Variables**: For theme customization and dark mode support
+- **Backdrop Filter**: For the frosted glass effect
+- **CSS Animations**: For the distinctive bounce entrance effect
+- **Inter Font**: Optimized for clean, modern typography (with system font fallback)
+- **Box Shadows**: For subtle depth and dimension
+- **Media Queries**: For responsive design, dark mode, and reduced motion support
+
+All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
@@ -1,46 +1,177 @@
-# PHPFlasher Facebook Theme
+---
+permalink: /theme/facebook/
+title: Facebook Theme
+description: Add Facebook-style notifications to your application with the Facebook theme for PHPFlasher. Featuring familiar notification cards, circular icons, and Facebook's signature design elements.
+handler: theme.facebook
+data-controller: theme-facebook
+---

-## Overview
+## <i class="fa-brands fa-facebook"></i> Facebook Theme

 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)
+> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
+> New to PHPFlasher? Check the [installation guide](/installation/) first.

-## Features
+## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup

- **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
+The easiest way to use the Facebook theme is to set it as your **default theme**:

-## Usage
+### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
+
+```php
+<?php // config/flasher.php
+
+return [
+    'default' => 'theme.facebook',  // Make Facebook the default theme
+    
+    'themes' => [
+        'facebook' => [
+            'scripts' => [
+                '/vendor/flasher/themes/facebook.min.js',
+            ],
+            'styles' => [
+                '/vendor/flasher/themes/facebook.min.css',
+            ],
+        ],
+    ],
+];
+```
+
+### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
+
+```yaml
+# config/packages/flasher.yaml
+
+flasher:
+    default: theme.facebook  # Make Facebook the default theme
+    
+    themes:
+        facebook:
+            scripts:
+                - '/vendor/flasher/themes/facebook.min.js'
+            styles:
+                - '/vendor/flasher/themes/facebook.min.css'
+```
+
+### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript

 ```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'
-});
+// Or use it for specific notifications
+flasher.success('Your post was published successfully');
 ```

-## Customization
+## <i class="fa-solid fa-palette"></i> Notification Types

-The Facebook theme uses CSS variables that can be customized:
+Once configured, use standard PHPFlasher methods to create notifications with Facebook styling:
+
+{% assign successMessage = 'Your post was published successfully.' %}
+{% assign errorMessage = 'There was a problem uploading your photo.' %}
+{% assign warningMessage = 'Your account is approaching storage limits.' %}
+{% assign infoMessage = '3 people reacted to your comment.' %}
+
+<script type="text/javascript">
+    messages['#/ facebook types'] = [
+        {
+            handler: 'theme.facebook',
+            type: 'success',
+            message: '{{ successMessage }}',
+            options: { theme: 'facebook' },
+        },
+        {
+            handler: 'theme.facebook',
+            type: 'error',
+            message: '{{ errorMessage }}',
+            options: { theme: 'facebook' },
+        },
+        {
+            handler: 'theme.facebook',
+            type: 'warning',
+            message: '{{ warningMessage }}',
+            options: { theme: 'facebook' },
+        },
+        {
+            handler: 'theme.facebook',
+            type: 'info',
+            message: '{{ infoMessage }}',
+            options: { theme: 'facebook' },
+        }
+    ];
+</script>
+
+### PHP
+
+```php
+#/ facebook types
+
+// With Facebook set as default theme
+flash()->success('{{ successMessage }}');
+flash()->error('{{ errorMessage }}');
+flash()->warning('{{ warningMessage }}');
+flash()->info('{{ infoMessage }}');
+```
+
+### JavaScript
+
+```javascript
+// With Facebook set as default theme
+flasher.success('{{ successMessage }}');
+flasher.error('{{ errorMessage }}');
+flasher.warning('{{ warningMessage }}');
+flasher.info('{{ infoMessage }}');
+```
+
+## <i class="fa-solid fa-brush"></i> Customization
+
+### Using Facebook Theme for Specific Notifications
+
+If Facebook isn't your default theme, you can use it for specific notifications:
+
+#### PHP
+
+```php
+flash()
+    ->use('theme.facebook')
+    ->success('This notification uses Facebook theme.');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('theme.facebook').success('This notification uses Facebook theme.');
+```
+
+### Adding a Timestamp
+
+You can add a timestamp to your Facebook-style notification:
+
+#### PHP
+
+```php
+flash()
+    ->use('theme.facebook')
+    ->success('Your post was published successfully.');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('theme.facebook')
+    .success('Your post was published successfully');
+```
+
+If no timestamp is provided, the current time will be used automatically.
+
+### Custom Colors and Appearance
+
+The Facebook theme uses CSS variables that can be customized to match your brand:

 ```css
 :root {
@@ -49,7 +180,10 @@ The Facebook theme uses CSS variables that can be customized:
    --fb-bg-dark: #242526;                   /* Dark mode background */
    --fb-text-light: #050505;                /* Light mode primary text */
    --fb-text-secondary-light: #65676b;      /* Light mode secondary text */
+    --fb-text-dark: #e4e6eb;                 /* Dark mode primary text */
+    --fb-text-secondary-dark: #b0b3b8;       /* Dark mode secondary text */
    --fb-hover-light: #f0f2f5;               /* Light mode hover state */
+    --fb-hover-dark: #3a3b3c;                /* Dark mode hover state */
    
    /* Type colors */
    --fb-success: #31a24c;                   /* Success color */
@@ -59,7 +193,7 @@ The Facebook theme uses CSS variables that can be customized:
 }
 ```

-## Structure
+## <i class="fa-solid fa-code"></i> HTML Structure

 The Facebook theme generates notifications with the following HTML structure:

@@ -88,54 +222,36 @@ The Facebook theme generates notifications with the following HTML structure:
 </div>
 ```

-## Configuration Options
+This structure closely mimics Facebook's notification layout, including the circular icons, message content, timestamp, and close button.

-### Timestamp
+## <i class="fa-solid fa-lightbulb"></i> Theme Features

-You can customize the timestamp displayed in the notification:
+### Facebook-Style Design

-```typescript
-flasher.use('theme.facebook').success('Your post was published', {
-  timestamp: '2023-03-08 15:43:27' // Format: YYYY-MM-DD HH:MM:SS
-});
-```
+The Facebook theme accurately recreates Facebook's notification appearance with:

-If no timestamp is provided, the current time will be used.
+- Rounded notification cards with subtle shadows
+- Circular colored icons for each notification type
+- Timestamp display showing when the notification was created
+- Interactive close button with hover effects
+- Facebook's signature typography

-## Accessibility Features
+### Dark Mode

- **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
+The theme automatically adapts to system dark mode preferences without additional configuration, switching to Facebook's dark theme colors for a consistent experience.
+
+### Accessibility Features
+
+The Facebook theme includes several 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
+## <i class="fa-solid fa-browser"></i> Browser Support

 The Facebook theme is compatible with all modern browsers:

@@ -144,11 +260,17 @@ The Facebook theme is compatible with all modern browsers:
 - Safari (latest)
 - Edge (latest)
 - Opera (latest)
+- Mobile browsers on iOS and Android

-## Implementation Details
+## <i class="fa-solid fa-gears"></i> 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
+The Facebook theme uses modern web technologies:
+
+- **CSS Variables**: For theme customization and dark mode support
+- **Facebook's Font Stack**: For authentic typography
+- **SVG Icons**: For high-quality, resolution-independent icons
+- **CSS Animations**: For subtle entrance effects
+- **CSS Box Shadows**: For depth and dimension
+- **Media Queries**: For responsive design, dark mode, and reduced motion support
+
+All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
@@ -1,43 +1,139 @@
-# PHPFlasher Default Theme
+---
+permalink: /theme/flasher/
+title: Flasher Theme
+description: Explore the default notification theme for PHPFlasher featuring a clean design with distinctive colored borders, clear type indicators, and comprehensive accessibility support.
+handler: theme.flasher
+data-controller: theme-flasher
+---

-## Overview
+## <i class="fa-solid fa-bolt"></i> Flasher Theme

 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)
+> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
+> New to PHPFlasher? Check the [installation guide](/installation/) first.

-## Features
+## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup

- **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
+As the default theme for PHPFlasher, the Flasher theme is automatically available without any additional configuration. However, you can explicitly set it as your default theme:

-## Usage
+### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel

-The Flasher theme is available by default without requiring explicit registration:
+```php
+<?php // config/flasher.php

-```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');
+return [
+    'default' => 'flasher',  // Use the default Flasher theme
+    
+    // Other configuration options...
+];
 ```

-## Customization
+### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony

-The Flasher theme uses CSS variables that can be customized:
+```yaml
+# config/packages/flasher.yaml
+
+flasher:
+    default: flasher  # Use the default Flasher theme
+    
+    # Other configuration options...
+```
+
+### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
+
+```typescript
+// The Flasher theme is available by default
+// You can use it directly:
+flasher.success('Operation completed successfully');
+
+// Or explicitly specify it:
+flasher.defaultPlugin = 'flasher';
+```
+
+## <i class="fa-solid fa-palette"></i> Notification Types
+
+Use standard PHPFlasher methods to create notifications with the default Flasher styling:
+
+{% assign successMessage = 'Operation completed successfully.' %}
+{% assign errorMessage = 'An error occurred during the operation.' %}
+{% assign warningMessage = 'This action cannot be undone.' %}
+{% assign infoMessage = 'New updates are available.' %}
+
+<script type="text/javascript">
+    messages['#/ flasher types'] = [
+        {
+            handler: 'flasher',
+            type: 'success',
+            message: '{{ successMessage }}',
+            title: 'Success'
+        },
+        {
+            handler: 'flasher',
+            type: 'error',
+            message: '{{ errorMessage }}',
+            title: 'Error'
+        },
+        {
+            handler: 'flasher',
+            type: 'warning',
+            message: '{{ warningMessage }}',
+            title: 'Warning'
+        },
+        {
+            handler: 'flasher',
+            type: 'info',
+            message: '{{ infoMessage }}',
+            title: 'Information'
+        }
+    ];
+</script>
+
+### PHP
+
+```php
+#/ flasher types
+
+// With Flasher as default theme
+flash()->success('{{ successMessage }}', 'Success');
+flash()->error('{{ errorMessage }}', 'Error');
+flash()->warning('{{ warningMessage }}', 'Warning');
+flash()->info('{{ infoMessage }}', 'Information');
+```
+
+### JavaScript
+
+```javascript
+// With Flasher as default theme
+flasher.success('{{ successMessage }}', 'Success');
+flasher.error('{{ errorMessage }}', 'Error');
+flasher.warning('{{ warningMessage }}', 'Warning');
+flasher.info('{{ infoMessage }}', 'Information');
+```
+
+## <i class="fa-solid fa-brush"></i> Customization
+
+### Using Flasher Theme for Specific Notifications
+
+If another theme is set as your default, you can use the Flasher theme for specific notifications:
+
+#### PHP
+
+```php
+flash()
+    ->use('flasher')
+    ->success('This notification uses the default Flasher theme.');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('flasher').success('This notification uses the default Flasher theme.');
+```
+
+### Custom Colors and Appearance
+
+The Flasher theme uses CSS variables that can be customized to match your brand:

 ```css
 :root {
@@ -65,7 +161,7 @@ The Flasher theme uses CSS variables that can be customized:
 }
 ```

-## Structure
+## <i class="fa-solid fa-code"></i> HTML Structure

 The Flasher theme generates notifications with the following HTML structure:

@@ -85,34 +181,19 @@ The Flasher theme generates notifications with the following HTML structure:
 </div>
 ```

-## Animation
+This structure provides a clear hierarchy with a colored left border, icon, title, message, close button, and progress bar.

-The Flasher theme features two animations:
+## <i class="fa-solid fa-lightbulb"></i> Theme Features

-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);
-       }
-   }
-   ```
+### Visual Characteristics

-2. **Hover Animation**: A subtle lift effect when hovering over notifications:
-   ```css
-   &:hover {
-       transform: translateY(-2px);
-   }
-   ```
+- **Colored Border**: Thick, colored left border that visually identifies the notification type
+- **Type-Specific Icons**: Each notification type has its own distinctive icon
+- **Title & Message Support**: Allows for both a title and detailed message
+- **Progress Bar**: Shows the time remaining before auto-dismiss
+- **Animation**: Smooth slide-in from the left with a subtle hover effect

-Both animations are disabled for users who prefer reduced motion.
-
-## Design Philosophy
+### Design Philosophy

 As the default theme for PHPFlasher, the Flasher theme is designed with these principles:

@@ -121,24 +202,22 @@ As the default theme for PHPFlasher, the Flasher theme is designed with these pr
 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
+### Dark Mode

- **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
+The theme automatically adapts to system dark mode preferences without additional configuration, with optimized colors for dark backgrounds.

-## Accessibility Features
+### 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
+The Flasher theme includes several 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
+## <i class="fa-solid fa-browser"></i> Browser Support

 The Flasher theme is compatible with all modern browsers:

@@ -147,14 +226,17 @@ The Flasher theme is compatible with all modern browsers:
 - Safari (latest)
 - Edge (latest)
 - Opera (latest)
+- Mobile browsers on iOS and Android

-## Implementation Details
+## <i class="fa-solid fa-gears"></i> Implementation Details

-The Flasher theme is built using:
+The Flasher theme uses modern web technologies:

- **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
+- **CSS Variables**: For theme customization and dark mode support
+- **Flexbox Layout**: For responsive and flexible notification structure
+- **CSS Animations**: For entrance and hover effects
+- **Progress Bar**: Shows countdown until notification dismissal
+- **Media Queries**: For responsive design, dark mode, and reduced motion support
+- **SCSS Mixins**: For shared functionality across PHPFlasher themes
+
+All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
@@ -1,44 +1,158 @@
-# PHPFlasher Google Theme
+---
+permalink: /theme/google/
+title: Google Theme
+description: Add Material Design-inspired notifications to your application with the Google theme for PHPFlasher. Featuring Google's card-based layout, typography, and interactive elements like ripple effects.
+handler: theme.google
+data-controller: theme-google
+---

-## Overview
+## <i class="fa-brands fa-google"></i> Google Theme

 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)
+> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
+> New to PHPFlasher? Check the [installation guide](/installation/) first.

-## Features
+## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup

- **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
+The easiest way to use the Google theme is to set it as your **default theme**:

-## Usage
+### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
+
+```php
+<?php // config/flasher.php
+
+return [
+    'default' => 'theme.google',  // Make Google the default theme
+    
+    'themes' => [
+        'google' => [
+            'scripts' => [
+                '/vendor/flasher/themes/google.min.js',
+            ],
+            'styles' => [
+                '/vendor/flasher/themes/google.min.css',
+            ],
+        ],
+    ],
+];
+```
+
+### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
+
+```yaml
+# config/packages/flasher.yaml
+
+flasher:
+    default: theme.google  # Make Google the default theme
+    
+    themes:
+        google:
+            scripts:
+                - '/vendor/flasher/themes/google.min.js'
+            styles:
+                - '/vendor/flasher/themes/google.min.css'
+```
+
+### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript

 ```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';
+
+// Or use it for specific notifications
+flasher.success('Operation completed successfully');
 ```

-## Customization
+## <i class="fa-solid fa-palette"></i> Notification Types
+
+Once configured, use standard PHPFlasher methods to create notifications with Google styling:
+
+{% assign successMessage = 'Operation completed successfully.' %}
+{% assign errorMessage = 'An error occurred during the operation.' %}
+{% assign warningMessage = 'This action cannot be undone.' %}
+{% assign infoMessage = 'New updates are available.' %}
+
+<script type="text/javascript">
+    messages['#/ google types'] = [
+        {
+            handler: 'theme.google',
+            type: 'success',
+            message: '{{ successMessage }}',
+            title: 'Success',
+            options: { theme: 'google' },
+        },
+        {
+            handler: 'theme.google',
+            type: 'error',
+            message: '{{ errorMessage }}',
+            title: 'Error',
+            options: { theme: 'google' },
+        },
+        {
+            handler: 'theme.google',
+            type: 'warning',
+            message: '{{ warningMessage }}',
+            title: 'Warning',
+            options: { theme: 'google' },
+        },
+        {
+            handler: 'theme.google',
+            type: 'info',
+            message: '{{ infoMessage }}',
+            title: 'Information',
+            options: { theme: 'google' },
+        }
+    ];
+</script>
+
+### PHP
+
+```php
+#/ google types
+
+// With Google set as default theme
+flash()->success('{{ successMessage }}', 'Success');
+flash()->error('{{ errorMessage }}', 'Error');
+flash()->warning('{{ warningMessage }}', 'Warning');
+flash()->info('{{ infoMessage }}', 'Information');
+```
+
+### JavaScript
+
+```javascript
+// With Google set as default theme
+flasher.success('{{ successMessage }}', 'Success');
+flasher.error('{{ errorMessage }}', 'Error');
+flasher.warning('{{ warningMessage }}', 'Warning');
+flasher.info('{{ infoMessage }}', 'Information');
+```
+
+## <i class="fa-solid fa-brush"></i> Customization
+
+### Using Google Theme for Specific Notifications
+
+If Google isn't your default theme, you can use it for specific notifications:
+
+#### PHP
+
+```php
+flash()
+    ->use('theme.google')
+    ->success('This notification uses Google theme.');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('theme.google').success('This notification uses Google theme.');
+```
+
+### Custom Colors and Appearance

 The Google theme uses CSS variables that can be customized to match your brand while maintaining the Material Design feel:

@@ -49,6 +163,8 @@ The Google theme uses CSS variables that can be customized to match your brand w
    --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-text-dark: rgba(255, 255, 255, 0.87); /* Primary text in dark mode */
+    --md-text-secondary-dark: rgba(255, 255, 255, 0.6); /* Secondary text in dark 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 */
    
@@ -64,7 +180,7 @@ The Google theme uses CSS variables that can be customized to match your brand w
 }
 ```

-## Structure
+## <i class="fa-solid fa-code"></i> HTML Structure

 The Google theme generates notifications with the following HTML structure:

@@ -92,9 +208,13 @@ The Google theme generates notifications with the following HTML structure:
 </div>
 ```

-## Material Design Elements
+This structure follows Material Design principles with cards, proper typography hierarchy, and interactive elements.

-### Elevation
+## <i class="fa-solid fa-lightbulb"></i> Theme Features
+
+### Material Design Elements
+
+#### Elevation

 The theme uses proper Material Design elevation with three shadow components:

@@ -104,7 +224,7 @@ The theme uses proper Material Design elevation with three shadow components:

 This creates the characteristic Material Design "floating" effect for cards.

-### Typography
+#### Typography

 Following Material Design typography guidelines:

@@ -112,7 +232,7 @@ 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
+#### Ripple Effect

 The theme includes Material Design's signature "ink ripple" effect:

@@ -122,34 +242,7 @@ The theme includes Material Design's signature "ink ripple" effect:

 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
+### Dark Mode

 The Google theme implements Material Design's dark theme guidelines:

@@ -158,17 +251,18 @@ The Google theme implements Material Design's dark theme guidelines:
 - Adjusted shadows for better visibility on dark backgrounds
 - Higher contrast for hover states (8% opacity instead of 4%)

-## Font Considerations
+### Accessibility Features

-For the best experience, it's recommended to include the Roboto font in your project:
+The Google theme includes several accessibility features:

-```html
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
-```
+- **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

-If Roboto is not available, the theme falls back to system fonts while maintaining the Material Design aesthetic as much as possible.
-
-## Browser Support
+## <i class="fa-solid fa-browser"></i> Browser Support

 The Google theme is compatible with all modern browsers:

@@ -177,5 +271,26 @@ The Google theme is compatible with all modern browsers:
 - Safari (latest)
 - Edge (latest)
 - Opera (latest)
+- Mobile browsers on iOS and Android

 The ripple effect and other animations may have slightly different appearances across browsers, but the core functionality works everywhere.
+
+## <i class="fa-solid fa-gears"></i> Implementation Details
+
+The Google theme uses modern web technologies:
+
+- **CSS Variables**: For theme customization and dark mode support
+- **Material Design Elevation**: Proper shadow implementation for depth
+- **Ripple Animation**: For tactile button feedback
+- **CSS Animations**: With Material Design easing curves
+- **Linear Progress**: For countdown visualization
+- **Roboto Font**: Falls back to system fonts if unavailable
+- **Media Queries**: For responsive design, dark mode, and reduced motion support
+
+All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
+
+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">
+```
@@ -1,43 +1,158 @@
-# PHPFlasher iOS Theme
+---
+permalink: /theme/ios/
+title: iOS Theme
+description: Add Apple iOS-style notifications to your application with the iOS theme for PHPFlasher. Featuring frosted glass effects, app icons, and animations that mimic native iOS notifications.
+handler: theme.ios
+data-controller: theme-ios
+---

-## Overview
+## <i class="fa-brands fa-apple"></i> iOS Theme

 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)
+> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
+> New to PHPFlasher? Check the [installation guide](/installation/) first.

-## Features
+## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup

- **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
+The easiest way to use the iOS theme is to set it as your **default theme**:

-## Usage
+### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
+
+```php
+<?php // config/flasher.php
+
+return [
+    'default' => 'theme.ios',  // Make iOS the default theme
+    
+    'themes' => [
+        'ios' => [
+            'scripts' => [
+                '/vendor/flasher/themes/ios.min.js',
+            ],
+            'styles' => [
+                '/vendor/flasher/themes/ios.min.css',
+            ],
+        ],
+    ],
+];
+```
+
+### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
+
+```yaml
+# config/packages/flasher.yaml
+
+flasher:
+    default: theme.ios  # Make iOS the default theme
+    
+    themes:
+        ios:
+            scripts:
+                - '/vendor/flasher/themes/ios.min.js'
+            styles:
+                - '/vendor/flasher/themes/ios.min.css'
+```
+
+### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript

 ```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';
+
+// Or use it for specific notifications
+flasher.success('Your photo was uploaded successfully');
 ```

-## Customization
+## <i class="fa-solid fa-palette"></i> Notification Types
+
+Once configured, use standard PHPFlasher methods to create notifications with iOS styling:
+
+{% assign successMessage = 'Your photo was uploaded successfully.' %}
+{% assign errorMessage = 'Unable to connect to server.' %}
+{% assign warningMessage = 'Low storage space on your device.' %}
+{% assign infoMessage = 'New software update available.' %}
+
+<script type="text/javascript">
+    messages['#/ ios types'] = [
+        {
+            handler: 'theme.ios',
+            type: 'success',
+            message: '{{ successMessage }}',
+            title: 'Photos',
+            options: { theme: 'ios' },
+        },
+        {
+            handler: 'theme.ios',
+            type: 'error',
+            message: '{{ errorMessage }}',
+            title: 'Settings',
+            options: { theme: 'ios' },
+        },
+        {
+            handler: 'theme.ios',
+            type: 'warning',
+            message: '{{ warningMessage }}',
+            title: 'Storage',
+            options: { theme: 'ios' },
+        },
+        {
+            handler: 'theme.ios',
+            type: 'info',
+            message: '{{ infoMessage }}',
+            title: 'App Store',
+            options: { theme: 'ios' },
+        }
+    ];
+</script>
+
+### PHP
+
+```php
+#/ ios types
+
+// With iOS set as default theme
+flash()->success('{{ successMessage }}', 'Photos');
+flash()->error('{{ errorMessage }}', 'Settings');
+flash()->warning('{{ warningMessage }}', 'Storage');
+flash()->info('{{ infoMessage }}', 'App Store');
+```
+
+### JavaScript
+
+```javascript
+// With iOS set as default theme
+flasher.success('{{ successMessage }}', 'Photos');
+flasher.error('{{ errorMessage }}', 'Settings');
+flasher.warning('{{ warningMessage }}', 'Storage');
+flasher.info('{{ infoMessage }}', 'App Store');
+```
+
+## <i class="fa-solid fa-brush"></i> Customization
+
+### Using iOS Theme for Specific Notifications
+
+If iOS isn't your default theme, you can use it for specific notifications:
+
+#### PHP
+
+```php
+flash()
+    ->use('theme.ios')
+    ->success('This notification uses iOS theme.', 'Photos');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('theme.ios').success('This notification uses iOS theme.', 'Photos');
+```
+
+### Custom Colors and Appearance

 The iOS theme uses CSS variables that can be customized to match your brand while maintaining the iOS look:

@@ -48,6 +163,8 @@ The iOS theme uses CSS variables that can be customized to match your brand whil
    --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-text-dark: #ffffff;                   /* Dark mode text */
+    --ios-text-secondary-dark: #a0a0a0;         /* Dark mode secondary text */
    --ios-border-radius: 13px;                  /* Corner radius */
    --ios-blur: 30px;                           /* Backdrop blur amount */
    
@@ -59,7 +176,7 @@ The iOS theme uses CSS variables that can be customized to match your brand whil
 }
 ```

-## Structure
+## <i class="fa-solid fa-code"></i> HTML Structure

 The iOS theme generates notifications with the following HTML structure:

@@ -72,7 +189,7 @@ The iOS theme generates notifications with the following HTML structure:
            </div>
            <div class="fl-app-info">
                <div class="fl-app-name">App Name/Title</div>
-                <div class="fl-time">Current time</div>
+                <div class="fl-time">2025-03-10 00:14:11</div>
            </div>
        </div>
        <div class="fl-content">
@@ -85,94 +202,56 @@ The iOS theme generates notifications with the following HTML structure:
 </div>
 ```

-## Animation Details
+This structure mimics the iOS notification layout, including the app icon, app name, current time, and message content.

-The iOS theme features two carefully crafted animations that work together to create a smooth, iOS-like appearance:
+## <i class="fa-solid fa-lightbulb"></i> Theme Features

-### Entrance Animation
+### iOS-Specific Design Elements

-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
+#### 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
+#### 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
+#### Real-Time Timestamp

-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
+The theme automatically displays the current time in the iOS format (HH:MM), just like native iOS notifications.

-### Close Button
+#### Smooth Animations

-The close button mimics iOS UI elements:
- Small circular button (18px diameter)
- Semi-transparent background
- Simple "×" symbol
- Subtle hover effect
+The iOS theme features two carefully crafted animations:

-## Dark Mode
+1. **Entrance Animation**: Slides in from above with a subtle scaling effect
+2. **Content Expansion**: The content area expands with a slight delay after the header appears

-The iOS theme implements Apple's dark mode approach:
+These animations mimic the iOS notification animation style with a quick start and gentle end.
+
+### Dark Mode
+
+The theme automatically adapts to system dark mode preferences, switching to the iOS dark appearance:
 - Dark semi-transparent background
 - Light text
 - Adjusted shadows for better visibility
 - Lighter close button background

-## Accessibility Features
+### 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
+The iOS theme includes several 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
+## <i class="fa-solid fa-browser"></i> Browser Support

 The iOS theme is compatible with all modern browsers:

@@ -181,12 +260,21 @@ The iOS theme is compatible with all modern browsers:
 - Safari (latest)
 - Edge (latest)
 - Opera (latest)
+- Mobile browsers on iOS and Android

 For browsers that don't support backdrop-filter, the theme gracefully degrades to using just the semi-transparent background without blur.

-## Implementation Notes
+## <i class="fa-solid fa-gears"></i> Implementation Details

- 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
+The iOS theme uses modern web technologies:
+
+- **CSS Variables**: For theme customization and dark mode support
+- **Backdrop Filter**: For the frosted glass effect
+- **CSS Animations**: For entrance and content expansion effects
+- **San Francisco Font**: Uses Apple's system font stack with appropriate fallbacks
+- **Real-Time Timestamps**: Automatically displays current time in iOS format
+- **Media Queries**: For responsive design, dark mode, and reduced motion support
+
+All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
+
+**Note:** The title parameter is used as the "app name" in the notification. If no title is provided, it defaults to "PHPFlasher".
@@ -1,41 +1,154 @@
-# PHPFlasher Jade Theme
+---
+permalink: /theme/jade/
+title: Jade Theme
+description: Enhance your notifications with the calm, minimalist Jade theme for PHPFlasher. Featuring soft colors, rounded corners, and subtle animations for a soothing user experience.
+handler: theme.jade
+data-controller: theme-jade
+---

-## Overview
+## <i class="fa-solid fa-leaf"></i> Jade Theme

 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)
+> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
+> New to PHPFlasher? Check the [installation guide](/installation/) first.

-## Features
+## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup

- **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
+The easiest way to use the Jade theme is to set it as your **default theme**:

-## Usage
+### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
+
+```php
+<?php // config/flasher.php
+
+return [
+    'default' => 'theme.jade',  // Make Jade the default theme
+    
+    'themes' => [
+        'jade' => [
+            'scripts' => [
+                '/vendor/flasher/themes/jade.min.js',
+            ],
+            'styles' => [
+                '/vendor/flasher/themes/jade.min.css',
+            ],
+        ],
+    ],
+];
+```
+
+### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
+
+```yaml
+# config/packages/flasher.yaml
+
+flasher:
+    default: theme.jade  # Make Jade the default theme
+    
+    themes:
+        jade:
+            scripts:
+                - '/vendor/flasher/themes/jade.min.js'
+            styles:
+                - '/vendor/flasher/themes/jade.min.css'
+```
+
+### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript

 ```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';
+
+// Or use it for specific notifications
+flasher.success('Your changes have been saved');
 ```

-## Customization
+## <i class="fa-solid fa-palette"></i> Notification Types
+
+Once configured, use standard PHPFlasher methods to create notifications with Jade styling:
+
+{% assign successMessage = 'Your changes have been saved successfully.' %}
+{% assign errorMessage = 'An error occurred while saving your changes.' %}
+{% assign warningMessage = 'Your session will expire in 5 minutes.' %}
+{% assign infoMessage = 'New features have been added to your dashboard.' %}
+
+<script type="text/javascript">
+    messages['#/ jade types'] = [
+        {
+            handler: 'theme.jade',
+            type: 'success',
+            message: '{{ successMessage }}',
+            options: { theme: 'jade' },
+        },
+        {
+            handler: 'theme.jade',
+            type: 'error',
+            message: '{{ errorMessage }}',
+            options: { theme: 'jade' },
+        },
+        {
+            handler: 'theme.jade',
+            type: 'warning',
+            message: '{{ warningMessage }}',
+            options: { theme: 'jade' },
+        },
+        {
+            handler: 'theme.jade',
+            type: 'info',
+            message: '{{ infoMessage }}',
+            options: { theme: 'jade' },
+        }
+    ];
+</script>
+
+### PHP
+
+```php
+#/ jade types
+
+// With Jade set as default theme
+flash()->success('{{ successMessage }}');
+flash()->error('{{ errorMessage }}');
+flash()->warning('{{ warningMessage }}');
+flash()->info('{{ infoMessage }}');
+```
+
+### JavaScript
+
+```javascript
+// With Jade set as default theme
+flasher.success('{{ successMessage }}');
+flasher.error('{{ errorMessage }}');
+flasher.warning('{{ warningMessage }}');
+flasher.info('{{ infoMessage }}');
+```
+
+## <i class="fa-solid fa-brush"></i> Customization
+
+### Using Jade Theme for Specific Notifications
+
+If Jade isn't your default theme, you can use it for specific notifications:
+
+#### PHP
+
+```php
+flash()
+    ->use('theme.jade')
+    ->success('This notification uses Jade theme.');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('theme.jade').success('This notification uses Jade theme.');
+```
+
+### Custom Colors and Appearance

 The Jade theme uses CSS variables that can be customized to match your brand while maintaining its calm aesthetic:

@@ -64,7 +177,7 @@ The Jade theme uses CSS variables that can be customized to match your brand whi
 }
 ```

-## Structure
+## <i class="fa-solid fa-code"></i> HTML Structure

 The Jade theme generates notifications with the following HTML structure:

@@ -80,31 +193,11 @@ The Jade theme generates notifications with the following HTML structure:
 </div>
 ```

-## Animation
+This minimalist structure focuses on content by omitting icons and unnecessary UI elements for a cleaner, more elegant look.

-The Jade theme features a refined entrance animation that combines two effects:
+## <i class="fa-solid fa-lightbulb"></i> Theme Features

-```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
+### Design Philosophy

 The Jade theme embodies several design principles:

@@ -114,7 +207,7 @@ The Jade theme embodies several design principles:
 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
+### Color System

 The Jade theme uses a dual-color system for each notification type:

@@ -123,27 +216,38 @@ The Jade theme uses a dual-color system for each notification type:

 This approach maintains excellent readability while providing clear visual differentiation between notification types.

-## Dark Mode
+### Animation

-In dark mode, the theme switches to semi-transparent colored backgrounds that create a subtle glow effect:
+The Jade theme features a refined entrance animation that combines scaling and movement:
+
+- Notifications fade in from invisible to fully visible
+- They move upward slightly from their initial position
+- They scale from 95% to 100% of their final size
+
+This combination creates a more organic, refined entrance than simple fades or slides, using a carefully tuned easing curve for a natural feel.
+
+### Dark Mode
+
+The theme automatically adapts to system dark mode preferences, with 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
+### 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
+The Jade theme includes several 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
+## <i class="fa-solid fa-browser"></i> Browser Support

 The Jade theme is compatible with all modern browsers:

@@ -152,3 +256,16 @@ The Jade theme is compatible with all modern browsers:
 - Safari (latest)
 - Edge (latest)
 - Opera (latest)
+- Mobile browsers on iOS and Android
+
+## <i class="fa-solid fa-gears"></i> Implementation Details
+
+The Jade theme uses modern web technologies:
+
+- **CSS Variables**: For theme customization and dark mode support
+- **CSS Animations**: For refined entrance effects
+- **CSS Transitions**: For smooth hover interactions
+- **Progress Bar**: Shows countdown until notification dismissal
+- **Media Queries**: For responsive design, dark mode, and reduced motion support
+
+All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
@@ -1,41 +1,154 @@
-# PHPFlasher Material Theme
+---
+permalink: /theme/material/
+title: Material Theme
+description: Add minimalist Material Design notifications to your application with the Material theme for PHPFlasher. Featuring clean cards, proper elevation, and interactive elements following Material guidelines.
+handler: theme.material
+data-controller: theme-material
+---

-## Overview
+## <i class="fa-solid fa-square"></i> Material Theme

 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)
+> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
+> New to PHPFlasher? Check the [installation guide](/installation/) first.

-## Features
+## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup

- **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
+The easiest way to use the Material theme is to set it as your **default theme**:

-## Usage
+### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
+
+```php
+<?php // config/flasher.php
+
+return [
+    'default' => 'theme.material',  // Make Material the default theme
+    
+    'themes' => [
+        'material' => [
+            'scripts' => [
+                '/vendor/flasher/themes/material.min.js',
+            ],
+            'styles' => [
+                '/vendor/flasher/themes/material.min.css',
+            ],
+        ],
+    ],
+];
+```
+
+### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
+
+```yaml
+# config/packages/flasher.yaml
+
+flasher:
+    default: theme.material  # Make Material the default theme
+    
+    themes:
+        material:
+            scripts:
+                - '/vendor/flasher/themes/material.min.js'
+            styles:
+                - '/vendor/flasher/themes/material.min.css'
+```
+
+### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript

 ```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';
+
+// Or use it for specific notifications
+flasher.success('Operation completed successfully');
 ```

-## Customization
+## <i class="fa-solid fa-palette"></i> Notification Types
+
+Once configured, use standard PHPFlasher methods to create notifications with Material styling:
+
+{% assign successMessage = 'Operation completed successfully.' %}
+{% assign errorMessage = 'An error occurred during the operation.' %}
+{% assign warningMessage = 'This action cannot be undone.' %}
+{% assign infoMessage = 'New updates are available.' %}
+
+<script type="text/javascript">
+    messages['#/ material types'] = [
+        {
+            handler: 'theme.material',
+            type: 'success',
+            message: '{{ successMessage }}',
+            options: { theme: 'material' },
+        },
+        {
+            handler: 'theme.material',
+            type: 'error',
+            message: '{{ errorMessage }}',
+            options: { theme: 'material' },
+        },
+        {
+            handler: 'theme.material',
+            type: 'warning',
+            message: '{{ warningMessage }}',
+            options: { theme: 'material' },
+        },
+        {
+            handler: 'theme.material',
+            type: 'info',
+            message: '{{ infoMessage }}',
+            options: { theme: 'material' },
+        }
+    ];
+</script>
+
+### PHP
+
+```php
+#/ material types
+
+// With Material set as default theme
+flash()->success('{{ successMessage }}');
+flash()->error('{{ errorMessage }}');
+flash()->warning('{{ warningMessage }}');
+flash()->info('{{ infoMessage }}');
+```
+
+### JavaScript
+
+```javascript
+// With Material set as default theme
+flasher.success('{{ successMessage }}');
+flasher.error('{{ errorMessage }}');
+flasher.warning('{{ warningMessage }}');
+flasher.info('{{ infoMessage }}');
+```
+
+## <i class="fa-solid fa-brush"></i> Customization
+
+### Using Material Theme for Specific Notifications
+
+If Material isn't your default theme, you can use it for specific notifications:
+
+#### PHP
+
+```php
+flash()
+    ->use('theme.material')
+    ->success('This notification uses Material theme.');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('theme.material').success('This notification uses Material theme.');
+```
+
+### Custom Colors and Appearance

 The Material theme uses CSS variables that can be customized to match your brand while maintaining the Material Design feel:

@@ -46,6 +159,8 @@ The Material theme uses CSS variables that can be customized to match your brand
    --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-text-dark: rgba(255, 255, 255, 0.87); /* Primary text in dark mode */
+    --md-text-secondary-dark: rgba(255, 255, 255, 0.6); /* Secondary text in dark 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 */
    
@@ -61,7 +176,7 @@ The Material theme uses CSS variables that can be customized to match your brand
 }
 ```

-## Structure
+## <i class="fa-solid fa-code"></i> HTML Structure

 The Material theme generates notifications with the following HTML structure:

@@ -85,9 +200,13 @@ The Material theme generates notifications with the following HTML structure:
 </div>
 ```

-## Material Design Elements
+This minimalist structure focuses on content by omitting unnecessary UI elements for a cleaner appearance.

-### Elevation
+## <i class="fa-solid fa-lightbulb"></i> Theme Features
+
+### Material Design Elements
+
+#### Elevation

 The theme uses proper Material Design elevation with three shadow components:

@@ -97,14 +216,14 @@ The theme uses proper Material Design elevation with three shadow components:

 This creates the characteristic Material Design "floating" effect for cards.

-### Typography
+#### 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
+#### Ripple Effect

 The theme includes Material Design's signature "ink ripple" effect:

@@ -114,9 +233,7 @@ The theme includes Material Design's signature "ink ripple" effect:

 This provides visual feedback that enhances the tactile feeling of the interface.

-## Animation Details
-
-### Entrance Animation
+### Animation Details

 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:

@@ -124,15 +241,13 @@ The Material theme uses Material Design's standard motion curve (cubic-bezier(0.
 - Smooth deceleration to end
 - Total duration of 300ms

-### Interaction Animations
-
-The theme includes several interaction animations:
+The theme also 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
+### Differences from Google Theme

 While both the Material theme and Google theme follow Material Design guidelines, they differ in these key ways:

@@ -140,16 +255,7 @@ While both the Material theme and Google theme follow Material Design guidelines
 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
+### Dark Mode

 The Material theme implements Material Design's dark theme guidelines:

@@ -158,17 +264,18 @@ The Material theme implements Material Design's dark theme guidelines:
 - Adjusted shadows for better visibility on dark backgrounds
 - Higher contrast for hover states (8% opacity instead of 4%)

-## Font Considerations
+### Accessibility Features

-For the best experience, it's recommended to include the Roboto font in your project:
+The Material theme includes several accessibility features:

-```html
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
-```
+- **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

-If Roboto is not available, the theme falls back to system fonts while maintaining the Material Design aesthetic as much as possible.
-
-## Browser Support
+## <i class="fa-solid fa-browser"></i> Browser Support

 The Material theme is compatible with all modern browsers:

@@ -177,5 +284,25 @@ The Material theme is compatible with all modern browsers:
 - Safari (latest)
 - Edge (latest)
 - Opera (latest)
+- Mobile browsers on iOS and Android

 The ripple effect and other animations may have slightly different appearances across browsers, but the core functionality works everywhere.
+
+## <i class="fa-solid fa-gears"></i> Implementation Details
+
+The Material theme uses modern web technologies:
+
+- **CSS Variables**: For theme customization and dark mode support
+- **Material Design Elevation**: Proper shadow implementation for depth
+- **Ripple Animation**: For tactile button feedback
+- **CSS Animations**: With Material Design easing curves
+- **Linear Progress**: For countdown visualization
+- **Media Queries**: For responsive design, dark mode, and reduced motion support
+
+All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
+
+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">
+```
@@ -1,44 +1,156 @@
-# PHPFlasher Minimal Theme
+---
+permalink: /theme/minimal/
+title: Minimal Theme
+description: Enhance your application with ultra-clean, distraction-free notifications using the Minimal theme for PHPFlasher. Featuring a translucent design with subtle styling for unobtrusive messaging.
+handler: theme.minimal
+data-controller: theme-minimal
+---

-## Overview
+## <i class="fa-solid fa-minus"></i> Minimal Theme

 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)
+> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
+> New to PHPFlasher? Check the [installation guide](/installation/) first.

-## Features
+## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup

- **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
+The easiest way to use the Minimal theme is to set it as your **default theme**:

-## Usage
+### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
+
+```php
+<?php // config/flasher.php
+
+return [
+    'default' => 'theme.minimal',  // Make Minimal the default theme
+    
+    'themes' => [
+        'minimal' => [
+            'scripts' => [
+                '/vendor/flasher/themes/minimal.min.js',
+            ],
+            'styles' => [
+                '/vendor/flasher/themes/minimal.min.css',
+            ],
+        ],
+    ],
+];
+```
+
+### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
+
+```yaml
+# config/packages/flasher.yaml
+
+flasher:
+    default: theme.minimal  # Make Minimal the default theme
+    
+    themes:
+        minimal:
+            scripts:
+                - '/vendor/flasher/themes/minimal.min.js'
+            styles:
+                - '/vendor/flasher/themes/minimal.min.css'
+```
+
+### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript

 ```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';
+
+// Or use it for specific notifications
+flasher.success('Changes saved');
 ```

-## Customization
+## <i class="fa-solid fa-palette"></i> Notification Types

-The Minimal theme uses CSS variables that can be customized:
+Once configured, use standard PHPFlasher methods to create notifications with Minimal styling:
+
+{% assign successMessage = 'Changes saved.' %}
+{% assign errorMessage = 'Connection lost.' %}
+{% assign warningMessage = 'Low disk space.' %}
+{% assign infoMessage = 'Updates available.' %}
+
+<script type="text/javascript">
+    messages['#/ minimal types'] = [
+        {
+            handler: 'theme.minimal',
+            type: 'success',
+            message: '{{ successMessage }}',
+            options: { theme: 'minimal' },
+        },
+        {
+            handler: 'theme.minimal',
+            type: 'error',
+            message: '{{ errorMessage }}',
+            options: { theme: 'minimal' },
+        },
+        {
+            handler: 'theme.minimal',
+            type: 'warning',
+            message: '{{ warningMessage }}',
+            options: { theme: 'minimal' },
+        },
+        {
+            handler: 'theme.minimal',
+            type: 'info',
+            message: '{{ infoMessage }}',
+            options: { theme: 'minimal' },
+        }
+    ];
+</script>
+
+### PHP
+
+```php
+#/ minimal types
+
+// With Minimal set as default theme
+flash()->success('{{ successMessage }}');
+flash()->error('{{ errorMessage }}');
+flash()->warning('{{ warningMessage }}');
+flash()->info('{{ infoMessage }}');
+```
+
+### JavaScript
+
+```javascript
+// With Minimal set as default theme
+flasher.success('{{ successMessage }}');
+flasher.error('{{ errorMessage }}');
+flasher.warning('{{ warningMessage }}');
+flasher.info('{{ infoMessage }}');
+```
+
+## <i class="fa-solid fa-brush"></i> Customization
+
+### Using Minimal Theme for Specific Notifications
+
+If Minimal isn't your default theme, you can use it for specific notifications:
+
+#### PHP
+
+```php
+flash()
+    ->use('theme.minimal')
+    ->success('This notification uses Minimal theme.');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('theme.minimal').success('This notification uses Minimal theme.');
+```
+
+### Custom Colors and Appearance
+
+The Minimal theme uses CSS variables that can be customized to match your brand:

 ```css
 :root {
@@ -54,16 +166,21 @@ The Minimal theme uses CSS variables that can be customized:
    --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 */
+    
+    /* Additional customization */
+    --minimal-blur: 8px;                          /* Backdrop blur amount */
+    --minimal-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Shadow */
 }
 ```

-## Structure
+## <i class="fa-solid fa-code"></i> HTML 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-dot"></div>
        <div class="fl-message">Message text</div>
        <button class="fl-close" aria-label="Close [type] message">×</button>
    </div>
@@ -73,9 +190,11 @@ The Minimal theme generates notifications with the following HTML structure:
 </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).
+This structure is deliberately minimalist, with just a small colored dot to indicate notification type and a thin progress bar at the bottom.

-## Design Philosophy
+## <i class="fa-solid fa-lightbulb"></i> Theme Features
+
+### Design Philosophy

 The Minimal theme embodies several key design principles:

@@ -87,75 +206,65 @@ The Minimal theme embodies several key design principles:

 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
+### Visual Characteristics

-### Frosted Glass Effect
+#### 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
+#### System Font Stack

-```css
-font-family: -apple-system, BlinkMacSystemFont, var(--fl-font), sans-serif;
-```
+The theme 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.

-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
+#### Compact Size and Spacing

 - **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
+#### Quick Animation

-The entrance animation is intentionally brief (0.2s) and subtle:
+The entrance animation is intentionally brief (0.2s) and subtle, with just a small movement from above and fade-in effect.

-```css
-@keyframes minimalIn {
-    from {
-        opacity: 0;
-        transform: translateY(-8px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-```
+### Dark Mode

-## Accessibility Features
+The theme automatically adapts to system dark mode preferences, with a dark semi-transparent background and light text that maintains the minimal aesthetic while ensuring readability.

- **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
+### Accessibility Features
+
+The Minimal theme includes several 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
+## <i class="fa-solid fa-browser"></i> Browser Support

-The dark mode implementation maintains the minimal aesthetic while ensuring readability:
+The Minimal theme is compatible with all modern browsers:

- Dark semi-transparent background (rgba(25, 25, 25, 0.8))
- Light text color (#f5f5f5)
- Slightly stronger shadows
- Subtle white border (10% opacity)
+- Chrome (latest)
+- Firefox (latest) - falls back gracefully to semi-transparent background without blur
+- Safari (latest)
+- Edge (latest)
+- Opera (latest)
+- Mobile browsers on iOS and Android

-The colors of the dot indicators remain the same in both light and dark modes to maintain consistency.
+## <i class="fa-solid fa-gears"></i> Implementation Details

-## Browser Compatibility
+The Minimal theme uses modern web technologies:

-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)
+- **CSS Variables**: For theme customization and dark mode support
+- **Backdrop Filter**: For the subtle frosted glass effect
+- **System Font Stack**: For optimal readability with native fonts
+- **CSS Transitions**: For subtle hover effects
+- **CSS Animations**: For quick, minimal entrance animation
+- **Performance Optimization**: Uses `will-change: transform, opacity` for smooth animations
+- **Media Queries**: For responsive design, dark mode, and reduced motion support

-## Performance Considerations
+All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times and minimal impact on application performance.

-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
@@ -1,41 +1,154 @@
-# PHPFlasher Neon Theme
+---
+permalink: /theme/neon/
+title: Neon Theme
+description: Add elegant notifications with subtle glowing accents to your application using the Neon theme for PHPFlasher. Featuring frosted glass backgrounds, floating illuminated indicators, and refined typography.
+handler: theme.neon
+data-controller: theme-neon
+---

-## Overview
+## <i class="fa-solid fa-lightbulb"></i> Neon Theme

 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)
+> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
+> New to PHPFlasher? Check the [installation guide](/installation/) first.

-## Features
+## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup

- **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
+The easiest way to use the Neon theme is to set it as your **default theme**:

-## Usage
+### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
+
+```php
+<?php // config/flasher.php
+
+return [
+    'default' => 'theme.neon',  // Make Neon the default theme
+    
+    'themes' => [
+        'neon' => [
+            'scripts' => [
+                '/vendor/flasher/themes/neon.min.js',
+            ],
+            'styles' => [
+                '/vendor/flasher/themes/neon.min.css',
+            ],
+        ],
+    ],
+];
+```
+
+### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
+
+```yaml
+# config/packages/flasher.yaml
+
+flasher:
+    default: theme.neon  # Make Neon the default theme
+    
+    themes:
+        neon:
+            scripts:
+                - '/vendor/flasher/themes/neon.min.js'
+            styles:
+                - '/vendor/flasher/themes/neon.min.css'
+```
+
+### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript

 ```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';
+
+// Or use it for specific notifications
+flasher.success('Your changes have been saved');
 ```

-## Customization
+## <i class="fa-solid fa-palette"></i> Notification Types
+
+Once configured, use standard PHPFlasher methods to create notifications with Neon styling:
+
+{% assign successMessage = 'Your changes have been saved successfully.' %}
+{% assign errorMessage = 'There was a problem saving your changes.' %}
+{% assign warningMessage = 'This action cannot be undone.' %}
+{% assign infoMessage = 'New features are available.' %}
+
+<script type="text/javascript">
+    messages['#/ neon types'] = [
+        {
+            handler: 'theme.neon',
+            type: 'success',
+            message: '{{ successMessage }}',
+            options: { theme: 'neon' },
+        },
+        {
+            handler: 'theme.neon',
+            type: 'error',
+            message: '{{ errorMessage }}',
+            options: { theme: 'neon' },
+        },
+        {
+            handler: 'theme.neon',
+            type: 'warning',
+            message: '{{ warningMessage }}',
+            options: { theme: 'neon' },
+        },
+        {
+            handler: 'theme.neon',
+            type: 'info',
+            message: '{{ infoMessage }}',
+            options: { theme: 'neon' },
+        }
+    ];
+</script>
+
+### PHP
+
+```php
+#/ neon types
+
+// With Neon set as default theme
+flash()->success('{{ successMessage }}');
+flash()->error('{{ errorMessage }}');
+flash()->warning('{{ warningMessage }}');
+flash()->info('{{ infoMessage }}');
+```
+
+### JavaScript
+
+```javascript
+// With Neon set as default theme
+flasher.success('{{ successMessage }}');
+flasher.error('{{ errorMessage }}');
+flasher.warning('{{ warningMessage }}');
+flasher.info('{{ infoMessage }}');
+```
+
+## <i class="fa-solid fa-brush"></i> Customization
+
+### Using Neon Theme for Specific Notifications
+
+If Neon isn't your default theme, you can use it for specific notifications:
+
+#### PHP
+
+```php
+flash()
+    ->use('theme.neon')
+    ->success('This notification uses Neon theme.');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('theme.neon').success('This notification uses Neon theme.');
+```
+
+### Custom Colors and Appearance

 The Neon theme uses CSS variables that can be customized to match your brand:

@@ -56,10 +169,11 @@ The Neon theme uses CSS variables that can be customized to match your brand:
    
    /* Glow properties */
    --neon-glow-strength: 10px;                   /* How far the glow extends */
+    --neon-blur: 10px;                            /* Backdrop blur amount */
 }
 ```

-## Structure
+## <i class="fa-solid fa-code"></i> HTML Structure

 The Neon theme generates notifications with the following HTML structure:

@@ -75,81 +189,41 @@ The Neon theme generates notifications with the following HTML structure:
 </div>
 ```

-The `fl-icon-box` element is created using CSS pseudo-elements rather than being part of the HTML structure.
+The floating illuminated indicator is created using CSS pseudo-elements rather than being part of the HTML structure.

-## Animation Details
+## <i class="fa-solid fa-lightbulb"></i> Theme Features

-The Neon theme features two distinctive animations:
+### Floating Illuminated Indicator

-### 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:
+The Neon theme features a distinctive floating indicator that appears to hover above the notification with a subtle glow:

 1. **Container**: Positioned above the notification's top edge
-2. **Glow**: Applied using a filter drop-shadow with the type's color
+2. **Glow**: Applied using a filter drop-shadow with the notification 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
+### Animation Effects

-The theme uses a semi-transparent background combined with backdrop-filter to create a frosted glass effect:
+The Neon theme features two distinctive animations:

-```css
-backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
-```
+#### Entrance Animation

-This creates a modern, sophisticated appearance where the notification appears to float above the page with a subtle blur applied to content behind it.
+A 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

-## Typography
+#### Glow Animation

-The Neon theme prioritizes elegant typography:
+A subtle "breathing" effect where the glow gently pulses, becoming slightly dimmer in the middle of the animation cycle before returning to full brightness.

- 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
+### Frosted Glass Effect

-## Dark Mode
+The theme uses a semi-transparent background combined with backdrop-filter to create a frosted glass effect that gives notifications a modern, sophisticated appearance where they appear to float above the page with a subtle blur applied to content behind them.
+
+### Dark Mode

 The dark mode implementation maintains the glowing aesthetic while adjusting for low-light environments:

@@ -160,16 +234,18 @@ The dark mode implementation maintains the glowing aesthetic while adjusting for

 The glowing colors remain consistent between light and dark modes to maintain brand color recognition.

-## Accessibility Features
+### 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
+The Neon theme includes several 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
+## <i class="fa-solid fa-browser"></i> Browser Support

 The Neon theme is compatible with all modern browsers:

@@ -178,15 +254,26 @@ The Neon theme is compatible with all modern browsers:
 - Safari (latest)
 - Edge (latest)
 - Opera (latest)
+- Mobile browsers on iOS and Android

 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
+## <i class="fa-solid fa-gears"></i> Implementation Details
+
+The Neon theme uses modern web technologies:
+
+- **CSS Variables**: For theme customization and dark mode support
+- **CSS Pseudo-elements**: For creating the floating indicator without extra HTML
+- **Backdrop Filter**: For the frosted glass effect
+- **Filter Effects**: For creating the glowing appearance
+- **CSS Animations**: For entrance and glow pulsing effects
+- **Typography**: Uses Inter font (with fallbacks) for a clean, modern look
+- **Media Queries**: For responsive design, dark mode, and reduced motion support
+
+All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.

 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.
@@ -1,41 +1,154 @@
-# PHPFlasher Onyx Theme
+---
+permalink: /theme/onyx/
+title: Onyx Theme
+description: Add modern, floating notifications to your application with the Onyx theme for PHPFlasher. Featuring elegant shadows, colored corner dots, and smooth animations for a sophisticated appearance.
+handler: theme.onyx
+data-controller: theme-onyx
+---

-## Overview
+## <i class="fa-solid fa-gem"></i> Onyx Theme

 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)
+> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
+> New to PHPFlasher? Check the [installation guide](/installation/) first.

-## Features
+## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup

- **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
+The easiest way to use the Onyx theme is to set it as your **default theme**:

-## Usage
+### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
+
+```php
+<?php // config/flasher.php
+
+return [
+    'default' => 'theme.onyx',  // Make Onyx the default theme
+    
+    'themes' => [
+        'onyx' => [
+            'scripts' => [
+                '/vendor/flasher/themes/onyx.min.js',
+            ],
+            'styles' => [
+                '/vendor/flasher/themes/onyx.min.css',
+            ],
+        ],
+    ],
+];
+```
+
+### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
+
+```yaml
+# config/packages/flasher.yaml
+
+flasher:
+    default: theme.onyx  # Make Onyx the default theme
+    
+    themes:
+        onyx:
+            scripts:
+                - '/vendor/flasher/themes/onyx.min.js'
+            styles:
+                - '/vendor/flasher/themes/onyx.min.css'
+```
+
+### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript

 ```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';
+
+// Or use it for specific notifications
+flasher.success('Your changes have been saved');
 ```

-## Customization
+## <i class="fa-solid fa-palette"></i> Notification Types
+
+Once configured, use standard PHPFlasher methods to create notifications with Onyx styling:
+
+{% assign successMessage = 'Your changes have been saved successfully.' %}
+{% assign errorMessage = 'There was a problem saving your changes.' %}
+{% assign warningMessage = 'This action cannot be undone.' %}
+{% assign infoMessage = 'New features are available.' %}
+
+<script type="text/javascript">
+    messages['#/ onyx types'] = [
+        {
+            handler: 'theme.onyx',
+            type: 'success',
+            message: '{{ successMessage }}',
+            options: { theme: 'onyx' },
+        },
+        {
+            handler: 'theme.onyx',
+            type: 'error',
+            message: '{{ errorMessage }}',
+            options: { theme: 'onyx' },
+        },
+        {
+            handler: 'theme.onyx',
+            type: 'warning',
+            message: '{{ warningMessage }}',
+            options: { theme: 'onyx' },
+        },
+        {
+            handler: 'theme.onyx',
+            type: 'info',
+            message: '{{ infoMessage }}',
+            options: { theme: 'onyx' },
+        }
+    ];
+</script>
+
+### PHP
+
+```php
+#/ onyx types
+
+// With Onyx set as default theme
+flash()->success('{{ successMessage }}');
+flash()->error('{{ errorMessage }}');
+flash()->warning('{{ warningMessage }}');
+flash()->info('{{ infoMessage }}');
+```
+
+### JavaScript
+
+```javascript
+// With Onyx set as default theme
+flasher.success('{{ successMessage }}');
+flasher.error('{{ errorMessage }}');
+flasher.warning('{{ warningMessage }}');
+flasher.info('{{ infoMessage }}');
+```
+
+## <i class="fa-solid fa-brush"></i> Customization
+
+### Using Onyx Theme for Specific Notifications
+
+If Onyx isn't your default theme, you can use it for specific notifications:
+
+#### PHP
+
+```php
+flash()
+    ->use('theme.onyx')
+    ->success('This notification uses Onyx theme.');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('theme.onyx').success('This notification uses Onyx theme.');
+```
+
+### Custom Colors and Appearance

 The Onyx theme uses CSS variables that can be customized to match your brand:

@@ -47,6 +160,7 @@ The Onyx theme uses CSS variables that can be customized to match your brand:
    --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-shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.25); /* Dark mode shadow */
    --onyx-border-radius: 1rem;                  /* Corner roundness */
    
    /* Accent colors */
@@ -57,7 +171,7 @@ The Onyx theme uses CSS variables that can be customized to match your brand:
 }
 ```

-## Structure
+## <i class="fa-solid fa-code"></i> HTML Structure

 The Onyx theme generates notifications with the following HTML structure:

@@ -77,53 +191,40 @@ The Onyx theme generates notifications with the following HTML structure:

 The accent dots are created using CSS pseudo-elements (`::before` and `::after`) rather than being part of the HTML structure.

-## Animation Details
+## <i class="fa-solid fa-lightbulb"></i> Theme Features

-The Onyx theme features a sophisticated entrance animation that combines multiple effects:
+### Design Philosophy

-```css
-@keyframes onyxIn {
-    0% {
-        opacity: 0;
-        transform: translateY(15px);
-        filter: blur(3px);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-        filter: blur(0);
-    }
-}
-```
+The Onyx theme embodies several design principles:

-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
+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

-The animation uses a carefully crafted easing curve (`cubic-bezier(0.16, 1, 0.3, 1)`) for a natural, refined movement.
-
-## Accent Dots Design
+### 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
+- **Top-left dot**: Positioned 10px from the top and left edges
+- **Bottom-right dot**: Positioned 10px from the bottom and right edges
+- **Small size**: Each dot is just 6px in diameter
+- **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
+### Animation Effects

-The Onyx theme features clean, modern typography:
+The Onyx theme features a sophisticated entrance animation that combines multiple effects:

- 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)
+- Notifications fade in from invisible to fully visible
+- They move upward slightly from below their final position
+- They transition from a blurred state to sharp focus

-## Dark Mode
+The animation uses a carefully crafted easing curve for a natural, refined movement.
+
+### Dark Mode

 The dark mode implementation maintains the sophisticated aesthetic while adjusting for low-light environments:

@@ -134,26 +235,18 @@ The dark mode implementation maintains the sophisticated aesthetic while adjusti

 The accent dot colors remain consistent between light and dark modes to maintain brand color recognition.

-## Accessibility Features
+### 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
+The Onyx theme includes several 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
+## <i class="fa-solid fa-browser"></i> Browser Support

 The Onyx theme is compatible with all modern browsers:

@@ -162,5 +255,20 @@ The Onyx theme is compatible with all modern browsers:
 - Safari (latest)
 - Edge (latest)
 - Opera (latest)
+- Mobile browsers on iOS and Android

 No special polyfills or fallbacks are required as the theme uses standard CSS features that are well-supported across browsers.
+
+## <i class="fa-solid fa-gears"></i> Implementation Details
+
+The Onyx theme uses modern web technologies:
+
+- **CSS Variables**: For theme customization and dark mode support
+- **CSS Pseudo-elements**: For creating the accent dots without extra HTML
+- **Box Shadows**: For the floating card appearance
+- **CSS Animations**: For refined entrance effects combining movement and blur
+- **CSS Transitions**: For smooth hover interactions
+- **Progress Bar**: Shows countdown until notification dismissal with type-specific colors
+- **Media Queries**: For responsive design, dark mode, and reduced motion support
+
+All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
@@ -1,43 +1,156 @@
-# PHPFlasher Ruby Theme
+---
+permalink: /theme/ruby/
+title: Ruby Theme
+description: Add vibrant notifications with rich gradient backgrounds to your application using the Ruby theme for PHPFlasher. Featuring an elegant shine animation, circular icons, and gemstone-like appearance.
+handler: theme.ruby
+data-controller: theme-ruby
+---

-## Overview
+## <i class="fa-solid fa-gem text-red-500"></i> Ruby Theme

 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)
+> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
+> New to PHPFlasher? Check the [installation guide](/installation/) first.

-## Features
+## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup

- **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
+The easiest way to use the Ruby theme is to set it as your **default theme**:

-## Usage
+### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
+
+```php
+<?php // config/flasher.php
+
+return [
+    'default' => 'theme.ruby',  // Make Ruby the default theme
+    
+    'themes' => [
+        'ruby' => [
+            'scripts' => [
+                '/vendor/flasher/themes/ruby.min.js',
+            ],
+            'styles' => [
+                '/vendor/flasher/themes/ruby.min.css',
+            ],
+        ],
+    ],
+];
+```
+
+### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
+
+```yaml
+# config/packages/flasher.yaml
+
+flasher:
+    default: theme.ruby  # Make Ruby the default theme
+    
+    themes:
+        ruby:
+            scripts:
+                - '/vendor/flasher/themes/ruby.min.js'
+            styles:
+                - '/vendor/flasher/themes/ruby.min.css'
+```
+
+### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript

 ```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';
+
+// Or use it for specific notifications
+flasher.success('Your changes have been saved');
 ```

-## Customization
+## <i class="fa-solid fa-palette"></i> Notification Types

-The Ruby theme uses CSS variables that can be customized:
+Once configured, use standard PHPFlasher methods to create notifications with Ruby styling:
+
+{% assign successMessage = 'Your changes have been saved successfully.' %}
+{% assign errorMessage = 'There was a problem saving your changes.' %}
+{% assign warningMessage = 'This action cannot be undone.' %}
+{% assign infoMessage = 'New features are available.' %}
+
+<script type="text/javascript">
+    messages['#/ ruby types'] = [
+        {
+            handler: 'theme.ruby',
+            type: 'success',
+            message: '{{ successMessage }}',
+            options: { theme: 'ruby' },
+        },
+        {
+            handler: 'theme.ruby',
+            type: 'error',
+            message: '{{ errorMessage }}',
+            options: { theme: 'ruby' },
+        },
+        {
+            handler: 'theme.ruby',
+            type: 'warning',
+            message: '{{ warningMessage }}',
+            options: { theme: 'ruby' },
+        },
+        {
+            handler: 'theme.ruby',
+            type: 'info',
+            message: '{{ infoMessage }}',
+            options: { theme: 'ruby' },
+        }
+    ];
+</script>
+
+### PHP
+
+```php
+#/ ruby types
+
+// With Ruby set as default theme
+flash()->success('{{ successMessage }}');
+flash()->error('{{ errorMessage }}');
+flash()->warning('{{ warningMessage }}');
+flash()->info('{{ infoMessage }}');
+```
+
+### JavaScript
+
+```javascript
+// With Ruby set as default theme
+flasher.success('{{ successMessage }}');
+flasher.error('{{ errorMessage }}');
+flasher.warning('{{ warningMessage }}');
+flasher.info('{{ infoMessage }}');
+```
+
+## <i class="fa-solid fa-brush"></i> Customization
+
+### Using Ruby Theme for Specific Notifications
+
+If Ruby isn't your default theme, you can use it for specific notifications:
+
+#### PHP
+
+```php
+flash()
+    ->use('theme.ruby')
+    ->success('This notification uses Ruby theme.');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('theme.ruby').success('This notification uses Ruby theme.');
+```
+
+### Custom Colors and Appearance
+
+The Ruby theme uses CSS variables that can be customized to match your brand:

 ```css
 :root {
@@ -54,7 +167,7 @@ The Ruby theme uses CSS variables that can be customized:
 }
 ```

-## Structure
+## <i class="fa-solid fa-code"></i> HTML Structure

 The Ruby theme generates notifications with the following HTML structure:

@@ -76,57 +189,11 @@ The Ruby theme generates notifications with the following HTML structure:
 </div>
 ```

-## Animation Details
+This structure includes the shine element that creates the gemstone-like reflection animation and the circular icon container that's distinctive to this theme.

-The Ruby theme features two distinctive animations:
+## <i class="fa-solid fa-lightbulb"></i> Theme Features

-### 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
+### Gradient Design

 The theme uses rich, vibrant gradients that flow from a deeper shade to a brighter one:

@@ -137,7 +204,19 @@ The theme uses rich, vibrant gradients that flow from a deeper shade to a bright

 All gradients are angled at 135 degrees, creating a consistent diagonal flow across all notification types.

-## Icon Container Design
+### Shine Animation
+
+The Ruby theme features a distinctive shine animation that mimics light reflecting off a gemstone surface:
+
+- A moving highlight travels across the notification from left to right
+- 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
+
+This animation adds a premium, dynamic quality to the notifications that draws the user's attention.
+
+### Circular Icon Container

 The circular icon container uses:
 - Semi-transparent white background (25% opacity)
@@ -147,33 +226,15 @@ The circular icon container uses:

 This creates a subtle but distinctive visual element that helps identify the notification type.

-## Progress Bar
+### Animation Effects

-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
+In addition to the shine animation, the Ruby theme includes:

-## Close Button Design
+- **Entrance Animation**: A smooth scale-up from 96% to 100% combined with a fade-in
+- **Close Button Interactions**: Scale and opacity changes on hover
+- **Progress Bar Animation**: A fluid countdown indicator

-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
+### Design Philosophy

 The Ruby theme embodies a premium, attention-grabbing design philosophy:
 1. **Vibrance**: Rich, saturated colors that stand out
@@ -182,7 +243,18 @@ The Ruby theme embodies a premium, attention-grabbing design philosophy:
 4. **Polish**: Refined animations and hover states reflect a premium quality
 5. **Legibility**: Despite the colorful backgrounds, text remains highly readable

-## Browser Support
+### Accessibility Features
+
+The Ruby theme includes several 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
+
+## <i class="fa-solid fa-browser"></i> Browser Support

 The Ruby theme is compatible with all modern browsers:

@@ -191,5 +263,20 @@ The Ruby theme is compatible with all modern browsers:
 - Safari (latest)
 - Edge (latest)
 - Opera (latest)
+- Mobile browsers on iOS and Android

 The gradient backgrounds and animations are well-supported across modern browsers, requiring no special fallbacks.
+
+## <i class="fa-solid fa-gears"></i> Implementation Details
+
+The Ruby theme uses modern web technologies:
+
+- **CSS Variables**: For theme customization
+- **CSS Gradients**: For rich, vibrant backgrounds
+- **CSS Animations**: For shine effect and entrance animations
+- **CSS Transitions**: For smooth hover interactions
+- **Box Shadows**: For depth and premium feel
+- **SVG Icons**: For crisp, scalable notification type indicators
+- **Media Queries**: For responsive design, dark mode, and reduced motion support
+
+All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
@@ -1,43 +1,156 @@
-# PHPFlasher Sapphire Theme
+---
+permalink: /theme/sapphire/
+title: Sapphire Theme
+description: Add modern, glassmorphic notifications to your application with the Sapphire theme for PHPFlasher. Featuring a blurred backdrop effect, minimal interface, and subtle animations.
+handler: theme.sapphire
+data-controller: theme-sapphire
+---

-## Overview
+## <i class="fa-solid fa-gem text-blue-500"></i> Sapphire Theme

 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)
+> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
+> New to PHPFlasher? Check the [installation guide](/installation/) first.

-## Features
+## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup

- **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
+The easiest way to use the Sapphire theme is to set it as your **default theme**:

-## Usage
+### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
+
+```php
+<?php // config/flasher.php
+
+return [
+    'default' => 'theme.sapphire',  // Make Sapphire the default theme
+    
+    'themes' => [
+        'sapphire' => [
+            'scripts' => [
+                '/vendor/flasher/themes/sapphire.min.js',
+            ],
+            'styles' => [
+                '/vendor/flasher/themes/sapphire.min.css',
+            ],
+        ],
+    ],
+];
+```
+
+### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
+
+```yaml
+# config/packages/flasher.yaml
+
+flasher:
+    default: theme.sapphire  # Make Sapphire the default theme
+    
+    themes:
+        sapphire:
+            scripts:
+                - '/vendor/flasher/themes/sapphire.min.js'
+            styles:
+                - '/vendor/flasher/themes/sapphire.min.css'
+```
+
+### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript

 ```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';
+
+// Or use it for specific notifications
+flasher.success('Your changes have been saved');
 ```

-## Customization
+## <i class="fa-solid fa-palette"></i> Notification Types

-The Sapphire theme uses CSS variables that can be customized:
+Once configured, use standard PHPFlasher methods to create notifications with Sapphire styling:
+
+{% assign successMessage = 'Your changes have been saved successfully.' %}
+{% assign errorMessage = 'There was a problem saving your changes.' %}
+{% assign warningMessage = 'This action cannot be undone.' %}
+{% assign infoMessage = 'New features are available.' %}
+
+<script type="text/javascript">
+    messages['#/ sapphire types'] = [
+        {
+            handler: 'theme.sapphire',
+            type: 'success',
+            message: '{{ successMessage }}',
+            options: { theme: 'sapphire' },
+        },
+        {
+            handler: 'theme.sapphire',
+            type: 'error',
+            message: '{{ errorMessage }}',
+            options: { theme: 'sapphire' },
+        },
+        {
+            handler: 'theme.sapphire',
+            type: 'warning',
+            message: '{{ warningMessage }}',
+            options: { theme: 'sapphire' },
+        },
+        {
+            handler: 'theme.sapphire',
+            type: 'info',
+            message: '{{ infoMessage }}',
+            options: { theme: 'sapphire' },
+        }
+    ];
+</script>
+
+### PHP
+
+```php
+#/ sapphire types
+
+// With Sapphire set as default theme
+flash()->success('{{ successMessage }}');
+flash()->error('{{ errorMessage }}');
+flash()->warning('{{ warningMessage }}');
+flash()->info('{{ infoMessage }}');
+```
+
+### JavaScript
+
+```javascript
+// With Sapphire set as default theme
+flasher.success('{{ successMessage }}');
+flasher.error('{{ errorMessage }}');
+flasher.warning('{{ warningMessage }}');
+flasher.info('{{ infoMessage }}');
+```
+
+## <i class="fa-solid fa-brush"></i> Customization
+
+### Using Sapphire Theme for Specific Notifications
+
+If Sapphire isn't your default theme, you can use it for specific notifications:
+
+#### PHP
+
+```php
+flash()
+    ->use('theme.sapphire')
+    ->success('This notification uses Sapphire theme.');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('theme.sapphire').success('This notification uses Sapphire theme.');
+```
+
+### Custom Colors and Appearance
+
+The Sapphire theme uses CSS variables that can be customized to match your brand:

 ```css
 :root {
@@ -45,6 +158,8 @@ The Sapphire theme uses CSS variables that can be customized:
    --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 */
+    --sapphire-border-radius: 12px;               /* Corner roundness */
+    --sapphire-blur: 12px;                        /* Backdrop blur amount */
    
    /* Progress bar colors */
    --sapphire-progress-bg: rgba(255, 255, 255, 0.2);  /* Progress background */
@@ -58,7 +173,7 @@ The Sapphire theme uses CSS variables that can be customized:
 }
 ```

-## Structure
+## <i class="fa-solid fa-code"></i> HTML Structure

 The Sapphire theme generates notifications with the following HTML structure:

@@ -75,49 +190,18 @@ The Sapphire theme generates notifications with the following HTML structure:

 Note that unlike most themes, Sapphire intentionally omits a close button and icons for a more streamlined appearance.

-## Animation Details
+## <i class="fa-solid fa-lightbulb"></i> Theme Features

-The Sapphire theme features a distinctive bounce animation for a more dynamic entrance:
+### Glassmorphic Design

-```css
-@keyframes sapphireIn {
-    0% {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    60% {
-        transform: translateY(-3px);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-```
+The Sapphire theme implements the popular glassmorphism design trend with a semi-transparent background and backdrop blur that creates a frosted glass effect where:

-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
+### Minimalist Approach

 Unlike many notification themes, Sapphire takes a distinctly minimalist approach:

@@ -129,33 +213,36 @@ Unlike many notification themes, Sapphire takes a distinctly minimalist approach

 This approach reduces visual noise and creates a more elegant, unobtrusive notification experience.

-## Color System
+### Animation Effects

-The Sapphire theme uses a sophisticated color system:
+The Sapphire theme features a distinctive bounce animation for a more dynamic 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 that enhances the natural feel of the motion.
+
+### Color System
+
+The 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
+### Accessibility Features

-The theme prioritizes clean, modern typography:
+The Sapphire theme includes several accessibility features:

- 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
+- **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
+## <i class="fa-solid fa-browser"></i> Browser Support

 The Sapphire theme is compatible with all modern browsers:

@@ -164,15 +251,24 @@ The Sapphire theme is compatible with all modern browsers:
 - Safari (latest)
 - Edge (latest)
 - Opera (latest)
+- Mobile browsers on iOS and Android

 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
+## <i class="fa-solid fa-gears"></i> Implementation Details
+
+The Sapphire theme uses modern web technologies:
+
+- **CSS Variables**: For theme customization
+- **Backdrop Filter**: For the frosted glass effect
+- **CSS Animations**: For the bounce entrance effect
+- **CSS Transitions**: For smooth progress bar animation
+- **Media Queries**: For responsive design and reduced motion support
+
+All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.

 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.
@@ -1,40 +1,154 @@
-# PHPFlasher Slack Theme
+---
+permalink: /theme/slack/
+title: Slack Theme
+description: Add Slack-style notifications to your application with the Slack theme for PHPFlasher. Featuring message bubbles with colored avatars, clean typography, and interactive hover effects.
+handler: theme.slack
+data-controller: theme-slack
+---

-## Overview
+## <i class="fa-brands fa-slack"></i> Slack Theme

 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)
+> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
+> New to PHPFlasher? Check the [installation guide](/installation/) first.

-## Features
+## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup

- **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
+The easiest way to use the Slack theme is to set it as your **default theme**:

-## Usage
+### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
+
+```php
+<?php // config/flasher.php
+
+return [
+    'default' => 'theme.slack',  // Make Slack the default theme
+    
+    'themes' => [
+        'slack' => [
+            'scripts' => [
+                '/vendor/flasher/themes/slack.min.js',
+            ],
+            'styles' => [
+                '/vendor/flasher/themes/slack.min.css',
+            ],
+        ],
+    ],
+];
+```
+
+### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
+
+```yaml
+# config/packages/flasher.yaml
+
+flasher:
+    default: theme.slack  # Make Slack the default theme
+    
+    themes:
+        slack:
+            scripts:
+                - '/vendor/flasher/themes/slack.min.js'
+            styles:
+                - '/vendor/flasher/themes/slack.min.css'
+```
+
+### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript

 ```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';
+
+// Or use it for specific notifications
+flasher.success('Your file was uploaded successfully');
 ```

-## Customization
+## <i class="fa-solid fa-palette"></i> Notification Types
+
+Once configured, use standard PHPFlasher methods to create notifications with Slack styling:
+
+{% assign successMessage = 'Your file was uploaded successfully.' %}
+{% assign errorMessage = 'Unable to connect to the server.' %}
+{% assign warningMessage = 'Your session will expire soon.' %}
+{% assign infoMessage = 'New comments on your post.' %}
+
+<script type="text/javascript">
+    messages['#/ slack types'] = [
+        {
+            handler: 'theme.slack',
+            type: 'success',
+            message: '{{ successMessage }}',
+            options: { theme: 'slack' },
+        },
+        {
+            handler: 'theme.slack',
+            type: 'error',
+            message: '{{ errorMessage }}',
+            options: { theme: 'slack' },
+        },
+        {
+            handler: 'theme.slack',
+            type: 'warning',
+            message: '{{ warningMessage }}',
+            options: { theme: 'slack' },
+        },
+        {
+            handler: 'theme.slack',
+            type: 'info',
+            message: '{{ infoMessage }}',
+            options: { theme: 'slack' },
+        }
+    ];
+</script>
+
+### PHP
+
+```php
+#/ slack types
+
+// With Slack set as default theme
+flash()->success('{{ successMessage }}');
+flash()->error('{{ errorMessage }}');
+flash()->warning('{{ warningMessage }}');
+flash()->info('{{ infoMessage }}');
+```
+
+### JavaScript
+
+```javascript
+// With Slack set as default theme
+flasher.success('{{ successMessage }}');
+flasher.error('{{ errorMessage }}');
+flasher.warning('{{ warningMessage }}');
+flasher.info('{{ infoMessage }}');
+```
+
+## <i class="fa-solid fa-brush"></i> Customization
+
+### Using Slack Theme for Specific Notifications
+
+If Slack isn't your default theme, you can use it for specific notifications:
+
+#### PHP
+
+```php
+flash()
+    ->use('theme.slack')
+    ->success('This notification uses Slack theme.');
+```
+
+#### JavaScript
+
+```javascript
+flasher.use('theme.slack').success('This notification uses Slack theme.');
+```
+
+### Custom Colors and Appearance

 The Slack theme uses CSS variables that can be customized to match your brand while maintaining the Slack-like appearance:

@@ -46,6 +160,7 @@ The Slack theme uses CSS variables that can be customized to match your brand wh
    --slack-text-light: #1d1c1d;                /* Light mode text */
    --slack-text-dark: #e0e0e0;                 /* Dark mode text */
    --slack-border-light: #e0e0e0;              /* Light mode border */
+    --slack-border-dark: #393a3e;               /* Dark mode border */
    --slack-avatar-size: 36px;                  /* Avatar size */
    
    /* Type colors */
@@ -56,7 +171,7 @@ The Slack theme uses CSS variables that can be customized to match your brand wh
 }
 ```

-## Structure
+## <i class="fa-solid fa-code"></i> HTML Structure

 The Slack theme generates notifications with the following HTML structure:

@@ -78,9 +193,11 @@ The Slack theme generates notifications with the following HTML structure:
 </div>
 ```

-## Design Details
+This structure mirrors Slack's message layout with an avatar container, message content, and action button.

-### Message Bubble
+## <i class="fa-solid fa-lightbulb"></i> Theme Features
+
+### Message Bubble Design

 The main container follows Slack's message styling:
 - White background (#ffffff) in light mode
@@ -100,21 +217,6 @@ Each notification type has a colored square avatar:

 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:
@@ -124,7 +226,22 @@ The close button appears on hover:
 - Changes color on hover (from #616061 to #1d1c1d)
 - Has a subtle background on hover (#f8f8f8)

-## Dark Mode
+### Animation Effects
+
+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
+
+### 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
+
+### Dark Mode

 The dark mode implementation closely matches Slack's dark theme:
 - Background: #1a1d21 (Slack's dark mode color)
@@ -134,40 +251,45 @@ The dark mode implementation closely matches Slack's dark theme:

 The avatar colors remain consistent between light and dark modes to maintain clear visual indicators.

-## Accessibility Features
+### 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
+The Slack theme includes several 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**: Complete right-to-left language support with properly flipped layout

-## RTL Support
+## <i class="fa-solid fa-browser"></i> Browser 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
+The Slack theme is compatible with all modern browsers:

-## Font Considerations
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Opera (latest)
+- Mobile browsers on iOS and Android
+
+The theme uses standard CSS features that are well-supported across browsers, ensuring a consistent experience for all users.
+
+## <i class="fa-solid fa-gears"></i> Implementation Details
+
+The Slack theme uses modern web technologies:
+
+- **CSS Variables**: For theme customization and dark mode support
+- **CSS Flexbox**: For proper message layout and alignment
+- **CSS Transitions**: For smooth hover interactions
+- **SVG Icons**: For the close button and notification type indicators
+- **Media Queries**: For responsive design, dark mode, and reduced motion support
+
+All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.

 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.
@@ -2,13 +2,14 @@
 module.exports = {
    content: [
        // Source files only
+        './_site/**/*.{html,js}',
        './docs/**/*.{html,md}',
        './_includes/**/*.html',
        './_layouts/**/*.html',
        './assets/**/*.{js,pcss}',

        // Explicit exclusions
-        '!./_site/**', // Jekyll output directory
+        // '!./_site/**', // Jekyll output directory
        '!./node_modules/**', // Already excluded, but keeping it explicit
        '!./dist/**', // Webpack output
    ],
				`@@ -1 +0,0 @@`
				`"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs\|\|[]).push([[411],{9792:function(s,e,c){c.r(e)}}]);`
				`@@ -0,0 +1 @@`
				`"use strict";(self.webpackChunk_flasher_docs=self.webpackChunk_flasher_docs\|\|[]).push([[411],{792:function(s,e,c){c.r(e)}}]);`