Home>Web design tutorial>HTML tutorial

The implementation of the HTML page supports dark mode

Author：Eve Cole Update Time：2025-04-11 07:16:01

Since 2019, both Android and IOS platforms have begun to play Dark Mode. Of course, there is nothing wrong with this, but when our page is turned on by the user in dark mode, the traditional big white will instantly be blinded by the eyes.

Here I will briefly talk about how to make the page support dark mode.

Prepare

In fact, we just need to use the preferreds-color-scheme media query in css.

  1. no-preference means that the user has not formulated an operating system theme. When used as a boolean, output is false.
  2. light means that the user's operating system is a light-colored theme.
  3. dark means that the user's operating system is a dark theme.
illustrate

  1. When this article was published, WeChat could not get the prefers-color-scheme parameter, so when we open the page in WeChat, it does not currently support dark mode.
  2. This method is just a simple demo, and you can use this method to expand on other implementations.
  3. prefers-color-scheme instructions
  4. DEMO address

HTML

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no> <title>Page adapts to dark mode</title></head><body class=back><div class=models><h1>Test text</h1></div></body></html>

CSS

 .back {background: white; color: #555;text-align: center}@media (prefers-color-scheme: dark) { .back {background: #333; color: white;} .models {border:solid 1px #00ff00}}@media (prefers-color-scheme: light) { .back {background: white; color: #555;} .models {border:solid 1px #2b85e4}}

The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.

Related Articles