CSS color adjustment

September 1, 2023

CSS color adjustment 模块用于自动控制和调整颜色以处理用户偏好，比如：暗色模式，高对比度，及其他色彩模式。

TODO: 本篇待完善

color-scheme (property)

指定当前元素使用何种配色方案（与操作系统是否指定了暗色模式无关）

css

color-scheme =
  normal                                       |
  [ light | dark | <custom-ident> ]+ && only?

元素的默认颜色属性值实际上配置为系统颜色
该变量会根据 color-scheme 值为 light 或 dark 而表示不同的具体值。

prefers-color-scheme (media-query)

查询用户代理偏好的主题色。（即：操作系统是否开启了暗色模式）

css

@media (prefers-color-scheme: dark) {
}

@media (prefers-color-scheme: light) {
}

@media (prefers-color-scheme: no-preference) {
}

注：js 使用 matchMedia 查询

let isDark: boolean = window.matchMedia("(prefers-color-scheme: dark)").matches;

window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (ev: MediaQueryListEvent) => {
    const matches: boolean = ev.matches;
    const media: "(prefers-color-scheme: dark)" = ev.media;
    console.log({ matches, media });
});

使用

暗色模式下使用系统色兜底。（仅适用于元素未配置颜色的属性，因为系统颜色优先级低）

css

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

←Back to home