Recently, wechat was forced by Apple to develop the dark mode. More and more websites and apps have started to support the dark mode. Many people also like to choose the dark mode for their websites, maybe they prefer the appearance, or they want to keep their eyes from being tired. This article will show you how to implement an automatic CSS dark mode, depending on the theme of your visitors.

I’ve experimented with CSS variables and @media queries on my blog page and my little shop page.

CSS Dark Mode

I defined variables to set the color of the theme, and I recommend that you do the same, as this will make the process much easier. The color variables for my default mode are as follows:

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

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

p {
  color: var(--main);
}
Copy the code

This way, if you want to change the color of the theme, you simply change the variable defined, and everything that uses that variable is updated.

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

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

Added Dark support

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

Take the Dark color variable and add @media query below:

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

That’s it! If someone uses a dark OS theme and visits your site, your site will now automatically switch to dark mode.

And my small code page support manual switching and automatic switching two, dark style is also different.

test

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 iOS Dark Theme.

Or, if you don’t want to waste time on your operating system topics, you can enforce this test in Firefox. The method is as follows:

  1. Open Firefox, then type About :config in the address bar, then press Enter.

  2. You will be asked to take the risk and accept it.

  3. In the search bar, search for uI.SystemusesDarkTheme.

  4. Change the checkbox to Number and click the + symbol.

  5. Change the value to 1 and click the Tick button.

  6. The page should now go black.

  7. Back to your site, the theme should have been automatically updated to dark mode.

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

  9. When the test is complete, click the trash can to remove the option.

You should now have a web site that is responsive not only in terms of mobile interface, but also in terms of themes. I’m sure your late night visitors or those who only like dark themed sites will thank you.

Reference: kevq.uk/how-to-add-…

Translation: Dunizb

If you have inspiration and help, you can click a concern, collection, also can leave a message to discuss, this is the biggest encouragement to the author. About the author: Web front-end engineer, full stack development engineer, continuous learner.

Now pay attention to “front-end foreign language selection” wechat public number, but also send a network of high-quality video courses network disk information ah, can save you a lot of money!