2.0 KiB
声明 color-scheme 有两种方式：
meta: 在head中声明，声明当前页面支持 light 和 dark 两种模式，系统切换到深色模式时，浏览器默认样式也会切换到深色； css：下面的 css 同样可以实现上面 meta 声明的效果 :root { color-scheme: light dark; } 注意：此声明并非为页面做自动适配，只影响浏览器默认样式
更多信息可查阅 W3C 文档 《CSS Color Adjustment Module Level 1》
通过 CSS 媒体查询 :root { color-scheme: light dark; background: white; color: black; }
@media (prefers-color-scheme: dark) { :root { background: black; color: white; } } 颜色较多的情况，建议使用CSS变量对颜色值进行管理
:root { color-scheme: light dark; --nav-bg-color: #F7F7F7; --content-bg-color: #FFFFFF; --font-color: rgba(0,0,0,.9); }
@media (prefers-color-scheme: dark) { :root { --nav-bg-color: #2F2F2F; --content-bg-color: #2C2C2C; --font-color: rgba(255, 255, 255, .8); } }
:root { color: var(--font-color) }
.header { background-color: var(--nav-bg-color); }
.content { background-color: var(--content-bg-color); } 图片适配 利用picture+source标签，设置不同模式下的图片 url。
JavaScript中判断当前模式&监听模式变化
利用的是matchMedia方法，具体用法参考以下例子：
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
function darkModeHandler() { if (mediaQuery.matches) { console.log('现在是深色模式') } else { console.log('现在是浅色模式') } }
// 判断当前模式 darkModeHandler() // 监听模式变化 mediaQuery.addListener(darkModeHandler)