博客主题切换

prefers-color-scheme

在标签中使用媒体查询

<picture>
    <source srcset="mojave-night.jpg" media="(prefers-color-scheme: dark)">
    <img src="mojave-day.jpg">
</picture>

在CSS样式中使用媒体查询

@media (prefers-color-scheme: dark) {
    :root {
        --special-text-color: hsla(60, 50%, 70%, 0.75);
        --border-color: white;
    }
}

color-scheme CSS 属性

是一个 CSS 属性，用于告知浏览器页面支持的颜色方案。

背景色和前景色 light ：背景色为浅色，前景色为深色 dark：深色背景，浅色前景

为不同的类型元素设置高对比度

https://webkit.org/blog/8892/dark-mode-in-web-inspector/ https://webkit.org/blog/8840/dark-mode-support-in-webkit/

SVG and currentColor

<svg id="root">
    <path fill="currentColor" d="..."/>
</svg>

CSS filters

body {
  filter: invert()
}

https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-using-a-body-class

颜色选择工具

Adob​​e Color happyhues [[黑色背景上白色文本的部分看起来比白色背景上黑色文本的部分更重]]

[[如何在Devtools进行对比度检查]]