Color Scheme Switcher
A frontend API and configurable block that lets visitors switch between Light, System (Auto), and Dark colour schemes on a Drupal 11 site without a page reload — with localStorage persistence, FOUC prevention, and full CSS variable integration.
Color Scheme Switcher (module machine name: cosesi) provides a complete, framework-agnostic dark mode solution for Drupal 11 themes. It is designed to integrate cleanly with themes that use CSS custom properties for their colour system rather than requiring any specific CSS framework.
The module injects an inline style tag early in the document head to set the CSS color-scheme property on :root, which prevents the flash of unstyled content that typically plagues dark mode implementations when the page first loads. The visitor's choice is persisted in localStorage so it survives page navigation and hard refreshes.
Two widget types are available as a placeable Drupal block: a set of individual buttons (one per state) or a dropdown selector. Both expose light, dark, and system (auto) options. The system option defers to the OS-level preference via the prefers-color-scheme media query.
Themes can target the active scheme using a configurable CSS class added to the html element — for example color-scheme-dark — allowing straightforward CSS overrides. An optional "hide class" feature (e.g. color-scheme-only-dark) can conditionally hide elements that are only appropriate for a specific scheme, such as scheme-specific hero images or banners. All CSS variable names and HTML class names are configurable from the admin UI.
Let’s talk
Ready to stop worrying
about your Drupal site?
Start with a free audit — no commitment, no jargon. Our engineers will review your site and send you a plain-English report within 48 hours.
0207 490 2311 · hello@websitesupport.io