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)