DEV Community

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

Posted on • Originally published at melvingeorge.me

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

Originally posted here!
To automatically apply light mode CSS styles to the website whenever the user's system theme is changed to light 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 light.

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 light mode.

TL;DR

<html>
  <style>
    /* 
      Using the prefers-color-scheme CSS media
      feature to automatically apply light mode styles
    */
    @media (prefers-color-scheme: light) {
      body {
        background-color: cyan;
        color: black;
      }
    }
  </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 light mode styles to the webpage whenever the user's system theme is changed to light mode, we can use the @media CSS rule followed by writing the keyword prefers-color-scheme and the value of light 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 light mode selected.

It can be done like this,

<html>
  <style>
    /* 
      Using the prefers-color-scheme CSS media
      feature to automatically apply light mode styles
    */
    @media (prefers-color-scheme: light) {
      /* Write light 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 light mode styles inside the prefers-color-scheme: light CSS code block.

We aim to change the background color of the website to cyan and all the text to black color on light mode.

It can be done like this,

<html>
  <style>
    /* 
      Using the prefers-color-scheme CSS media
      feature to automatically apply light mode styles
    */
    @media (prefers-color-scheme: light) {
      body {
        background-color: cyan;
        color: black;
      }
    }
  </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 light mode, our website theme will also change according to the styles defined.

The visual representation of the light 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 light mode functionality on the website. Yay 🥳.

See the above code live in the codesandbox.

That's all 😃.

Top comments (0)