CSS DEVELOPMENT LAB · 20

Dark Mode & Design Tokens

真正可维护的深色模式，不是把每个组件重新写一遍。更好的方式是：组件只引用语义化变量，主题切换时只改变 Token。

查看 Tokens 查看组件

DESIGN TOKENS

组件不直接记颜色

不让 Card 自己记住“浅色背景是 #fff、深色背景是 #181818”，而是统一引用 --surface、--text、--border 等语义变量。

--bg

页面背景

--surface

Card / Panel 背景

--text

主要文字

--muted

次级文字

--border

边框与分隔线

--accent

按钮与强调色

ONE COMPONENT CSS

同一套组件自动适配主题

下方 Card、按钮、标签和信息块没有单独写 Dark 版本。它们只使用 Token，所以主题改变后会一起更新。

NEW PRODUCT

Outdoor Composite Decking

一个简单产品卡片，用来观察背景、边框、文字、标签和按钮如何随主题统一变化。

查看详情下载资料

Semantic Tokens

使用“用途名称”，而不是“颜色名称”。

One Component Style

组件 CSS 不需要复制一套 .dark-card。

Global Theme Control

只在主题层统一修改变量。

THEME STRATEGY

系统主题 + 用户手动选择

默认情况下页面尊重系统的 prefers-color-scheme。用户点击右上角按钮后，会生成明确的手动主题，并保存到本地。

首次访问 跟随系统 light / dark

用户手动切换 写入 data-theme

下次访问 读取 localStorage 恢复选择

CORE CSS

主题只改变量

:root {
  --bg: #f7f7f4;
  --surface: #ffffff;
  --text: #171717;
}

[data-theme="dark"] {
  --bg: #101112;
  --surface: #181a1c;
  --text: #f4f4f2;
}

.card {
  background: var(--surface);
  color: var(--text);
}

PRACTICAL RULES

Design Tokens 最值得建立的四层

Primitive

最基础的颜色、字号、尺寸原子值。

Semantic

bg、surface、text、muted、border 等用途变量。

Component

button-bg、card-radius 等局部组件 Token。

Theme

Light / Dark 只负责重定义语义 Token。