Drupal is a registered trademark of Dries Buytaert
drupal 11.3.7 — Update released for Drupal core (11.3.7)! drupal 11.2.11 — Update released for Drupal core (11.2.11)! drupal 10.6.7 — Update released for Drupal core (10.6.7)! drupal 10.5.9 — Update released for Drupal core (10.5.9)! cms 2.1.1 — Update released for Drupal core (2.1.1)! drupal 11.3.6 — Update released for Drupal core (11.3.6)! drupal 10.6.6 — Update released for Drupal core (10.6.6)! cms 2.1.0 — Update released for Drupal core (2.1.0)! bootstrap 8.x-3.40 — Minor update available for theme bootstrap (8.x-3.40). menu_link_attributes 8.x-1.7 — Minor update available for module menu_link_attributes (8.x-1.7). leaflet 10.4.5 — Minor update available for module leaflet (10.4.5). eca 3.1.1 — Minor update available for module eca (3.1.1). layout_paragraphs 2.1.3 — Minor update available for module layout_paragraphs (2.1.3). ai 1.3.3 — Minor update available for module ai (1.3.3). ai 1.2.14 — Minor update available for module ai (1.2.14). node_revision_delete 2.0.3 — Minor update available for module node_revision_delete (2.0.3). moderated_content_bulk_publish 2.0.52 — Minor update available for module moderated_content_bulk_publish (2.0.52). klaro 3.0.10 — Minor update available for module klaro (3.0.10). klaro 3.0.9 — Minor update available for module klaro (3.0.9). layout_paragraphs 2.1.2 — Minor update available for module layout_paragraphs (2.1.2).
← All modules

cosesi

No security coverage
View on drupal.org

The Color Scheme Switcher module provides a frontend API and a ready-made block to let visitors switch between Light, System (Auto), and Dark color schemes on a Drupal 11 site — without a page reload.

Features

  • Injects an inline <style> tag early in <head> to set the CSS color-scheme property on :root, minimising flash-of-unstyled-content.
  • Adds a configurable CSS class to the <html> element (e.g. color-scheme-dark) so themes can target the active scheme with plain CSS selectors.
  • Persists the visitor's choice in localStorage so it survives page loads and hard refreshes.
  • Optionally hides elements with a "hide class" (e.g. color-scheme-only-dark) when the opposite scheme is active — useful for scheme-specific images or banners.
  • Ships a placeable block with two widget types: Buttons (one per state) and Dropdown.
  • All CSS variable names and HTML classes are configurable per active frontend theme.

Use this module when you want visitors to manually override the system color-scheme
preference and the active theme applies styles via the CSS color-scheme
property or HTML classes on <html>.

Post-Installation

  1. Go to Administration → Configuration → Color Scheme Switcher (/admin/config/cosesi/theme-settings) and configure the CSS variable name and the HTML classes for each active frontend theme.
  2. Go to Administration → Structure → Block layout and place the Color Scheme Switcher block in a region of the active theme. In the block settings choose the widget type (Buttons or Dropdown) and the per-state labels and icon sizes.
  3. Export the new cosesi.theme_settings config with the rest of the site config.

Additional Requirements

  • PHP >=8.4
  • Drupal ^11.3
  • A frontend theme that applies styles based on the color-scheme CSS property or the HTML classes configured in the module settings.

Recommended modules/libraries

No additional modules are required.

Similar projects

  • Dark Mode Switch — provides a toggle for dark/light mode but does not expose a three-state (Light / System / Dark) API or per-theme CSS class configuration.

Known issues and limitations

Activity

Total releases
2
First release
Apr 2026
Latest release
20 hours ago
Release cadence
0 days
Stability
0% stable

Releases

Version Type Release date
1.x-dev Dev Apr 19, 2026
1.0.0-alpha1 Pre-release Apr 19, 2026