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

Sapphire Theme

Modern, glassmorphic notification system

Data has been saved successfully!
Welcome back!

Configuration

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

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

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

Theme Usage

When theme.sapphire is set as your default theme, you can call methods directly. 
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

CSS Variables

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

HTML Structure

<div class="fl-sapphire fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
    <div class="fl-content">
        <span class="fl-message">Message text</span>
    </div>
    <div class="fl-progress-bar">
        <div class="fl-progress"></div>
    </div>
</div>

Browser Support

Chrome
Firefox
Safari
Edge
Mobile
Dark