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

Neon Theme

Elegant notifications with subtle glowing accents

Data has been saved successfully!
Welcome back!

Configuration

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

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

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

Theme Usage

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

Key Features

Visual Design

  • Distinctive floating indicator with subtle glow effect
  • Frosted glass background with backdrop blur
  • Gentle "breathing" animation for the glowing elements
  • Refined entrance animation combining fade and movement
  • Modern typography with clean, readable font

Accessibility

  • Type-specific ARIA roles for screen readers
  • Appropriate aria-live regions based on message importance
  • Reduced motion option disables both entrance and glow animations
  • Fully keyboard accessible close button with visual feedback
  • Both color and position used to indicate notification type
  • Sufficient contrast between text and background

Customization

CSS Variables

:root {
  /* Base appearance */
  --neon-bg-light: rgba(255, 255, 255, 0.9);    /* Light mode background */
  --neon-bg-dark: rgba(15, 23, 42, 0.9);        /* Dark mode background */
  --neon-text-light: #334155;                   /* Light mode text */
  --neon-text-dark: #f1f5f9;                    /* Dark mode text */
  --neon-border-radius: 12px;                   /* Corner roundness */
  
  /* Glow colors */
  --neon-success: #10b981;                      /* Success color */
  --neon-info: #3b82f6;                         /* Info color */
  --neon-warning: #f59e0b;                      /* Warning color */
  --neon-error: #ef4444;                        /* Error color */
  
  /* Glow properties */
  --neon-glow-strength: 10px;                   /* How far the glow extends */
  --neon-blur: 10px;                            /* Backdrop blur amount */
}

HTML Structure

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

Browser Support

Chrome
Firefox
Safari
Edge
Mobile
Dark