CSS 变量生成
把颜色、间距、字号、圆角、阴影、字体整理成一组设计令牌，一键生成 :root 自定义属性、暗色模式覆盖块，以及 Tailwind @theme 与 SCSS 变量形式。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
输出设置
令牌名用 kebab-case（例如 primary、font-size-base），变量名会自动拼成 --uk-color-primary
设计令牌
实时预览
预览使用亮色值；暗色块在代码里单独输出
设计令牌预览
这段文字使用令牌里的字号、字体、圆角、间距与阴影。
生成的代码
:root {
--uk-color-primary: #3b82f6;
--uk-color-surface: #ffffff;
--uk-color-text: #0f172a;
--uk-spacing-sm: 8px;
--uk-spacing-md: 16px;
--uk-font-size-base: 16px;
--uk-radius-md: 8px;
--uk-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
--uk-font-family-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}
[data-theme="dark"] {
--uk-color-primary: #60a5fa;
--uk-color-surface: #0f172a;
--uk-color-text: #e2e8f0;
}这个工具能做什么
- 把一套品牌色、间距、字号、圆角、阴影整理成设计令牌，一次生成 :root 自定义属性，粘进全局样式表就能全站复用。
- 给已有项目补暗色模式：每个令牌填一个暗色值，工具会额外输出 [data-theme="dark"] 覆盖块，切换主题时无需改任何组件。
- 在 CSS 与 Tailwind v4 之间迁移：同一组令牌分别导出 CSS 自定义属性和 @theme 命名空间写法，对照着替换即可。
- 需要 Sass 变量时切换到 SCSS 形式，暗色值会写成 $name-dark，方便在老项目里按变量而非自定义属性接入。
示例
输入
格式 CSS 自定义属性，前缀 uk-，开启暗色覆盖；令牌：color/primary = #3b82f6（暗色 #60a5fa）、spacing/md = 16px
输出
:root {
--uk-color-primary: #3b82f6;
--uk-spacing-md: 16px;
}
[data-theme="dark"] {
--uk-color-primary: #60a5fa;
}令牌按颜色、间距、字号、圆角、阴影、字体的固定顺序输出；没有填暗色值的令牌不会出现在暗色块里。
常见问题
自定义属性和 Sass 变量该选哪个？
运行时能换主题就用自定义属性：它们参与层叠，可以靠 [data-theme="dark"] 或媒体查询在浏览器里直接切换。Sass 变量在编译期就被替换掉，改不了运行时主题，但兼容性最好，老项目或需要计算（颜色函数、循环）时更顺手。
暗色模式为什么不用 @media (prefers-color-scheme: dark)？
工具输出的是手动切换方案 [data-theme="dark"]，因为它可以覆盖系统偏好、支持用户自己选主题。如果你只跟随系统，把选择器改成 @media (prefers-color-scheme: dark) 即可，块里的声明不用动。
Tailwind @theme 的输出为什么和我写的变量名不一样？
Tailwind v4 的 @theme 按命名空间识别令牌：颜色是 --color-*、间距是 --spacing-*、字号是 --text-*、字体是 --font-*、阴影是 --shadow-*。所以 @theme 块里用的是命名空间名（--color-primary），而暗色覆盖块仍然用自定义属性名（--uk-color-primary）以便运行时切换。
令牌名有什么限制？
必须是 kebab-case：以小写字母开头，只含小写字母、数字和连字符，例如 primary、font-size-base。同一个分组里不允许重名，否则生成的 CSS 会出现两个同名声明，后者静默覆盖前者。值里也不能出现 ; { }，它们会把输出拆成非法语法。
生成结果里会有重复声明吗？
不会。生成前会先检查变量名唯一性，发现重名直接报错而不是输出；同一令牌在亮色块和暗色块各出现一次属于设计意图，不算重复。
关键词：css variablescustom propertiesdesign tokensthemedark modetailwind themescss variablesCSS 变量设计令牌自定义属性暗色模式主题变量