Dark Mode Support

Published at 01 June 2022

If you like PHPFlasher please consider giving it a on github or by spreading the word on twitter. Your support allows me to keep this package up-to-date and maintainable. 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">

or

<!-- 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">

or

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

PHPFlasher is a project by Younes KHOUBZA.