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

Onyx Theme

Modern, floating notifications with elegant details

Data has been saved successfully!
Welcome back!

Configuration

// config/flasher.php

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

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

Usage

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

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