B L O G

Tips and tricks for using our stacks (and RapidWeaver in general)!

Turn to the dark side

'Dark mode' is a preference that modern computer operating systems offer users and which developers can then use to dictate how they should present their app's user interface (i.e. either with light or dark coloured stylings). RapidWeaver v8 came with the ability to respect this user preference and it has been very popular with users. Likewise, Stacks v4 provides full support for dark mode too.

People opt to use dark mode for various reasons. Many find it easier on their eyes (especially at night) whereas others simply prefer the look and 'feel' of it.

But even though we can set apps, such as our web browsers, to use dark mode, the web sites that we visit still just generally display in whatever fixed stylings the web developer set - which of course is, most commonly, dark text on a white/light background. When people that do prefer dark mode visit sites like this it can be quite jarring as the brightness of the site is emphasised by the dark UI. So, wouldn't it be great if we web developers could tap into this user preference too? Well, thanks to some new CSS standards that have gradually been finding support in many of the latest browsers, we can now opt to develop a light and a dark style for our sites and then leave it to the browser to automatically apply whichever style set the user prefers.

Dark and light versions of the Source landing page

Above is an example of a web page that offers both a light and a dark option. This is the live Source landing page and it has been set up so that those that prefer dark mode get the dark version and those that prefer light mode get the light version. And just to clarify, this is a single page. It is not two different pages with two different style sheets.

The browser does this by interpreting a media query, just like the media queries we already use to target devices of different sizes. The user's OS informs the browser of the user's dark mode preference and then the browser, by interpreting the media query, applies the appropriate stylings. This all happens behind the scenes and in real time and doesn't involve the user having to toggle a setting on the page (which, to me at least, always seemed like a bit of a gimmick).

So how can you begin to create 'dark' versions of your projects in RapidWeaver? Well, if you are well versed in CSS then you can begin adding your dark mode stylings inside a media query like this:

@media (prefers-color-scheme: dark) {
    html {
        background: black;
        color: white;
    }
}

What this piece of code is saying is that if the user prefers a dark colour scheme then make the background of the site black and the foreground /text white.

Obviously, in real life there would be a lot more stylings required (links, accent colours etc). And you would never actually use white on black (see tips below).

To make adding dark mode to web sites a breeze, Source users can add the 'Dark mode' stack (which is available in the Addons pack to the page. This stack allows you to easily set up your alternate colour scheme (along with a few other styling options) that will be applied for users that prefer it (if they are using a compatible browser).


Some tips when designing for Dark Mode:

  • Dark mode is not as simple as putting white text on a black background. You need to really consider the colour choices and ensure that the selected colours do not make it hard to read. Off white text on a dark grey background for instance is a good choice.
  • Larger text can be easier to read on dark screens and so increasing the font size a little might be appropriate
  • Increasing the line spacing can make text easier to read in dark mode
  • Likewise, increasing the spacing between words can be beneficial
  • Reducing the opacity (or inverting the colours!) of images can lessen the impact of bright images on a dark page

There are other things that you might want to consider too. As it all happens within a media query you can add code to do anything that you like.

Of course, Source Dark Mode stack comes settings that allow you to make these other styling tweaks such as these too.

Give this a go and see how you get on with giving your web pages a dark mode makeover. Your 'dark mode' preferring web page visitors will thank you for it.


Dark mode stack is available as part of the Addons pack for Source.

Back