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

Google Theme

Material Design-inspired notifications

Success
Data has been saved successfully!
Info
Welcome back!

Configuration

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

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

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

Theme Usage

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

Key Features

Visual Design

  • Material Design elevation with three-component shadow system
  • Card-based layout with Google's signature typography
  • Interactive ripple effect for tactile button feedback
  • Progress bar showing time until auto-dismiss
  • Responsive design that adapts to different screen sizes

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-google fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
    <div class="fl-md-card">
        <div class="fl-content">
            <div class="fl-icon-wrapper">
                <!-- SVG icon -->
            </div>
            <div class="fl-text-content">
                <div class="fl-title">Title (if provided)</div>
                <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