+
96
-

回答

A.使用CSS

CSS Media Feature Preferreds-color-scheme允许您在浏览器中检测用户是否根据操作系统配置选择 浅色还是深色主题。CSS语法如下,例如,如果用户更喜欢深色模式,则应该能够使用以下CSS设置深色背景:
@media (prefers-color-scheme: dark) {
body {
background: black;
}
}
浅色调这样设置:
@media (prefers-color-scheme: light) {
body {
background: white;
}
}

B.使用JavaScript

如果您希望根据用户的偏好运行一些JavaScript代码,则可以验证此条件,以验证浏览器是否支持matchMedia并验证配色方案的条件是否暗匹配:

const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
const userPrefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
if(userPrefersDark){
console.log("User prefers a dark interface");
}

网友回复

我知道答案,我要回答