Dark Mode: Not as simple as inverting the colours

Introduction

Dark mode, a fan favourite amongst developers and user alike. Today we will be taking a look at how to implement dark mode in a web application. As always, there are a number of ways to accomplish this with some including the use of JavaScript but today, we are strictly sticking with css.

Getting Started

Before diving in, lets talk about ehat it means to implement dark mode in your application. I find that the natural/default interpretation of dark mode is just the inversion of colour -- making a light background dark while making the dark text light. However, I've come to realize that it is not that simple; I amy be wrong but that's just my interpretation.

Usually the way we create depth in a "light" setting is by using shadows to make our piece of content, say a card component, stand out from the background. In a "Dark" setting using this trick most often look very weird and adds distractions to the UI. In the same way using vibrant and very contrasty colours may work very well in a "light setting" but don't work as well in a dark setting. To create depth in dark mode, we may want to think about using lighter less saturated colours between our component and the background to create a degree of separation. So picking your colours for both modes becomes very important when thinking about adding a dark mode to your application.

Implementing Dark mode

At the end of the day dark mode is a preference, some of your users may not prefer a dark theme and so you would want a way to give users a choice. Luckily, css provides a way to for developers to know what type of theme a user prefers. This is done with using the:

@media (prefers-color-scheme);

This is a css media features that is widely supported across browsers and it is used to detect whether a user prefers a light or dark theme. More specifically, this is done by looking at the device colour scheme preferences that is set by the user.

@media (prefers-color-scheme) takes in one of three values: Initial, light, or dark. By default initial is selected if these parameters are not specified. Setting it to light indicates that the user prefers a light theme while setting it to dark indicates that the user prefers a dark theme. Example written below:

@media (prefers-color-scheme: initial) {
} ;

@media (prefers-color-scheme: light) {
} ;

@media (prefers-color-scheme: dark) {
} ;

Inside the curly braces we can then specify the class, id or element to target but doing this may be time consuming and there may be better more efficient ways to do this. Instead, it may become very useful to use css custom properties. The value of doing this is that we can set custom colour schemes and then change the colours that are assigned to the variables based on if the user wants a light or dark theme.

On the root element set your colours in css variables and then for dark mode simply just switch the colours. Example below:

:root {
  --background-Clr: #f9f8fa;
  --background-Clr-sec: #ffffff;
  --prmy-text-color: #171717;
  --sec-text-color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-Clr: #282828;
    --background-Clr-sec: #141414;
    --prmy-text-color: #ffffff;
    --sec-text-color: #171717;
  }
}

You may also need to target additional classes or ids to fine tune the colour scheme.

Now that this is complete we have a way to set a light and dark colour scheme based on the users system preferences and without implementing any javascript

Check out the youtube channel to see how we are implementing the feature in the app we are building! letsCreate: Dark mode using CSS