Creating a dark theme for raywenderlich.comDesign

          “It seems every app and website is making the effort to include a dark theme recently. Here we document why and how we created one for”

[ November 23, 2018 · Luke Freeman ]

Dark Mode — a novelty or better user experience? The answer could be true or false depending on the context. For some experiences, it can be helpful if you can match the user’s interface with their environment.

Google Maps is a great example of this. When a user is driving at night, the interface changes to a dark theme as not to distract the driver with a glaring bright screen.

Staring at a bright screen all day can be tiring on your eyes and it’s easy to lose mental focus. In the case of using, we know many of you are studying our tutorials after a long day at work or school, so we thought it would be helpful to give you the option to change the contrast so that your eyes can relax.

Does get enough traffic during twilight hours to support a dark theme?

This is a resounding: yes! According to Google Analytics, the most popular time for visiting our website is after work and late into the night (21:00-00:00). Based on this data, we were confident that a dark theme for would be a useful feature.

We wanted our dark theme — shown as “Night Mode” in your user drop-down menu — to be cutting edge, so we leveraged a new browser feature — all hail ‘prefers-color-scheme’. Note: This feature currently only works with Safari Technology Preview 69+, but we expect this will be a common feature in other browsers soon.

‘prefers-color-scheme’ checks your OS appearance setting in System Preferences and changes the website to match. Changing the apperance settings here also changes the appearance of Crazy, I know — but this is real life!

If you want to offer users a dark mode version of your site, too, you can follow along with how we’ve done it for I’ve broken down how it works in three easy steps:

  1. Add a CSS class for dark theme to a stylesheet
  2. Use Javascript to match the user’s OS appearance setting
  3. Add a toggle to change the website theme, manually

Note: You’ll need some basic HTML, CSS and Javacript.

1. Add a CSS class for dark theme to a stylesheet

First, inside your CSS class, you can write the styles that your website elements and classes use when in dark theme. To add Night Mode to, I had to go through every page on the site and note elements that needed to change once used in a the dark theme. After creating the l-prefers-color-scheme--dark variants of all the existing style elements, the dark theme came in at 500 lines. This snippet shows the start of my dark theme class:

  background-color: #333333;
  color: #ffffff;

2. Use Javascript to match the user’s OS appearance setting

Safari Technology Preview 69+ makes your OS appearance setting available to the browser. Using the snippet below, you can fetch the user’s OS appearance setting and, if the dark appearance is selected, you add your l-prefers-color-scheme--dark class to the HTML <body class="l-prefers-color-scheme--dark">. This allows your dark theme CSS to be active.

let nightModeActive =
  window.matchMedia('(prefers-color-scheme: dark)').matches;

document.body.classList.toggle('l-prefers-color-scheme--dark', nightModeActive);

After completing this step, you will have successfully matched your website to the user’s OS. Try it out: If you visit using Safari Technology Preview 69+, the website theme will match your OS appearance setting.

Note: You’ll need to refresh the web page after changing your OS appearance.

3. Add a toggle to change the website theme, manually

We now have a sentient website theme! However, in some cases, the user might not want their browser to match their OS appearance. To solve this, we added a switch to toggle the “Night Mode” manually. The snippet below toggles our class l-prefers-color-scheme--dark the same way as in step two above, and it allows the user to control the website appearance. Once selected, the user’s chosen theme is remembered by using a cookie.

let nightModeActive =
  window.matchMedia('(prefers-color-scheme: dark)').matches;

if (getCookie('night-mode-on')) {
  nightModeActive = getCookie('night-mode-on') === 'true';


And that’s it!

So if you’re a night owl like our CTO Sam Davies, or just prefer reading on a dark UI, we hope you’ll enjoy the new “Night Mode” feature we’ve added to!

Written by Luke Freeman — UX Designer

Developer & Designer at Razeware — The names Luke, Luke Freeman...