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! Thank you
Star

Neon Theme

Elegant notifications with subtle glowing accents

Data has been saved successfully!
Welcome back!

Configuration

// config/flasher.php

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

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

Usage

When theme.neon is set as your default theme: 
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

: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 */
}