前端主题切换方案

[fangmd]

方案一：

:root {
  --color-primary: 0, 0, 255;

  --foreground-rgb: 0, 0, 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: 255, 0, 0;

    --foreground-rgb: 255, 255, 255;
  }
}

.dark {
  color-scheme: dark;
}

body {
  color: rgb(var(--foreground-rgb));
}

.text-primary {
  color: rgb(var(--color-primary));
}

• color-scheme 不兼容 IE 浏览器

[fangmd]

方案二

document.body.style.setProperty('--primary-color', defaultSkin);

• style 注入变量
• 适合样式动态化的场景

[fangmd]

方案二

:root {
  --color-primary: 0, 0, 255;

  --foreground-rgb: 0, 0, 0;
  --bg-rgb: 255, 255, 255;
}

.dark {
  --color-primary: 255, 0, 0;

  --foreground-rgb: 255, 255, 255;
  --bg-rgb: 0, 0, 0;
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--bg-rgb));
}

.text-primary {
  color: rgb(var(--color-primary));
}

document.documentElement.classList.toggle('dark')

• 通过修改 html class 实现

[fangmd]

unocss 中自定义 rule 使用 CSS Variable

rules: [['text-custom', { color: 'rgb(var(--color-custom))' }]],

--color-custom: 0, 222, 255;

批量设置

[/^text-(\w+)$/, (match) => ({ color: `rgb(var(--color-${match}))` })],

--color-text-custom2: 255, 222, 255;

[chestnut-re]

Oh, my goodness, this is so amazing