How we built a dark mode for the Peppered sites

The dark mode is a trend that has been making waves in the design community over the past few years, and we knew it would be a great fit for Peppered websites. However, we also learned that adding a dark mode would require a lot of work for our small team, but now that the first site with a dark mode is live, we're thrilled by how smooth it was to add and fully realise its potential.

Why we built a dark mode

The dark mode is a great way to increase contrast and make the text easier to read. We therefore not only built this functionality for sites, but also made it available in the Peppered dashboard. Now everyone can choose to work in a light or dark mode. Our users are really excited about this new feature as well; they've been writing to us saying how glad they are their eyes aren't straining anymore. We know what it's like to stare at a screen all day long and have it take its toll on your eyesight. So having the dark mode available and thereby making it easier for our users is really important to us.

In 4 steps to a light/dark switch

1. Designing the system

We spent a lot of time thinking about how we could make sure our design was as readable as possible while still looking great in dark mode. The first thing we did was investigate some types of content that have historically been hard to read in dark mode, like the text on white backgrounds, and establish some guidelines that explai what makes them unattractive to readers. Then, we chose fonts and colours that were easy to read in both light and dark mode and added contrast between elements where necessary (for example, by making buttons stand out against their backgrounds).

2. Cleaning up variables

We have started the technical implementation of the dark mode by cleaning up and creating new variables. We found all sorts of colour inconsistencies, like scattered hex codes and one-off variables. Thankfully, we have been strict about storing them in one place. So we could easily start creating a new file and moving all the colour variables into it, updating the file paths where appropriate. Next, We created an import statement at the top of the file that referenced the colours, instead of importing all its colours directly from there.

3. Creating theme variables

Now that we had an independent file for our dark mode colours, we needed to make sure that any time someone wanted to change colours on the site, they would do so by changing it in this single file. This because duplicating code throughout our project or making direct changes to theme files themselves, could cause conflicts later on down the road (especially if someone else would be working on another part of the site).

Example of how we set the light mode theme colours.

Example of how we set the dark mode theme colours.

4. Implementing a switch

We then needed to add a switch that would toggle between themes when clicked, as well as a way to manage theme changes and save the latest theme preference to a cookie. We made three theme modes: light, dark, and one that will follow your browser settings. So if your browser is set in dark mode, the website will be automatically shown in a dark mode as well.

We added this code where we wanted our root to have a data attribute theme. Based on that we will include the light or dark theme mixin.

We have created a module called theme.ts on the site, with which we can manage theme changes and save the latest theme preference to a cookie.

See you on the dark site

As you can imagine, adding a dark mode to an already-live site is not something that can be done overnight. We are therefore proud of what we have accomplished!

Would you like to have a dark mode on your Peppered site as well? Contact our servicedesk to discuss te possibilities. Don't you have a Peppered site just yet? Get in touch with us to hear more about it.