Dark Mode Toggle

When your theme supports dark mode, this module provides a block that allows visitors to toggle between the light and dark variants.

The Dark Mode Toggle block features three buttons:

• Light: switches to the light mode.
• Dark: switches to the dark mode.
• System: follows the user's browser preference.

The user's choice is saved in the browser's local storage, so their preference
is remembered when navigating pages, or they return to the site.

When dark mode is preferred, this module sets the data-dmt-mode attribute to dark on the <html> element (or light for light mode). Additionally, a data-dmt-source attribute is added to indicate the source of the dark mode choice, which can either be user or system. It is up to the theme to style the site correctly based on the selected variant.

Note: the 1.0 version of this module applied the dark class to the <html> element. In the 2.0 version of this module, we switched to using data attributes to handle state and behavior.

Post-Installation

To set up the Dark Mode Toggle block, navigate to Administration » Structure » Block layout and place it in one of the available regions. The basic Twig template dark-mode-toggle.html.twig provides the block's content, which can be overridden in a custom theme.

Similar projects

• Darkmode JS, uses the Darkmode.js library to automatically provide dark mode support using the CSS mix-blend-mode. Since colors are automatically computed, you have limited control of the exact styling for the dark variant.
• Dark Mode, switches between two separate themes based on the time of the day.
• Dark Mode Switch, uses a checkbox to toggle a class attribute. However, there is no option to base the dark mode on the system's preference and no countermeasure against FOUC.
• Dark Mode Button, toggle a class attribute to indicate dark mode. The system's preference is not taken into account, and there is no countermeasure against FOUC.