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

Material Theme

Minimalist Material Design notifications

Data has been saved successfully!
Welcome back!

Configuration

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

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

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

Theme Usage

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

Key Features

Visual Design

  • Clean card design with proper Material Design elevation
  • Minimalist appearance focusing entirely on message content
  • Interactive elements with signature Material ripple effect
  • Progress bar showing time until auto-dismiss
  • Subtle slide-up entrance animation with Material motion curve

Accessibility

  • ARIA roles specific to each notification type
  • Appropriate aria-live regions based on message importance
  • Reduced motion option for users with motion sensitivity
  • High contrast text meeting WCAG 2.1 AA standards
  • Fully keyboard accessible with clear focus indicators
  • Descriptive aria-labels for interactive elements

Customization

CSS Variables

:root {
  /* Base appearance */
  --md-bg-light: #ffffff;              /* Light mode background */
  --md-bg-dark: #2d2d2d;               /* Dark mode background */
  --md-text-light: rgba(0, 0, 0, 0.87); /* Primary text in light mode */
  --md-text-secondary-light: rgba(0, 0, 0, 0.6); /* Secondary text in light mode */
  --md-text-dark: rgba(255, 255, 255, 0.87); /* Primary text in dark mode */
  --md-text-secondary-dark: rgba(255, 255, 255, 0.6); /* Secondary text in dark mode */
  --md-elevation: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12); /* Card shadow */
  --md-border-radius: 4px;             /* Card corner radius */
  
  /* Type colors - based on Material palette */
  --md-success: #43a047;               /* Green 600 */
  --md-info: #1e88e5;                  /* Blue 600 */
  --md-warning: #fb8c00;               /* Orange 600 */
  --md-error: #e53935;                 /* Red 600 */
  
  /* Animation timing */
  --md-animation-duration: 0.3s;       /* Entrance animation duration */
  --md-ripple-duration: 0.6s;          /* Button ripple effect duration */
}

HTML Structure

<div class="fl-material fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
    <div class="fl-md-card">
        <div class="fl-content">
            <div class="fl-text-content">
                <div class="fl-message">Message text</div>
            </div>
        </div>
        <div class="fl-actions">
            <button class="fl-action-button fl-close" aria-label="Close [type] message">
                DISMISS
            </button>
        </div>
    </div>
    <div class="fl-progress-bar">
        <div class="fl-progress"></div>
    </div>
</div>

Browser Support

Chrome
Firefox
Safari
Edge
Mobile
Dark