显示侧边栏

主题

我们精心设计了 Flux，使其开箱即用就具有出色的外观；不过，每个项目都有自己的风格定位。你可以从我们精选的配色方案中进行选择，或通过自定义 CSS 变量来构建你自己的主题。

使用我们的交互式主题构建器创建你的主题 ->

基础色

在一个 Flux 项目中，基本上会有两种颜色：基础色 与 强调色。

基础色是你的应用大多数内容所使用的颜色，常用于文本、背景、边框等。

强调色用于应用中的主要操作按钮以及其他交互元素。

Flux 默认以 “zinc” 作为基础色，但你完全可以使用任何你偏好的灰度色阶。

由于 zinc 在 Flux 源码中被硬编码，如果你想使用不同的基础色，需要在你的 CSS 文件中对它进行重定义。

以下是在你的 CSS 中将 “zinc” 重定义为 “slate” 的示例：

/* resources/css/app.css *//* Re-assign Flux's gray of choice... */@theme {  --color-zinc-50: var(--color-slate-50);  --color-zinc-100: var(--color-slate-100);  --color-zinc-200: var(--color-slate-200);  --color-zinc-300: var(--color-slate-300);  --color-zinc-400: var(--color-slate-400);  --color-zinc-500: var(--color-slate-500);  --color-zinc-600: var(--color-slate-600);  --color-zinc-700: var(--color-slate-700);  --color-zinc-800: var(--color-slate-800);  --color-zinc-900: var(--color-slate-900);  --color-zinc-950: var(--color-slate-950);}

现在，Flux 会使用 “slate” 作为基础色来替代 “zinc”，并且你可以像平常一样在应用的工具类中使用 “slate”：

<flux:text class="text-slate-800 dark:text-white">...</flux:text>

强调色

在底层，Flux 通过 CSS 变量来管理其强调色。这意味着你可以将强调色更改为任意你喜欢的颜色。

我们推荐使用带有预设配色的交互式主题构建器。当然，如果你想使用其他强调色，也可以在你自己的 CSS 文件中定义下列 CSS 变量：

/* resources/css/app.css */@theme {    --color-accent: var(--color-red-500);    --color-accent-content: var(--color-red-600);    --color-accent-foreground: var(--color-white);}@layer theme {    .dark {        --color-accent: var(--color-red-500);        --color-accent-content: var(--color-red-400);        --color-accent-foreground: var(--color-white);    }}

你会注意到，Flux 在亮色模式与暗色模式中都为其强调色调色板使用了三种不同的色相。下面是每种色相的说明：

变量	说明
--color-accent	主要的强调色，用作主按钮的背景色。
--color-accent-content	通常更深的色相，用于文本内容以提升可读性。
--color-accent-foreground	在强调色背景之上的文本内容颜色（通常为文字颜色）。

Tailwind 允许你以内联方式引用 CSS 变量颜色，例如：

<button class="bg-[var(--color-accent)] text-[var(--color-accent-foreground)]">

不过，这种语法不够易用。你可以改用如下工具类：

<button class="bg-accent text-accent-foreground">

强调色 Props

某些设计元素（如标签页和链接）默认使用强调色。如果你想关闭此行为并改用基础色，可以使用 :accent="false" 这个 prop：

<!-- Link --><flux:link :accent="false">Profile</flux:tab><!-- Tabs --><flux:tabs>    <flux:tab :accent="false">Profile</flux:tab>    <flux:tab :accent="false">Account</flux:tab>    <flux:tab :accent="false">Billing</flux:tab></flux:tabs><!-- Navbar --><flux:navbar>    <flux:navbar.item :accent="false">Profile</flux:navbar.item>    <flux:navbar.item :accent="false">Account</flux:navbar.item>    <flux:navbar.item :accent="false">Billing</flux:navbar.item></flux:navbar><!-- Navlist --><flux:navlist>    <flux:navlist.item :accent="false">Profile</flux:navlist.item>    <flux:navlist.item :accent="false">Account</flux:navlist.item>    <flux:navlist.item :accent="false">Billing</flux:navlist.item></flux:navlist>