应用深浅主题

css 使用深浅主题

媒体查询

<link rel="stylesheet" media="screen and (prefers-color-scheme: light)" href="./light.css">
<link rel="stylesheet" media="screen and (prefers-color-scheme: dark)" href="./dark.css">

<style>
    @import url('./light.css') screen and (prefers-color-scheme: light);
    @import url('./dark.css') screen and (prefers-color-scheme: dark);
</style>

:root {
  --vt-c-black: #181818;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black);
  }
}

js 使用深浅主题

const darkTheme = window.matchMedia('(prefers-color-scheme: dark)')
// 如果应用设置了深色主题
if (darkTheme.matches) {
    link.href = './dark.css'
}
darkTheme.addEventListener('change', e => {
    if (e.matches) {
        link.href = './dark.css'
    } else {
        link.href = './light.css'
    }
})

---

---

Windows 设置主题：开始 -> 设置 -> 个性化 -> 颜色 -> 选择默认应用模式