Dynamic Dark Themes with CSS
Tags: css, html
Published: 2020-01-06 17:06:54

---
published: true
title: Dynamic Dark Themes with CSS
description: Learn how to dynamically change themes with CSS based on user preferences.
tags: css, html
canonical_url: https://coryrylan.com/blog/dynamic-dark-themes-with-css
---

In this tutorial we will learn how to build a custom CSS theme that we can switch based on the users Operating System theme preferences. This will allow our UI to automatically switch to a dark mode or light mode.

## CSS Custom Properties

First to build our custom CSS Theme we will need to use CSS Custom Properties or also known as CSS Variables. CSS Custom Properties allow us to dynamically change CSS values with CSS Media Queries or JavaScript. This dynamic behavior makes it easy to change the theme of our websites and applications. First let'stake a look at an example UI.

<img src="https://coryrylan.com//assets/images/posts/2019-11-01-dynamic-dark-themes-with-css/css-custom-light-theme.png" alt="Example light theme with CSS Custom Properties" bp="full-width 8--max float-center" class="img-border" loading="lazy" />

In this UI we have a header and three content cards that are styled with a light theme. Let's take a look at the CSS for this page.

```css
:root {
  --primary-color: #fff;
  --background-color: #e5e5e5;
  --text-color: #2d2d2d;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

.card {
  background-color: var(--primary-color);
  color: var(--text-color);
}

.header {
  background-color: var(--primary-color);
  color: var(--text-color);
}
```

We define our CSS Custom Properties using the `:root` selector. The `:root` selector is essentially the global document. By adding variables in `:root` we can access them anywhere in our application. CSS Custom Properties must be prefixed with two dashes.

To use our CSS Custom Properties we use the `var()` keyword to pass in the value. For our card and header classes we use the variables to set the background and text color.

## Dark Mode and Dark Theme Preferences

In this example we will update our UI to have a dark theme like this image below.

<img src="https://coryrylan.com/assets/images/posts/2019-11-01-dynamic-dark-themes-with-css/css-custom-dark-theme.png" alt="Example dark theme with CSS Custom Properties" bp="full-width 8--max float-center" class="img-border" loading="lazy" />

There are a few ways to dynamically change CSS Custom Properties. You can change CSS Custom Properties via JavaScript.

```javascript
document.documentElement.style.setProperty('--primary-color', 'red');
```

Instead of using JavaScript we will use a new CSS media query called [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). The `prefers-color-scheme` media query allows us to apply CSS based on the users Operating System theme preferences. If the user prefers dark theme then we can automatically change our CSS to use a dark theme.

```css
/* 'light' or 'dark' options */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #455363;
    --background-color: #1f2935;
    --text-color: #fff;
  }
}
```

Now using the media query we can dynamically change the CSS Custom Properties and have our theme automatically change for the user with no JavaScript needed! Check out the full [working demo](https://stackblitz.com/edit/js-qnsgbe). Change your local OS theme preferences and see the updates!