Flux 的主题化
版本 ^1.1.0
不想让你的 Flux 应用看起来和别人一样？交给我们吧。Flux 现在完全支持主题化！
三色体系，一个主色
在理想情况下，你只需选择一个主色就能为整个应用着色。但现实并非如此。我们的经验是：一个完善的系统至少需要三种主色相关的颜色来覆盖所有色相：
基础主色：用于主按钮背景等元素。
前景色：叠加在基础主色之上，常用于文本。
内容色：更强的主色变体，适用于文字等细线条元素。
然后可根据需要通过不透明度或 color-mix() 对这些颜色进行微调，但以上三种是构建配色的核心。
精选配色
我们为 Tailwind 调色板中的每一种颜色都策划了主题。每种组合都由人工挑选，以确保观感恰到好处。
例如，当黄色等主色过浅、无法满足对比度标准时，我们会选择深色前景而非白色。
深色模式
当然，每个主题都内置深色模式，但这可不是你所熟悉的那种“传统暗黑”。
许多地方我们采用了完全不同的风格处理，以确保明暗两种模式下的设计“感觉”一致。
例如，在亮色模式中，当你悬停在单选卡片上时，背景和边框会呈现主色的细腻色调；而在暗色模式中，卡片则仅变为更浅的灰色。
这是因为亮色模式下为元素加色会让它看起来更“亮”、更接近用户；而在暗色模式下加色会显得更“暗”，更远且与背景更融合。在这些情况下，我们会通过透明度混入更多白色，或干脆不加色。
选择性关闭主题着色
某些组件默认会应用主题着色，你可能希望它们以基础灰度呈现。
这时可以使用 accent 属性来“退出”主题版本。
例如，将链接渲染为黑/白，而不是你的主色：
<flux:link :accent="false">个人资料</flux:link>选择你的灰度
Flux 默认采用 zinc 作为灰度。这种黑白设计看起来干净现代，但对某些主色并非总是最佳搭配。
我们已为特定主色预选了更佳的灰度组合。你只需在主题构建器中选择主色，我们会自动调整灰度以匹配。
当然，如果你有其他偏好，也可以自行选择灰度。
CSS 变量
@layer base {
:root {
--color-accent: var(--color-amber-400);
--color-accent-content: var(--color-amber-600);
--color-accent-foreground: var(--color-amber-950);
}
.dark {
--color-accent: var(--color-amber-400);
--color-accent-content: var(--color-amber-400);
--color-accent-foreground: var(--color-amber-950);
}
}我们为所有主色使用 CSS 变量，以便你可以按需轻松自定义。
我们还选用了符合 Tailwind 4 命名约定的变量名，这样在 Tailwind 4 中你无需任何配置即可在 bg-accent 等工具类中直接使用它们。
你也会注意到这些变量具有自适应能力：在深色模式下它们会自动切换取值，因此无需再写诸如 bg-accent dark:bg-accent-dark 这样的样式。
迎接 Tailwind 4
Tailwind 4 即将发布，我们确保充分利用其新特性，并采用上述变量命名等约定。
Tailwind 4 的调色使用更现代的 oklab 色彩空间，而非你熟悉的标准 sRGB（hsl()、rgb() 等）。
/* Tailwind 3 */
--color-red-500: #ef4444;
/* Tailwind 4 */
--color-red-500: oklch(0.637 0.237 25.331);这在现代显示器上解锁了此前无法呈现的全新色彩层次。
因此，你会发现 Flux 主题中的颜色比 Tailwind 3 时代更为鲜艳。
在过渡期内，我们从 Tailwind 4 公测版中将所有 CSS 颜色变量复制到了 Flux。待 Tailwind 4 正式发布后，我们将改用其内置变量并移除这些复制。
我们花费了无数时间研究与实验与主题相关的一切，对目前的成果非常满意，也希望你同样喜欢。