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

Crystal Theme

Clean, monochromatic notification system

Data has been saved successfully!

Welcome back!

Configuration

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

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

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

Theme Usage

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

Key Features

Visual Design

  • Monochromatic design with type-specific colored text
  • Subtle entrance animation with smooth slide-in and fade effects
  • Gentle pulsing shadow on hover creates a "breathing" effect
  • Clean, minimalist interface focused on content clarity

Accessibility

  • Type-appropriate ARIA roles for screen readers
  • Optimized aria-live regions based on message importance
  • Reduced motion adaptation for motion-sensitive users
  • High contrast text for optimal readability
  • Fully keyboard accessible with visual feedback
  • Descriptive aria-labels for interactive elements

Customization

CSS Variables

:root {
  /* Base appearance */
  --crystal-bg-light: #ffffff;                  /* Light mode background */
  --crystal-bg-dark: rgba(30, 30, 30, 0.95);    /* Dark mode background */
  --crystal-text-light: #2c3e50;                /* Light mode text */
  --crystal-text-dark: rgba(255, 255, 255, 0.95); /* Dark mode text */
  --crystal-shadow: rgba(0, 0, 0, 0.08);        /* Light mode shadow */
  --crystal-shadow-dark: rgba(0, 0, 0, 0.25);   /* Dark mode shadow */
  
  /* Type colors (uses default PHPFlasher colors) */
  --fl-success: #10b981;                        /* Success color */
  --fl-info: #3b82f6;                           /* Info color */
  --fl-warning: #f59e0b;                        /* Warning color */
  --fl-error: #ef4444;                          /* Error color */
}

HTML Structure

<div class="fl-crystal fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
    <div class="fl-content">
        <div class="fl-text">
            <p class="fl-message">Message text</p>
        </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