问题描述

提示：这里描述项目中遇到的问题：

用户反馈 页面没有随着手机模式（深色模式，正常模式）切换 而改变！！！

解决方案：

思路：prefers-color-scheme 媒体查询 具有两个可以指定的有效值： light 和 dark ：

第一种 ：用css来解决问题

/* 默认 */  
:root {
    --color-scheme-background: pink;
    --color-scheme-text-color: red;
}
 
/* 白天 mode */
@media (prefers-color-scheme: light) {
    :root {
        --color-scheme-background: white;
        --color-scheme-text-color: black;
    }
}
 
/* 深色 mode */
@media (prefers-color-scheme: dark) {
    :root {
        --color-scheme-background: black;
        --color-scheme-text-color: white;
    }
}
 
/* Usage */
html {
    background: var(--color-scheme-background);
    color: var(--color-scheme-text-color);

第二种 ： 用js来控制

说实话感觉有点脱裤子放屁 其实用的还是媒体查询，但是场景不同选择不同，各有利弊

html {
    content: ""; /* (ab)using the content property */
}
 
/* 白 mode */
@media (prefers-color-scheme: light) {
    html {
        content: "light"; /* (ab)using the content property */
    }
}
 
/* 深色 mode */
@media (prefers-color-scheme: dark) {
    html {
        content: "dark"; /* (ab)using the content property */
    }

const mode = getComputedStyle(document.documentElement).getPropertyValue('content');

// mode: "dark"  深色模式
根据这个判断