Skip to main content
Drupal is a registered trademark of Dries Buytaert
Release: OpenID Connect / OAuth client 3.0.0-alpha9 — New alpha version released for module openid_connect (3.0.0-alpha9). Usage Milestone: Google Analytics — Module google_analytics crossed 1,000 active installs. Release: Timelinr 1.0.1 — Minor update available for module timelinr (1.0.1). Release: GraphQL Compose Codegen 1.1.2 — Minor update available for module graphql_compose_codegen (1.1.2). Release: Mapy.com 1.1.3 — Minor update available for module mapycom (1.1.3). Release: Ckeditor5 entity browser 3.0.3 — Minor update available for module ckeditor5_entity_browser (3.0.3). Release: Ckeditor5 entity browser 3.0.1 — Minor update available for module ckeditor5_entity_browser (3.0.1). Release: Ckeditor5 entity browser 3.0.2 — Minor update available for module ckeditor5_entity_browser (3.0.2). Release: Teamleader Integration 4.0.2 — Minor update available for module teamleader (4.0.2). Module Revived: Entityqueue Buttons 1.1.2 — Module entityqueue_buttons updated after 8 months of inactivity (1.1.2).

Dark Mode Toggle

1,536 sites Security covered Drupal 11 · not 10
View on drupal.org

This module provides a block that allows website visitors to easily switch between light and dark modes, or follow their system's preference, with their choice remembered across sessions.

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.

Depends on

Dependencies of the latest stable release

No dependencies recorded for this project.

Required by

Tracked projects that depend on this one

No tracked projects depend on this one yet.

Activity

Tracked releases
8
Tracked since
Dec 2024
Latest release
10 months ago
Releases (12 mo)
3 ▼ from 5
Maintenance
Slowing

Release Timeline

Releases

Version Type Core Release date
2.0.1 Stable 11 Oct 9, 2025
2.0.0 Stable 11 Oct 6, 2025
2.x-dev Dev 11 Sep 28, 2025
1.0.0 Stable 10–11 Feb 3, 2025
1.0.0-alpha3 Pre-release 10–11 Jan 2, 2025
1.0.0-alpha2 Pre-release 10–11 Dec 31, 2024
1.0.0-alpha1 Pre-release 10–11 Dec 28, 2024
1.x-dev Dev 10–11 Dec 28, 2024