Dark Mode | PHPFlasher

If you find PHPFlasher useful, we would greatly appreciate your support in the form of a star rating ⭐ on GitHub or by sharing the project on Twitter click here. Your feedback helps us keep the package up-to-date and well-maintained. Thank you

Dark Mode Support

PHPFlasher supports dark mode to go along with the dark mode of your design.

By default PHPFlasher uses the prefers-color-scheme CSS media query to determine if the user is in dark mode. But you can also use the class strategy if you want to toggle the dark mode manually.

Class Strategy

If you want to support toggling dark mode manually instead of relying on the operating system preference, use the class strategy instead of the media strategy:

For Laravel:

// config/flasher.php
return [
    'default' => 'flasher',
    'themes' => [
        'flasher' => [
            'options' => [
                'darkMode' => 'class',
            ],
        ],
    ],
];

For Symfony:

flasher:
    default: flasher
    themes:
        flasher:
            options:
                darkMode: class

Now instead of relying on the prefers-color-scheme CSS media query, dark mode will be applied whenever .dark class is present earlier in the HTML tree.

To enable dark mode, add dark class to the <html> or <body> tag, as follows:

<!-- Dark mode enabled -->
<html class="dark">

<!-- Dark mode enabled -->
<body class="dark">

Only by adding dark class PHPFlasher will automatically switch to dark mode.

Custom Class name

By default PHPFlasher uses the .dark class to toggle dark mode.

But you can choose your own approach to enabling dark mode and add a different class name when dark mode is active.

You can customize the dark mode selector name by setting darkMode to an array with your custom selector as the second item:

For Laravel:

// config/flasher.php
return [
    'default' => 'flasher',
    'themes' => [
        'flasher' => [
            'options' => [
                'darkMode' => ['class', '[data-mode="dark"]'],
            ],
        ],
    ],
];

For Symfony:

flasher:
    default: flasher
    themes:
        flasher:
            options:
                darkMode: ['class', '[data-mode="dark"]']

And now you can add the [data-mode="dark"] selector to the <html> or <body> tag, as follows:

<!-- Dark mode enabled -->
<html data-mode="dark">

<!-- Dark mode enabled -->
<body data-mode="dark">