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

iOS Theme

Apple-style notification system

Success
4:32 AM
Data has been saved successfully!
Info
4:32 AM
Welcome back!

Configuration

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

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

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

Theme Usage

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

Key Features

Visual Design

  • Apple's signature frosted glass backdrop effect
  • App icon design with colored backgrounds
  • Real-time timestamp display in iOS format
  • Smooth entrance and content expansion animations
  • Adaptive design that matches iOS light and dark mode

Accessibility

  • Type-specific ARIA roles for screen readers
  • Appropriate aria-live regions based on message importance
  • Reduced motion option for motion-sensitive users
  • High contrast text that adapts to light and dark modes
  • Fully keyboard accessible close button
  • Mobile-optimized responsive layout

Customization

CSS Variables

:root {
  /* Base appearance */
  --ios-bg-light: rgba(255, 255, 255, 0.85);  /* Light mode background */
  --ios-bg-dark: rgba(30, 30, 30, 0.85);      /* Dark mode background */
  --ios-text-light: #000000;                  /* Light mode text */
  --ios-text-secondary-light: #6e6e6e;        /* Light mode secondary text */
  --ios-text-dark: #ffffff;                   /* Dark mode text */
  --ios-text-secondary-dark: #a0a0a0;         /* Dark mode secondary text */
  --ios-border-radius: 13px;                  /* Corner radius */
  --ios-blur: 30px;                           /* Backdrop blur amount */
  
  /* Type colors - based on iOS system colors */
  --ios-success: #34c759;                     /* iOS green */
  --ios-info: #007aff;                        /* iOS blue */
  --ios-warning: #ff9500;                     /* iOS orange */
  --ios-error: #ff3b30;                       /* iOS red */
}

HTML Structure

<div class="fl-ios fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
    <div class="fl-ios-notification">
        <div class="fl-header">
            <div class="fl-app-icon">
                <!-- SVG icon -->
            </div>
            <div class="fl-app-info">
                <div class="fl-app-name">App Name/Title</div>
                <div class="fl-time">2025-03-10 00:14:11</div>
            </div>
        </div>
        <div class="fl-content">
            <div class="fl-message">Message text</div>
        </div>
        <button class="fl-close" aria-label="Close [type] message">
            <span aria-hidden="true">×</span>
        </button>
    </div>
</div>

Browser Support

Chrome
Firefox
Safari
Edge
Mobile
Dark