Original link: https://www.williamlong.info/archives/6895.html
In recent years, various mainstream operating systems have gradually begun to pay attention to the dark mode, so as to improve the user’s reading experience when the ambient light is low. Many mobile APPs have already supported dark mode, and commonly used mobile applications have also adapted to dark mode under the policy pressure of the App Store. So, for mobile websites, can they also support adaptive light mode and dark mode? This article will introduce how to develop adaptive dark mode adaptation for mobile web pages.
Now that there is a system-level adaptation, the page of the mobile website can read the dark mode switch, thereby completing the self-adaptation of the web page. The media selector of prefers-color-scheme introduced by CSS enables web pages to adapt to dark mode and light mode.
What is prefers-color-scheme?
On July 31, 2020, the Media Queries Level 5 standard draft released by W3C mentioned a new attribute prefers-color-scheme. Web pages can now obtain and apply the dark mode status of the browser host system through conditional rule groups. That is to say, now we can easily implement “the pages accessed by the dark mode system are dark, and the pages accessed by the light mode system are bright”.
prefers-color-scheme provides two values; light and night; as the name suggests, light is the style code for day mode, and night is the style code for dark mode.
light – The browser system uses a light-themed interface, and is also the default value, which will be returned when the browser’s privacy.resistFingerprinting is set to true.
dark – The browser system uses a dark-themed interface.
CSS syntax
@media (prefers-color-scheme: <mode>) {
}
where mode has the following possible values:
light: light mode
dark: dark mode
CSS style code
@media (prefers-color-scheme: light) {
// light mode style
}
@media (prefers-color-scheme: dark) {
// dark mode style
}
CSS variables
In addition to prefers-color-scheme, we also need to understand the function and usage of CSS variables.
CSS variables are also known as “CSS custom properties”.
The variable declaration uses two hyphens before the variable name, and the variable name is case-sensitive. The var() function is used to read variables. The var() function can also take a second parameter, which represents the default value of the variable. If the variable does not exist, the default value will be used.
Retrofit existing web pages
With this feature, we can focus on transforming existing web pages. We use CSS variables to represent theme colors in CSS. We need to define two sets of variables, one for dark and one for light, and the following code is used for processing.
:root {
–bg: #FFFFFF;
–textColor: #000000;
–borderColor: #2C2C3A;
}
@media (prefers-color-scheme: dark) {
:root {
–bg: #000000;
–textColor: #FFFFFF;
–borderColor: #2C2C3A;
}
}
In this way, when someone uses the dark mode system theme of the mobile phone, when they visit the website, they will automatically switch to dark mode.
It is difficult to achieve some requirements using only CSS conditional rules. We can use the matches method on the Media obtained by using the matchMedia method on the window to get the system dark mode status:
if (window.matchMedia(‘prefers-color-scheme: dark’).matches) {
// is what dark mode does
} else {
// what non-dark mode does
}
Through the above transformation, the adaptive switching between dark and light modes on the mobile phone can be realized.
This article is reprinted from: https://www.williamlong.info/archives/6895.html
This site is for inclusion only, and the copyright belongs to the original author.