CSS variables / Theme tokens

先把颜色的骨架立起来。

这个页面保留为视觉系统的第一块试炼场。这里展示的不是写死的色值,而是一组语义化 CSS 变量:页面只关心 primary、secondary、tertiary 这些角色,真正的白昼和黑夜色值由全局样式统一切换。

这样以后在任何路径使用颜色时,只需要写对应变量。想换颜色,就回到 CSS 里改一次;主题切换时,所有引用变量的页面都会自动跟着变。

color primary

var(--accent-primary)

color secondary

var(--accent-secondary)

color tertiary

var(--accent-tertiary)

BG primary

var(--bg-primary)

BG secondary

var(--bg-secondary)

BG tertiary

var(--bg-tertiary)

text primary

var(--text-primary)

text secondary

var(--text-secondary)

text tertiary

var(--text-tertiary)