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

Amber Theme

Modern, elegant notification system

Data has been saved successfully!
Welcome back!

Configuration

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

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

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

Theme Usage

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

Key Features

Visual Design

  • Modern, minimalist design with clean aesthetics
  • Subtle animations and transitions for a refined feel
  • Visual progress bar indicating time before auto-dismiss
  • Automatic dark mode support with elegant color shifts

Accessibility

  • Proper ARIA roles for different notification types
  • Live regions with appropriate assertiveness levels
  • Respects user's reduced motion preferences
  • Fully keyboard accessible controls
  • High contrast text meeting WCAG 2.1 AA standards
  • Descriptive aria-labels for screen readers

Customization

CSS Variables

:root {
  /* Base appearance */
  --amber-bg-light: #ffffff;          /* Light mode background */
  --amber-bg-dark: #1e293b;           /* Dark mode background */
  --amber-text-light: #4b5563;        /* Light mode text */
  --amber-text-dark: #f1f5f9;         /* Dark mode text */
  --amber-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Light mode shadow */
  --amber-border-radius: 0.4rem;      /* Border radius */

  /* Type-specific colors */
  --amber-success: #10b981;           /* Success color */
  --amber-info: #3b82f6;              /* Info color */
  --amber-warning: #f59e0b;           /* Warning color */
  --amber-error: #ef4444;             /* Error color */
  
  /* Dark mode shadows */
  --amber-shadow-dark: 0 5px 15px rgba(0, 0, 0, 0.25);
}

HTML Structure

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