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

Jade Theme

Calm, minimalist notification system

Data has been saved successfully!
Welcome back!

Configuration

// config/flasher.php

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

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

Usage

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

: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 */
}