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

Jade Theme

Calm, minimalist notification system

Data has been saved successfully!
Welcome back!

Configuration

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

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

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

Theme Usage

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

Key Features

Visual Design

  • Soft, pastel colors with generous padding for a calm appearance
  • Rounded corners (1rem radius) creating a gentle, friendly feel
  • Refined entrance animation combining fade, scaling and movement
  • Clean design that emphasizes content without unnecessary elements

Accessibility

  • Type-specific ARIA roles for screen readers
  • Appropriate aria-live regions based on message importance
  • Reduced motion option for users with motion sensitivity
  • High contrast between background and text colors
  • Fully keyboard accessible close button with visual feedback
  • Descriptive aria-labels for interactive elements

Customization

CSS Variables

:root {
  /* Base appearance */
  --jade-text-light: #5f6c7b;                /* Text color in light mode */
  --jade-text-dark: #e2e8f0;                 /* Text color in dark mode */
  --jade-border-radius: 1rem;                /* Corner roundness */
  
  /* Type-specific colors - Light mode */
  --jade-success-bg: #f0fdf4;                /* Success background */
  --jade-success-color: #16a34a;             /* Success text/accent */
  --jade-info-bg: #eff6ff;                   /* Info background */
  --jade-info-color: #3b82f6;                /* Info text/accent */
  --jade-warning-bg: #fffbeb;                /* Warning background */
  --jade-warning-color: #f59e0b;             /* Warning text/accent */
  --jade-error-bg: #fef2f2;                  /* Error background */
  --jade-error-color: #dc2626;               /* Error text/accent */
  
  /* Dark mode backgrounds */
  --jade-success-bg-dark: rgba(22, 163, 74, 0.15);  /* Dark mode success */
  --jade-info-bg-dark: rgba(59, 130, 246, 0.15);    /* Dark mode info */
  --jade-warning-bg-dark: rgba(245, 158, 11, 0.15); /* Dark mode warning */
  --jade-error-bg-dark: rgba(220, 38, 38, 0.15);    /* Dark mode error */
}

HTML Structure

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