How to implement a dark theme with CSS and Angular?

Dark themes have gained a lot of popularity over the past few years, and these days every primary website has a dark theme option.

While there are many different options to implement a dark theme with CSS, this post will focus on one of the most straightforward implementations, using modern Javascript and CSS features.

Even if we wrote this article with Angular in mind, one could implement a dark theme for any other framework/library using the same concepts.

1. Use CSS variables

Dark and light themes can be implemented with CSS variables that define the colors for both themes. Such variables are available on pretty much all browsers but the now deprecated Internet Explorer.

Here is some example CSS to define colors for a light theme followed by the same variables defined for the dark-theme class:

In this example, we will customize the background color and text colors for the entire page as well as for all buttons

2. Use those variables in your global stylesheet (styles.css)

Once you have defined the specificities of each theme with variables, you can create your common styles that will be applied no matter the theme, leaving the choice of the colors to the previously defined variables:

Note that any attribute that is theme-specific is being read from a variable using the CSS var() function

3. Decide which theme to apply

With the code provided above, the easiest way to toggle our dark mode on/off is to use the following Javascript:

document.body.classList.toggle(“dark-theme”);

This code will add or remove the dark-theme class to the page body, which will result in changing the CSS variable values used by our themes, effectively switching between light and dark mode.

You can see that code and example in action with this Stackblitz where you can click on the “Toggle dark theme” button to make the theme switch happen (https://stackblitz.com/edit/angular-ivy-kums6p?file=src%2Fstyles.css):

In my Angular code, all I do in my AppComponent is use the Javascript code mentioned above to toggle the CSS class:

@Component({
   selector: 'my-app',
   templateUrl: './app.component.html'
})
export class AppComponent {
toggleDarkTheme(): void {
        document.body.classList.toggle('dark-theme');
     }
}

Then, a button click calls the above method:

<h1>A sample webpage</h1>
<p>Start editing to see some magic happen :)</p>
<button (click)="toggleDarkTheme()">Toggle dark theme</button>

4. How to read the user’s preference in terms of theme, Dark or Light?

CSS offers media query @media (prefers-color-scheme: dark) to read the operating system preference set by the user.

This media query can be read from Javascript as follows:

const prefersDarkScheme = window.matchMedia(“(prefers-color-scheme: dark)”);

This could be used to set the default theme according to the user’s preference using the following code:

const prefersDark = window.matchMedia(“(prefers-color-scheme: dark)”);
document.body.classList.toggle('dark-theme', prefersDark.matches);

My name is Alain Chautard. I am a Google Developer Expert in Angular, as well as a consultant and trainer at Angular Training where I help web development teams learn and become comfortable with Angular.

If you enjoyed this article, please clap for it or share it. Your help is always appreciated.