DEV Community

Cover image for How to automatically apply dark mode CSS styles to the website when the user's system theme is changed to dark mode?
MELVIN GEORGE
MELVIN GEORGE

Posted on • Originally published at melvingeorge.me

How to automatically apply dark mode CSS styles to the website when the user's system theme is changed to dark mode?

Originally posted here!
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>
  <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>
Enter fullscreen mode Exit fullscreen mode

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>
<!-- 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>
Enter fullscreen mode Exit fullscreen mode

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>
  <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>
Enter fullscreen mode Exit fullscreen mode

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>
  <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>
Enter fullscreen mode Exit fullscreen mode

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

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

See the above code live in the codesandbox.

That's all 😃.

Top comments (1)

Collapse
 
duendeintemporal profile image
duendeintemporal

Sounds good.. I see it's like a fallback option.. maybe I supose wrong, but it will change to dark mode only if the user set a dark mode in he/her/it browser and the colors we define by default... I think it's great that knowlege, and that possibility cause allow us to have more control about the style of the site... I have a question... this media querries work with setup configuration of the devices, but we can make a JS interaction that set these conditions to true...? for example, we can do a functionallity taht turn the property 'prefers-color-scheme:' to 'dark' or other value only with JS went we click a button for example?? thank for your post