How to automatically apply dark mode CSS styles to the website when the user's system theme is changed to dark mode?
Tags: css
Published: 2022-12-12 05:28:04

---
  title: How to automatically apply dark mode CSS styles to the website when the user's system theme is changed to dark mode?
  published: true
  tags: CSS
  date: Mon Dec 12 2022 10:58:04 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/automatically-apply-dark-mode-css-styles-to-website-whenever-users-system-theme-changed
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_4fae016683.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/automatically-apply-dark-mode-css-styles-to-website-whenever-users-system-theme-changed)
  To automatically apply dark mode CSS styles to the website whenever the user's system theme is changed to dark mode, you can use the `@media` rule in the CSS followed by using the `()` symbol (opening and closing brackets), and inside the brackets, you can write the keyword `prefers-color-scheme` followed by the `:` symbol (colon) and then the value of `dark`. 

After the brackets, you need to use the `{}` symbol (opening and closing brackets) and inside this code block, you can write the styles to trigger on dark mode.

### TL;DR

```html
<html>
  <style>
    /* 
      Using the prefers-color-scheme CSS media
      feature to automatically apply dark mode styles
    */
    @media (prefers-color-scheme: dark) {
     body {
      background-color: black;
      color: white;
     }
    }
  </style>

  <!-- A simple white background color webpage with some texts -->
  <body>
    <h1>Hello World!</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga nam
      voluptatum mollitia dignissimos magni voluptatem numquam tenetur
      consequatur similique perspiciatis dolore impedit nihil velit sunt,
      consectetur eligendi id odit? Id tempore dolores distinctio explicabo iste
      esse architecto minus! Voluptate architecto dolores odio, eligendi
      perspiciatis iure voluptates repellendus libero nemo fuga, maxime,
      doloremque harum. Provident asperiores quisquam nesciunt commodi suscipit
      incidunt expedita reprehenderit repellat enim recusandae.
    </p>
  </body>
</html>
```

For example, let's say we have a white background color webpage with a `heading` tag and a random `paragraph`.

The HTML will look something like this,

```html
<html>
<!-- A simple white background color webpage with some texts -->
  <body>
    <h1>Hello World!</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga nam
      voluptatum mollitia dignissimos magni voluptatem numquam tenetur
      consequatur similique perspiciatis dolore impedit nihil velit sunt,
      consectetur eligendi id odit? Id tempore dolores distinctio explicabo iste
      esse architecto minus! Voluptate architecto dolores odio, eligendi
      perspiciatis iure voluptates repellendus libero nemo fuga, maxime,
      doloremque harum. Provident asperiores quisquam nesciunt commodi suscipit
      incidunt expedita reprehenderit repellat enim recusandae.
    </p>
  </body>
</html>
```

Now to automatically apply dark mode styles to the webpage whenever the user's system theme is changed to dark mode, we can use the `@media` CSS rule followed by writing the keyword `prefers-color-scheme` and the value of `dark` inside the `()` symbol and then followed by the `{}` symbol. Inside the curly brackets symbol, we can write the CSS styles to be applied when the user's system has the dark mode selected.

It can be done like this,

```html
<html>
  <style>
    /* 
      Using the prefers-color-scheme CSS media
      feature to automatically apply dark mode styles
    */
    @media (prefers-color-scheme: dark) {
      /* Write dark mode style here */
    }
  </style>

  <!-- A simple white background color webpage with some texts -->
  <body>
    <h1>Hello World!</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga nam
      voluptatum mollitia dignissimos magni voluptatem numquam tenetur
      consequatur similique perspiciatis dolore impedit nihil velit sunt,
      consectetur eligendi id odit? Id tempore dolores distinctio explicabo iste
      esse architecto minus! Voluptate architecto dolores odio, eligendi
      perspiciatis iure voluptates repellendus libero nemo fuga, maxime,
      doloremque harum. Provident asperiores quisquam nesciunt commodi suscipit
      incidunt expedita reprehenderit repellat enim recusandae.
    </p>
  </body>
</html>
```

Now let's write some dark mode styles inside the `prefers-color-scheme: dark` CSS code block. 

We aim to change the background color of the website to `black` and all the text to `white` color on dark mode.

It can be done like this,

```html
<html>
  <style>
    /* 
      Using the prefers-color-scheme CSS media
      feature to automatically apply dark mode styles
    */
    @media (prefers-color-scheme: dark) {
     body {
      background-color: black;
      color: white;
     }
    }
  </style>

  <!-- A simple white background color webpage with some texts -->
  <body>
    <h1>Hello World!</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga nam
      voluptatum mollitia dignissimos magni voluptatem numquam tenetur
      consequatur similique perspiciatis dolore impedit nihil velit sunt,
      consectetur eligendi id odit? Id tempore dolores distinctio explicabo iste
      esse architecto minus! Voluptate architecto dolores odio, eligendi
      perspiciatis iure voluptates repellendus libero nemo fuga, maxime,
      doloremque harum. Provident asperiores quisquam nesciunt commodi suscipit
      incidunt expedita reprehenderit repellat enim recusandae.
    </p>
  </body>
</html>
```

Now if we switch the user's system theme to dark mode, our website theme will also change according to the styles defined.

The visual representation of the dark mode theme automatically getting switched is shown below,

![webpage theme getting changed automatically when switching between light mode and dark mode on the user's system](/uploads/webpage_dark_mode_986d152170.gif)

We have successfully implemented an automatic dark mode functionality on the website. Yay 🥳.

See the above code live in the [codesandbox](https://codesandbox.io/s/automatically-apply-dark-mode-css-styles-to-website-whenever-users-system-theme-changed-js650q?file=/index.html).

That's all 😃.