Original link: https://www.williamlong.info/archives/6906.html
In the past two days, I modified the CSS code of the webpage and added a dark mode to the website. Currently, all mainstream operating systems (iOS, Windows 10, macOS, etc.) can support dark mode, and the default is light mode.
When this website was last revised , the color system used was light mode, which is simply black on white, and dark mode, which is simply white on black.
For phone systems, dark mode emits less light than light mode, so dark mode may improve battery life.
In people with normal vision, visual performance in light mode tends to be better; for some people with reduced vision, dark mode may perform better.
The method of website modification is relatively simple. First, classify the colors of the web pages, which are mainly divided into three categories: background color, foreground color, and frame color, and then add a new color scheme. The dark mode color scheme is directly from the WeChat public account. The dark mode extracts the color, so I am too lazy to match the color myself.
Then add the following code in the CSS header.
:root {
–background-color: #F1F1F1;
–box-color: #FFFFFF;
–text-color:#000000;
}
@media (prefers-color-scheme: dark) {
:root{
–background-color: #191919;
–box-color: #202020;
–text-color:#A3A3A3;
}
}
After that, use CSS variables to replace the relevant color codes in CSS.
At present, after the website is switched to dark mode, the text is still normal, but many LOGO pictures were made based on light mode before, so in dark mode, the color of the edge of the picture and the background are inconsistent. However, because the LOGO picture is too large It is a lot of work, and the workload of re-modification is quite large, so I will talk about it later.
For the detailed development of dark mode, please refer to the article ” Adaptive Dark Mode Adaptation of Mobile Web Pages “.
This article is reprinted from: https://www.williamlong.info/archives/6906.html
This site is for inclusion only, and the copyright belongs to the original author.