主题系统设计

主题系统的设计思路

一个好的主题系统应该让读者无感知地切换明暗模式。

CSS 变量方案

使用 CSS 自定义属性作为主题令牌：

:root {
  --text-color: #1a1a1a;
  --bg-color: #ffffff;
}

[data-theme="dark"] {
  --text-color: #e0e0e0;
  --bg-color: #1a1a1a;
}

三种模式

• 浅色模式 - 固定使用浅色主题
• 深色模式 - 固定使用深色主题
• 跟随系统 - 通过 prefers-color-scheme 媒体查询自动切换

用户的选择保存在 localStorage 中，下次访问时自动恢复。