2026.07.12
一套代码，四个平行世界：多主题设计系统的工程化实践
换肤不是换一个背景色。这篇付费长文完整拆解「拾星集」的多主题架构：CSS 变量三层令牌体系、Tailwind v4 的运行时换装、按主题懒加载的 Three.js 场景、以及一次圆形扩散过场动画的全部实现细节——你现在就可以点右上角的调色盘亲手验证。
你现在看到的这个博客，右上角有一个调色盘按钮。点开它，选「樱落物语」——深空星云会在一个圆形涟漪里退场，晨光、和纸与花瓣雨接管整个页面：配色、玻璃质感、滚动条、列表符号、光标辉光、乃至身后的整个 3D 世界，全部一起换装。
再切到「霓虹残响」，雨丝和网格地平线亮起；切到「绯红警戒」，你会坐进一个机甲驾驶舱。
这不是四个网站。这是同一棵组件树、同一套业务代码，四份设计令牌与四个 3D 场景。本文是这套系统的完整工程拆解——不只是「怎么做」，更是每一个架构决策背后的「为什么」：
你将读到什么
- 多主题系统的三层令牌架构：原始值 → 语义令牌 → 组件消费，边界怎么切才不会失控
- Tailwind CSS v4 时代的换肤正解：为什么
data-theme+ CSS 变量覆盖完胜dark:前缀和多份构建 - 亮色主题是试金石：一个深色站点引入亮色主题时会暴露的七类硬编码陷阱
- Three.js 场景怎么跟着主题走：React.lazy 按需加载 3D 世界，GL 上下文复用不重建
- 圆形扩散换肤过场的完整实现：clip-path、GSAP timeline 与「动画中点换装」的时序设计
- 防闪烁三件套：首帧内联脚本、meta theme-color、localStorage 的容错读写
全文约 6500 字，附可直接照抄的代码骨架。若你下一步是新场景默认节点材质或 WebGPU 后端，见《从 GLSL 到 WebGPU/TSL》——主题换皮与渲染后端是两条轴，别捆成一个 Epic。以下是完整内容——