Light and dark mode using CSS

Everybody has their personal preferences when it comes to customising their tools. I too keep toggling between light and dark modes of my IDE or Slack very often (very very often). Mostly all devices and apps, these days, give you these accessibility settings to create a personal touch.

While working on one of my side projects, a chrome extension for mindfulness — Have-a-happy-day, I wanted to implement a dark colour scheme fast but also keep scalability in mind. Let's dive into the steps of doing so.

Defining basic colours

Create a list of all the colours which you are planning to use on your website. This will be the core colours library. Let's consider the following set of colours:

#f9f9f9;
#03b0ff;
#1966d6;
#191919;
#d4d4d4;
#3b3b3b;

Now to make it dynamic and scalable, we will assign them to CSS custom properties or variables. These variables are declared inside a ruleset, like this:

element {  
   --light-white: #f9f9f9;  
   --light-blue: #03b0ff;  
   --dark-blue: #1966d6;  
   --light-black: #191919;  
   --light-grey: #d4d4d4;  
   --dark-grey: #3b3b3b; 
}

As a common practice and to make it accessible globally we will put it inside :rootpseudo-class:

:root {  
   --light-white: #f9f9f9;  
   --light-blue: #03b0ff;  
   --dark-blue: #1966d6;  
   --light-black: #191919;  
   --light-grey: #d4d4d4;  
   --dark-grey: #3b3b3b; 
}

Did you see how we have named these variables? It only describes its color values. This is because we do not want to tightly couple the elements and colors.

Defining themes variables

Now, as our core colours are ready, we can start defining variables for the website, like backgrounds and text colours.

--main-background-color 
--primary-font-color 
--secondary-font-color 
.
.

Let's assign the colours to these theme variables. But first, let us see how we can use CSS variables.

Using variables values

We can use these variables, we have a CSS function called var() which takes in the variable name and a fallback value (optional). It will look something like this:

element {   
   background-color: var(--light-white); 
}

Defining themes

We will now use these variables and create rulesets for our themes, namely — light-mode and dark-mode.

Let's continue the example and associate theme variables with base colour variables:

Light mode CSS

Dark mode CSS

Larger websites often have another layer of variables between base colors and theme schemes for a more robust system, with variables like brand-color, accent-color, etc.

Using theme variables

Now let us replace our hardcoded colours from our website stylesheet with these theme variables.

Website stylesheet

Also do not forget to put the theme class name on the body/wrapper element.

<div className="home light-mode"> . . . </div>

Adding toggle functionality

Finally, let's add a JS function for toggling our theme!

JS toggle theme

And there you go! We have successfully implemented a basic theme system for a website.

Have a happy day chrome extension

Pro Tips

To use the system’s/brwoser’s theme mode automatically, you can use prefers-color-schememedia query instead of having our own class names.

Using prefers-color-scheme

Before using this, you must check the compatibility of this media query here.

To preserve the theme mode of your website, you can use local storage, which will look something like this:

localStorage.setItem("theme-mode", CURRENT_THEME);

And fetch the theme on page load:

localStorage.getItem("theme-mode");

Conclusion

Colour schemes are a great way to give options to the user for their personal preference. Try these steps and tips for a better user experience of your website!