CSS检测系统的主题色

发表于 分类于 / Changyan：

今天创建 Vue 项目时，偶尔发现生成的默认页面能根据系统主题色做出相应改变。

然后我发现让其生效的代码在 src/assets/base.css 中：

1
2
3
4
5
6
7
8
9
10
11
12
13
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);

    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);

    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);
  }
}

所以后期我们可以通过 prefers-color-scheme: dark 或者 prefers-color-scheme: light 来为用户定制不同主题的页面样式。

资源