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

Crystal Theme

Clean, monochromatic notification system

Data has been saved successfully!

Welcome back!

Configuration

// config/flasher.php

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

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

Usage

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

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