Palestinian Flag Solidarity with Palestine. We seek justice and peace, and strongly oppose all forms of injustice and genocide.
PHPFlasher
Enjoying PHPFlasher? Show your support with a star on GitHub! It helps others discover this tool and motivates us to keep improving it. Thank you
Star

Emerald Theme

Elegant glass-like notifications with bounce effect

Data has been saved successfully!
Welcome back!

Configuration

Setting as Default in Laravel 
// config/flasher.php

return [
    'default' => 'theme.emerald',

    'themes' => [
        'emerald' => [
            'scripts' => [
                '/vendor/flasher/themes/theme.emerald.min.js',
            ],
            'styles' => [
                '/vendor/flasher/themes/theme.emerald.min.css',
            ],
        ],
    ],
];

Theme Usage

When theme.emerald is set as your default theme, you can call methods directly. 
flash()->success('Your changes have been saved!');
For specific notifications 
flash()->use('theme.emerald')->success('This uses Emerald Theme');

Key Features

Visual Design

  • Distinctive bounce animation for eye-catching entrance
  • Glass-like translucent background with blur effect
  • Minimalist design focusing on content clarity
  • Colored text indicators instead of backgrounds for elegance

Accessibility

  • Type-specific ARIA roles for screen readers
  • Appropriate aria-live regions based on message importance
  • Reduced motion option for users with motion sensitivity
  • Relative text sizing that respects user preferences
  • Fully keyboard accessible controls with descriptive labels

Customization

CSS Variables

:root {
  /* Base colors */
  --emerald-bg-light: rgba(255, 255, 255, 0.9);  /* Light background */
  --emerald-bg-dark: rgba(30, 30, 30, 0.9);      /* Dark background */
  --emerald-text-light: #333333;                 /* Light mode text */
  --emerald-text-dark: rgba(255, 255, 255, 0.9); /* Dark mode text */
  --emerald-shadow: rgba(0, 0, 0, 0.1);          /* Shadow color */
  --emerald-blur: 8px;                           /* Blur amount */
  
  /* Type colors */
  --emerald-success: #16a085;                    /* Success color */
  --emerald-error: #e74c3c;                      /* Error color */
  --emerald-warning: #f39c12;                    /* Warning color */
  --emerald-info: #3498db;                       /* Info color */
}

HTML Structure

<div class="fl-emerald fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
    <div class="fl-content">
        <div class="fl-message">Message text</div>
        <button class="fl-close" aria-label="Close [type] message">×</button>
    </div>
</div>

Browser Support

Chrome
Firefox
Safari
Edge
Mobile
Dark