Everyone has been clear about the adaptive mode of the website. Now personal blogs are basically compatible with adaptive code, which has obvious advantages over mobile phones. The same set of code is used on the PC side, mobile phone side and IPAD side, and there is no need to analyze separate domain names, which effectively avoids the duplication of web content, and can focus on maintaining the web page, which is friendly to search engines. However, in recent years, major mobile phone manufacturers have gradually begun to focus on the dark mode or night mode, so as to improve the reading experience of users in low light environments. Many mobile APP applications have already supported the night mode, so the question arises. For mobile websites, can personal blog websites support adaptive light color mode and night mode? The answer is of course!
As early as July 2020, W3C launched prefers-color-scheme Of media Selectors enable pages to fit dark and light modes.
What is preferences color scheme?
The W3C mentioned the new attribute preferences color scheme in the Media Queries Level 5 standard draft released on July 31, 2020. Web pages can now obtain the dark mode status of the browser host system through the conditional rule group and apply it. That is to say, now we can simply realize that "the pages accessed by the dark mode system are dark, and the pages accessed by the light mode system are bright".
In terms of technology, we can simply adapt the light color and night mode on the mobile phone. The preferences color scheme has two values:
Light -- The browser host system uses the interface with a bright color theme, which is also the default value. This value will also be returned when the browser privacy. restFingerprinting is set to true.
Dark-a dark themed interface used by the browser host system.
There is also an obsolete value: no reference -- the browser host system uses an interface with an unknown theme. When the older version of the browser does not support the system level dark mode in the host system, it will return this value. When the older version of the browser privacy.restFingerprinting is set to true, it will also return this value, which can be judged by the condition rule group.
CSS code
@media (prefers-color-scheme: dark) { //Dark Mode Style } @media not (prefers-color-scheme: dark) { //Non Dark Mode Style }
JavaScript
It is difficult to achieve some requirements only by using CSS conditional rules. We can use the matches method to obtain the dark mode status of the system for the media obtained by using the matchMedia method for the window:
if (window.matchMedia('prefers-color-scheme: dark').matches) { //What does dark mode do } else { //What does non dark mode do }
In addition, you can monitor the status of the dark mode of the system and respond when the system switches the dark mode:
window.matchMedia('(prefers-color-scheme: dark)').addListener(e => { if (e.matches) { //What does the system do after dark mode is turned on } else { //What does the system do after turning off dark mode } });
In fact, preferences color scheme is not a new thing. Last year, Fruit has added it to Safari on MacOS Mojave. Since then, browsers have kept following up, and now it has good compatibility.
So far, through the code compatibility above, we can realize the adaptive compatibility of dark color and night mode on the mobile phone. I have seen some people discuss it in the group before, and I didn't care about it. Today, I see it on the public account Journalism When I saw this article written by Moonlight Blog course , myself Baidu After checking the relevant information, as for whether the theme will increase, it was decided after discussion, don't worry, give technology a little time, ha ha, is this phrase familiar? Meizu press conference said, give technology time! All right, the tutorial record is complete, and if you have any questions, leave a message to feed back to yourself.
