Easily turn any stacks page to Dark Mode.
- Add Dark Mode to your stacks pages without writing any code.
- Automatically detects your visitors dark mode preference.
- Remembers dark mode settings between pages & site visits.
- Includes an optional dark mode / light mode toggle switch.
- Easily exclude page elements from changing to dark mode.
How does it work?
The Dark Mode stack uses a media query to detect if the website visitor has requested the page to use a light or dark color theme. If the visitors preference is for a dark color theme, then the page is displayed in Dark Mode. Alternatively, if a light theme is preferred, then the page is viewed normally.
Dark Mode with a difference
This Dark Mode method uses an inversion blend mode called difference, which looks at the color information in each channel and subtracts either the blend color from the base color, or the base color from the blend color, depending on which has the greater brightness value.
If your background color is set to white RGB(255, 255, 255) and your blend color is set to white RGB(255,255,255), the result is a black background. The same principal applies to all other colors on the page, meaning you don't need to go through the process of setting all of your Dark Mode colors individually. View illustration
Will this stack work on my site? If you're using YourHead Stacks and have built, or currently building your site from scratch, then yes it will work. If you're using one of the built-in RapidWeaver themes or a theme bought from a third-party, then no it won't work.
Why should I add Dark Mode to my site? Apart from having a great looking website, research suggests that Dark Mode reduces eye strain, especially at night. Dark Mode also reduces battery usage on mobile devices, so your visitors will thank you for it.
Can I use the same link color in Dark Mode? Yes, any element including text, links and images can be isolated from Dark Mode. You can even isolate entire containers such as header and footer sections.
Do I need to add a toggle switch to view the page in Dark Mode? No, the Dark Mode stack works right out of the box to detect the visitors preference for light or dark mode, and will switch modes accordingly. A toggle switch is only used if you want to give your visitors the option to change modes while visitng your site.
Note: This stack does not work with the RapidWeaver built-in themes.
Compatible with these frameworks Not tested with Foundry or UIKit
Compatible with all major browsers
- Dark Mode no longer uses browser local storage to save dark mode preference, unless a toggle switch is added to the page and is used to change modes.
- Changed from using browser local storage to browser session storage.
- Initial Release