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

Facebook Theme

Familiar social media notification style

Configuration

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

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

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

Theme Usage

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

Key Features

Visual Design

  • Rounded notification cards with subtle drop shadows
  • Circular colored icons for each notification type
  • Facebook's signature typography and color scheme
  • Timestamp display showing when notifications were created
  • Interactive elements with familiar hover states

Accessibility

  • Type-specific ARIA roles for screen readers
  • Appropriate aria-live regions based on message importance
  • Reduced motion support for users with motion sensitivity
  • Fully keyboard accessible interactive elements
  • Color contrast optimized for readability while maintaining Facebook's look
  • Descriptive aria-labels for all controls

Customization

CSS Variables

:root {
  /* Base colors */
  --fb-bg-light: #ffffff;                  /* Light mode background */
  --fb-bg-dark: #242526;                   /* Dark mode background */
  --fb-text-light: #050505;                /* Light mode primary text */
  --fb-text-secondary-light: #65676b;      /* Light mode secondary text */
  --fb-text-dark: #e4e6eb;                 /* Dark mode primary text */
  --fb-text-secondary-dark: #b0b3b8;       /* Dark mode secondary text */
  --fb-hover-light: #f0f2f5;               /* Light mode hover state */
  --fb-hover-dark: #3a3b3c;                /* Dark mode hover state */
  
  /* Type colors */
  --fb-success: #31a24c;                   /* Success color */
  --fb-info: #1876f2;                      /* Info color (Facebook blue) */
  --fb-warning: #f7b928;                   /* Warning color */
  --fb-error: #e41e3f;                     /* Error color */
}

HTML Structure

<div class="fl-facebook fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
    <div class="fl-fb-notification">
        <div class="fl-icon-container">
            <div class="fl-fb-icon fl-fb-icon-[type]">
                <!-- SVG icon -->
            </div>
        </div>
        <div class="fl-content">
            <div class="fl-message">Message text</div>
            <div class="fl-meta">
                <span class="fl-time">15:43</span>
            </div>
        </div>
        <div class="fl-actions">
            <button class="fl-button fl-close" aria-label="Close [type] message">
                <div class="fl-button-icon">
                    <!-- Close SVG icon -->
                </div>
            </button>
        </div>
    </div>
</div>

Browser Support

Chrome
Firefox
Safari
Edge
Mobile
Dark