Sample code for implementing dark mode with CSS variables

Recently, WeChat was forced by Apple to develop a dark mode . More and more websites and applications have begun to support dark mode. Many people also like to choose dark mode for websites. Maybe they prefer this appearance, or they want to protect their eyes from fatigue. This post will show you how to implement an automatic CSS dark mode that changes based on your visitor’s theme.

I tried implementing dark mode using CSS變量and @media查詢on my blog page My Shop [1].

CSS Dark Mode

I defined variables to set the colors of your theme, and I recommend you do the same as it will make the process a lot easier. My default color variables are as follows:

:root {
  --accent: #226997;
  --main: #333;
  --light: #666;
  --lighter: #f3f3f3;
  --border: #e6e6e6;
  --bg:#ffffff;
}

If you want to use these variables in your stylesheet, you can do it like this:

p {
  color: var(--main);
}

This way, if you want to change the colors of your theme, you only need to modify the defined variable and everything that uses that variable will update.

Now we need to define a new set of variables that will be used when invoking CSS dark mode.

/* Define the color of dark mode */
:root {
  --accent: #3493d1;
  --main: #f3f3f3;
  --light: #ececec;
  --lighter: #666;
  --border: #e6e6e6;
  --bg: #333333;
}

Added Dark support

Now that we have two sets of variables defined, the only thing left to do is add preferences -color-scheme media query to our dark variable.

Take the Dark color variable and add the following @media 查詢:

/* Define the color of dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #3493d1;
    --main: #f3f3f3;
    --light: #ececec;
    --lighter: #666;
    --border: #e6e6e6;
    --bg: #333333;
  }
}

That's it! If someone is using a dark OS theme and visits your website, your website will now automatically switch to dark mode.

I'm sure you'll want to test whether this change works. To do this, you can simply enable a dark theme on your operating system, such as the iOS dark theme.

Alternatively, if you don’t want to waste time with theming your OS, you can force this test in Firefox. Here’s how:

Open Firefox and type about:config in the address bar and press Enter.

You will be asked to take the risk, accept it.

In the search bar, search for ui.systemUsesDarkTheme . Change the checkbox to number and click the + sign. Change the value to 1 and click the tick button.

The page should now be black.

Go back to your website and the theme should have automatically updated to dark mode.

If you want to test whether it switches back, change the value to 0 .

When you are finished testing, click the trash can to delete the option.

This concludes this article about sample code for implementing dark mode with CSS variables. For more relevant CSS dark mode content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!