Olivero Dark Switch

Ever wanted to view your Drupal site in dark mode but love Olivero too much to give it up? This module adds a Drupal Block with a dark mode toggle themed to blend into Olivero. Simply place the block where you want the toggle on your site to enable optional dark theme!

Features

• Provides a block containing the theme toggle. This block can be configured to float the toggle within the block region.
• Alters Olivero's core CSS variables in order to seamlessly integrate with Olivero's colour picking functionality. More specifically, it reverses any gradient variables with small modifications in order to meet accessibility contrast standards.
• Uses local storage to keep track of the toggle position chosen by a user.
• Detects (prefers-color-scheme: dark) to provide the dark theme to users who have their browser preference set to dark mode.

Post-Installation

Once you have installed this module you will want to place the toggle block somewhere on your site. More Specifically,

1. Go to Admin > Structure > Block Layout (admin/structure/block)
2. Click on "Place Block" beside the region you want to place the dark theme toggle. We suggest "Hero (full width)"
3. Now scroll down to "Olivero Dark Switch" in the list of potential blocks to place and click "Place block" beside it.
4. Turn off "Display title" and set "Float" to "Right" before saving the block.
5. Now go to the home page or any other Olivero themed page in your site and notice the toggle in the top right hand corner!

Additional Requirements

This module does not need any external libraries although it does assume you are using the Drupal Core Olivero theme 😉.

Similar projects

Olivero Dark Mode

This module provides a full dark mode subtheme of Olivero. Note: Drupal core itself does not recommend subthemeing Olivero, specifically because it does not promise backwards compatibility.. This is why my module takes the approach of supplying a block that alters the theme instead.