Easily turn any stacks page to Dark Mode at the drop of a stack. Just drag and drop this Dark Mode stack onto your page and hit preview. Now on Version 2.0
Dark Mode version 2.0 has been completely re-written with performance improvements. Dark Mode now works with any theme, including the RapidWeaver built-in themes, just by dropping the Dark Mode stack to the top of the page.
Images can now be automatically detected and it's really simple to isolate any page element ID or Class from Dark Mode.
The Switch Stack works flawlessly to display different content in Light and Dark Modes.
The Toggle Stack has been updated and improved, complete with a new Toggle Switch. You can now add multiple Toggle Switches to your page and they will work in sync.
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.
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.
If you're seeing this page in Dark Mode, then it's working. If not, then you don't have Dark Mode enabled on your system. You can use the Toggle Switch to change between Light and Dark Modes.
The Switch Stack contains two stacks drop zones to place your own content, and then display that content based on Light or Dark Mode.
For example, you may have a logo that looks great in Light Mode, but not so great in Dark Mode. You can use the Switch Stack to display a different logo for each mode.
This is the Light Mode logo version
This is the Dark Mode logo version
Even though the Dark Mode Stack will show your web page in Dark Mode, there may be times when your visitor prefers the opposite mode. The Toggle Stack enables the visitor to toggle between Light and Dark Modes using either a Toggle Switch, a Markdown link, or a stack of your choice.
Will this stack work on my site? As of version 2.0, the Dark Mode Stack should work on any stacks page, including the RapidWeaver built-in themes and third party themes. If you have an issue, let us know.
I have Dark Mode version 1.x. How do I update to version 2.x? Dark Mode 2.x is a free update for users of Dark Mode 1.x. You can update via the Stacks Updater. If you no longer have Dark Mode 1.x installed or you have lost your installation file, use the contact us form with the email address that you used to make the purchase and we'll send you a new download link.
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.
RapidWeaver 7+
Stacks 3.5+
Tested with these frameworks Not tested with UIKit
Foundation
Foundation 6
Source
Platform
Compatible with all major browsers
Safari
Chrome
Firefox
Edge
Opera
Version: 2.0.2
Version: 2.0.1
Version 2.0.0
Version: 1.2.1
Version: 1.2.0
Version: 1.1.0
Version: 1.0.0
