Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to automatically load the dark mode of the website in CSS. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

The era of dark mode has come.

Now there is a new trend-to turn things black. In the past, you had to decide the style of your site (light or dark) or you had to save a user-defined theme style.

Safari 12.1 (included with macOS 10.14.4) added support for detecting system color themes. It can convey this information and can render a specific version of the site. When your system uses dark mode (System Preferences-> General-> Appearance-> Dark), Safari automatically has a black ui interface and will try to load it. The CSS file of your site needs to be adjusted to suit the dark mode.

A simple website

We use index.html and main.css to create a simple website. The first file contains a standard HTML5 template with a title and a paragraph, and the second file holds the css style.

The content of index.html:

Dark Website Example

Website Title

Some random words.

Contents of the main.css file:

Body {

Color: black

Background: white

}

The realized effect of the website:

Although dark mode is enabled in the system, the website is pure white (see the black toolbar at the top of the browser).

Add support for dark mode

To enable dark content on a Web site, you need to use prefers-color-scheme media queries. Just add it and override the appropriate color value.

The improved main.css is as follows:

Body {

Color: black

Background: white

}

@ media (prefers-color-scheme: dark) {

Body {

Color: white

Background: black

}

}

The browser checks to see if dark mode (color scheme) is enabled and displays the correct color

Is this the function of the future?

Dark style is very popular now, and I think it may be in the future (better browsing at night, more emphasis on content and lower battery consumption of the device). You don't need to remember user preferences and other custom content, just use media queries! Look forward to supporting this feature in other browsers (Firefox 67 has already done so), better adoption on the site, and more users with dark mode enabled by default.

Maybe it's not enough to just change the color (the icon also needs some adjustment), so your UI or UX designer.

This is the end of this article on "how to automatically load the dark mode of the website in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.