主题切换

CSS 变量 + 跟随系统

核心思路

核心

建立多套主题变量（例如：明、暗两种）

适配整个网站推荐使用 :root（全局适配）。这里以 .box 为例（局部适配）：

scss

.box {
  &[data-theme='light'] {
    color-scheme: light;
    --bg-color: #fff;
    --text-color: #000;
    --card-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  &[data-theme='dark'] {
    color-scheme: dark;
    --bg-color: #000;
    --text-color: #fff;
    --card-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
  }
}

根据需求切换主题
“主题标识” 可以放在 class 类名中切换，也可以放在 data-* 中切换。这里以 data-* 为例：
js
```
boxEl.dataset.theme = 'dark'
```

跟随系统

在 css 中：

css

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

在 js 中（更灵活）：

const match = matchMedia('(prefers-color-scheme: dark)')
const followOS = () => {
  boxEl.dataset.theme = match.matches ? 'dark' : 'light'
}
match.addEventListener('change', followOS)

示例

Lorem

Lorem ipsum dolor sit amet.

主题切换 ​

CSS 变量 + 跟随系统 ​

核心思路 ​

示例 ​

主题切换

CSS 变量 + 跟随系统

核心思路

示例