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

Amber Theme

Modern, elegant notification system

Data has been saved successfully!
Welcome back!

Configuration

// config/flasher.php

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

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

Usage

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

: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);
}