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

Onyx Theme

Modern, floating notifications with elegant details

Data has been saved successfully!
Welcome back!

Configuration

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

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

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

Theme Usage

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

Key Features

Visual Design

  • Sophisticated floating card design with elegant shadows
  • Distinctive colored accent dots in corners to indicate notification type
  • Clean, minimalist appearance focusing on content clarity
  • Refined entrance animation combining fade, movement and focus effects
  • Generous spacing and rounded corners (1rem radius) for a contemporary look

Accessibility

  • Type-specific ARIA roles for screen readers
  • Appropriate aria-live regions based on message importance
  • Reduced motion option for users with motion sensitivity
  • Colored dots provide type indication without relying solely on color
  • Fully keyboard accessible close button with visual feedback
  • High contrast between text and background in both light and dark modes

Customization

CSS Variables

:root {
  /* Base appearance */
  --onyx-bg-light: #ffffff;                    /* Light mode background */
  --onyx-bg-dark: #1e1e1e;                     /* Dark mode background */
  --onyx-text-light: #333333;                  /* Light mode text */
  --onyx-text-dark: #f5f5f5;                   /* Dark mode text */
  --onyx-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); /* Light mode shadow */
  --onyx-shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.25); /* Dark mode shadow */
  --onyx-border-radius: 1rem;                  /* Corner roundness */
  
  /* Accent colors */
  --onyx-success: #10b981;                     /* Success color */
  --onyx-info: #3b82f6;                        /* Info color */
  --onyx-warning: #f59e0b;                     /* Warning color */
  --onyx-error: #ef4444;                       /* Error color */
}

HTML Structure

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