Chromatic · 色彩主题实验室
克莱因蓝
勃艮第红
马尔斯绿
蒂芙尼蓝
申布伦黄
深色模式

Chromatic · 色彩叙事

每种颜色
都有它自己的语言

五款经典色系 + 深色模式,一键切换整个页面的气质。
从克莱因蓝的深邃到申布伦黄的明媚,每个主题都是一次重新讲述。

探索主题集 →

色阶与对比

每个主题都经过精心配比——主色、辅助色、背景色与文字色层层递进,确保在任何色相下都保持清晰可读的信息层级。

无障碍 对比度

瞬间切换

基于 CSS 变量与 data-theme 驱动,所有颜色变化经由 0.4 秒过渡动画平滑衔接。点击色块,30 余个变量同时流转,没有生硬跳变。

CSS 变量 过渡动画

响应式布局

Flexbox 与 Grid 配合实现的卡片自适应性布局,在手机、平板与桌面间无缝适配。三种视图下保持一致的视觉节奏与间距系统。

Grid 自适应

Chromatic Theme Lab · 纯原生 CSS 变量 + Vanilla JS 构建