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

Amazon Theme

E-commerce inspired notification system

Success!
Data has been saved successfully!
Information
Welcome back!

Configuration

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

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

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

Theme Usage

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

Key Features

Visual Design

  • Clean, minimal design inspired by Amazon's UI
  • Distinct colors for each notification type
  • Dark mode support with automatic detection
  • Customizable color scheme

Accessibility

  • ARIA roles and live regions for screen readers
  • Keyboard accessible controls
  • High contrast text meeting WCAG 2.1 AA standards
  • Supports reduced motion preferences

Customization

CSS Variables

:root {
  /* Amazon theme colors - Light mode */
  --amazon-success-bg: #f0fff5;       /* Success background */
  --amazon-success-border: #7fda95;   /* Success border */
  --amazon-success-icon: #007600;     /* Success icon color */
  --amazon-info-bg: #f3f9ff;          /* Info background */
  --amazon-info-border: #7fb4da;      /* Info border */
  --amazon-info-icon: #0066c0;        /* Info icon color */
  --amazon-warning-bg: #fffcf3;       /* Warning background */
  --amazon-warning-border: #ffd996;   /* Warning border */
  --amazon-warning-icon: #c45500;     /* Warning icon color */
  --amazon-error-bg: #fff5f5;         /* Error background */
  --amazon-error-border: #ff8f8f;     /* Error border */
  --amazon-error-icon: #c40000;       /* Error icon color */
  
  /* Dark mode colors */
  --amazon-success-bg-dark: #0a3317;
  --amazon-success-border-dark: #2a6e3f;
  --amazon-success-icon-dark: #7fda95;
  --amazon-info-bg-dark: #0a2940;
  --amazon-info-border-dark: #2a5d6e;
  --amazon-info-icon-dark: #7fb4da;
  --amazon-warning-bg-dark: #3d2800;
  --amazon-warning-border-dark: #6e5c2a;
  --amazon-warning-icon-dark: #ffd996;
  --amazon-error-bg-dark: #400a0a;
  --amazon-error-border-dark: #6e2a2a;
  --amazon-error-icon-dark: #ff8f8f;
}

HTML Structure

<div class="fl-amazon fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
    <div class="fl-amazon-alert">
        <div class="fl-alert-content">
            <div class="fl-icon-container">
                <!-- SVG icon -->
            </div>
            <div class="fl-text-content">
                <div class="fl-alert-title">Title</div>
                <div class="fl-alert-message">Message</div>
            </div>
        </div>
        <div class="fl-alert-actions">
            <button class="fl-close" aria-label="Close notification">
                <!-- Close icon -->
            </button>
        </div>
    </div>
</div>

Browser Support

Chrome
Firefox
Safari
Edge
Mobile
Dark