适配黑夜模式的新方式

该文章主要讨论跟随系统的light/dark适配，其他场景不在此处讨论～

新方案 -- light-dark()

Chrome123的新功能，light-dark()函数。

// Dom
<h1>调整颜色 light-dark</h1>
<p class="target">文字/背景色改变</p>

// Css
:root {
    color-scheme: light dark;
}
.target {
    color: light-dark(#333b3c, #efefec);
    background-color: light-dark(#efedea, #223a2c);
}

PS: 为了启用对light-dark()颜色函数的支持，color-scheme必须具有值light dark。

color-scheme

配色方案（color-scheme）可以允许元素呈现在哪些配色方案中。

全局一般通过伪类:root，特定元素可以通过元素添加（如header等）。

关键字	含义
normal	表示可以使用页面的配色方案，设置来呈现元素。如果页面未设置配色方案，则使用页面的默认颜色设置来呈现元素。
light	表示该元素可以使用操作系统浅色方案进行渲染。
dark	表示该元素可以使用操作系统深色配色方案来呈现。
only	禁止用户代理覆盖元素的配色方案。

color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;

旧方案 -- 媒体查询

@media (prefers-color-scheme: dark)

可以点击查看阅文官网，使用了媒体查询的方式进行黑夜适配

.box.svelte-1fdzcaz.svelte-1fdzcaz {
    background: #212737;
    color: #fff;
    padding: 30px 0;
    text-align: center
}
@media (prefers-color-scheme: dark) {
    .box.svelte-1fdzcaz.svelte-1fdzcaz {
        filter:invert(1) hue-rotate(180deg);
        opacity: .85
    }

    .brand-img.svelte-1fdzcaz.svelte-1fdzcaz {
        filter: none
    }
}

现代浏览器普遍兼容兼容prefers-color-scheme媒体查询，兼容性目前相对较好，但是随着时间的推移light-dark也应该会慢慢成为大家的选择～