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

Aurora Theme

Elegant glass-like notification system

Data has been saved successfully!
Welcome back!

Configuration

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

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

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

Theme Usage

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

Key Features

Visual Design

  • Glass-like appearance with translucent backgrounds
  • Subtle gradient overlays for each notification type
  • Modern backdrop blur effect for a frosted glass look
  • Elegant animation combining fade, translation and scale

Accessibility

  • Type-specific ARIA roles for screen readers
  • Appropriate aria-live regions based on message importance
  • Reduced motion adaptation for users with motion sensitivity
  • High contrast maintained despite translucent backgrounds
  • Fully keyboard accessible controls

Customization

CSS Variables

:root {
  /* Base appearance */
  --aurora-bg-light: rgba(255, 255, 255, 0.95);  /* Light background */
  --aurora-bg-dark: rgba(20, 20, 28, 0.92);      /* Dark background */
  --aurora-text-light: #1e293b;                  /* Light mode text */
  --aurora-text-dark: #f8fafc;                   /* Dark mode text */
  --aurora-border-radius: 16px;                  /* Corner radius */
  --aurora-blur: 15px;                           /* Blur amount */
  
  /* Type-specific colors */
  --aurora-success: #10b981;                     /* Success color */
  --aurora-info: #3b82f6;                        /* Info color */
  --aurora-warning: #f59e0b;                     /* Warning color */
  --aurora-error: #ef4444;                       /* Error color */
  
  /* Gradient colors */
  --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%);
}

HTML Structure

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

Browser Support

Chrome
Firefox
Safari
Edge
Mobile
Dark