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

Sapphire Theme

Modern, glassmorphic notification system

Data has been saved successfully!
Welcome back!

Configuration

// config/flasher.php

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

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

Usage

When theme.sapphire is set as your default theme: 
flash()->success('Your changes have been saved!');
For specific notifications: 
flash()->use('theme.sapphire')->success('This uses Sapphire Theme');

Key Features

Visual Design

  • Frosted glass effect with semi-transparent backgrounds and backdrop blur
  • Ultra-minimal interface without close buttons or icons
  • Distinctive bounce animation for a more dynamic entrance
  • Type-specific colored backgrounds with consistent visual language
  • Progress bar showing time until auto-dismissal

Accessibility

  • Type-specific ARIA roles for screen readers
  • Appropriate aria-live regions based on message importance
  • Reduced motion option for users with motion sensitivity
  • High contrast between text and all background colors
  • Complete RTL language support
  • Auto-dismissal with visual progress indicator

Customization

:root {
  /* Base appearance */
  --sapphire-bg-base: rgba(30, 30, 30, 0.9);    /* Base background color */
  --sapphire-text: #f0f0f0;                     /* Text color */
  --sapphire-shadow: rgba(0, 0, 0, 0.15);       /* Shadow color */
  --sapphire-border-radius: 12px;               /* Corner roundness */
  --sapphire-blur: 12px;                        /* Backdrop blur amount */
  
  /* Progress bar colors */
  --sapphire-progress-bg: rgba(255, 255, 255, 0.2);  /* Progress background */
  --sapphire-progress-fill: rgba(255, 255, 255, 0.9); /* Progress fill */
  
  /* Notification type colors */
  --sapphire-success: rgba(16, 185, 129, 0.95); /* Success color */
  --sapphire-error: rgba(239, 68, 68, 0.95);    /* Error color */
  --sapphire-warning: rgba(245, 158, 11, 0.95); /* Warning color */
  --sapphire-info: rgba(59, 130, 246, 0.95);    /* Info color */
}