CSS 变量主题系统

核心思路

用 CSS 自定义属性（CSS Variables）定义所有颜色值，主题切换只需改变根元素的属性值。

:root {
  --bg: #f5f5f0;
  --fg: #0a0a0a;
}

[data-theme="dark"] {
  --bg: #0a0a0a;
  --fg: #f5f5f0;
}

动画增强

主题切换时使用 clip-path: circle() 动画，从点击位置扩散墨色/宣纸色，营造墨渍晕染的效果。