80 lines
2.0 KiB
Markdown
80 lines
2.0 KiB
Markdown
声明 color-scheme
|
||
有两种方式：
|
||
|
||
meta: 在head中声明<meta name="color-scheme" content="light dark">，声明当前页面支持 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。
|
||
|
||
<picture>
|
||
<!-- 深色模式下的图片 -->
|
||
<source srcset="dark.jpg" media="(prefers-color-scheme: dark)" />
|
||
<!-- 默认模式下的图片 -->
|
||
<img src="light.jpg"/>
|
||
</picture>
|
||
JavaScript中判断当前模式&监听模式变化
|
||
利用的是matchMedia方法，具体用法参考以下例子：
|
||
|
||
|
||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
|
||
|
||
function darkModeHandler() {
|
||
if (mediaQuery.matches) {
|
||
console.log('现在是深色模式')
|
||
} else {
|
||
console.log('现在是浅色模式')
|
||
}
|
||
}
|
||
|
||
// 判断当前模式
|
||
darkModeHandler()
|
||
// 监听模式变化
|
||
mediaQuery.addListener(darkModeHandler) |