显示侧边栏

深色模式

Flux 开箱即用地支持深色模式。

亮色

深色

跟随系统

配置 Tailwind

要充分利用 Flux 的深色模式控制，你需要确保 Tailwind CSS 已配置为使用深色模式的 selector 策略，只需将下面内容添加到你的 resources/views/app.css 文件中：

@import "tailwindcss";@import '../../vendor/livewire/flux/dist/flux.css';@custom-variant dark (&:where(.dark, .dark *));

完成上述设置后，Flux 便可通过为应用的 <html> 元素添加/移除 .dark 类来切换深色模式。

禁用深色模式自动处理

默认情况下，Flux 会根据用户的系统偏好或所选外观，在 html 元素上添加深色类名，以处理你应用的外观。

如果你不希望由 Flux 代为处理，可以从你的布局文件中移除 @fluxAppearance 指令。

<head>    ...--    @fluxAppearance</head>

现在你可以手动管理应用的外观。

JavaScript 工具

在你的应用中自行管理深色模式会比较繁琐。以下是你需要实现的一些关键行为：

为 <html> 元素添加/移除 .dark 类
将用户偏好存储在本地存储中
当选择 system 时遵循系统偏好
页面加载后监听系统偏好的变化

为简化上述复杂性，Flux 提供了两个 JavaScript/Alpine 工具，用于更轻松地管理深色模式：

// Get/set a users color scheme preference...$flux.appearance = 'light|dark|system'// Get/set the current color scheme of your app...$flux.dark = 'true|false'

基于这两个工具，你现在可以使用 Alpine 轻松构建用于管理深色模式的小部件。

例如，下面展示了如何编写一个简单的深色模式切换按钮：

<flux:button x-data x-on:click="$flux.dark = ! $flux.dark">Toggle</flux:button>

或者，如果你想让用户自行选择偏好的配色方案，可以这样写：

<flux:radio.group x-data x-model="$flux.appearance">    <flux:radio value="light">Light</flux:radio>    <flux:radio value="dark">Dark</flux:radio>    <flux:radio value="system">System</flux:radio></flux:radio.group>

如果你想在 Alpine 之外使用这些工具，你也可以在应用的任意位置，通过全局的 window.Flux JavaScript 对象访问 .appearance 和 .dark：

let button = document.querySelector('...')button.addEventListener('click', () => {    Flux.dark = ! Flux.dark})

示例

与其提供“一刀切”的方案，Flux 提供了一些示例，展示如何利用这些工具构建你自己的深色模式控制。

切换按钮

一个简单的切换按钮，可让用户在导航栏或侧边栏等位置控制深色模式。

<flux:button x-data x-on:click="$flux.dark = ! $flux.dark" icon="moon" variant="subtle" aria-label="Toggle dark mode" />

相比简单的切换按钮，这个下拉菜单更强大，允许用户在亮色、深色和系统模式之间进行选择。

<flux:dropdown x-data align="end">    <flux:button variant="subtle" square class="group" aria-label="Preferred color scheme">        <flux:icon.sun x-show="$flux.appearance === 'light'" variant="mini" class="text-zinc-500 dark:text-white" />        <flux:icon.moon x-show="$flux.appearance === 'dark'" variant="mini" class="text-zinc-500 dark:text-white" />        <flux:icon.moon x-show="$flux.appearance === 'system' && $flux.dark" variant="mini" />        <flux:icon.sun x-show="$flux.appearance === 'system' && ! $flux.dark" variant="mini" />    </flux:button>    <flux:menu>        <flux:menu.item icon="sun" x-on:click="$flux.appearance = 'light'">Light</flux:menu.item>        <flux:menu.item icon="moon" x-on:click="$flux.appearance = 'dark'">Dark</flux:menu.item>        <flux:menu.item icon="computer-desktop" x-on:click="$flux.appearance = 'system'">System</flux:menu.item>    </flux:menu></flux:dropdown>

切换开关

一个简单的切换开关，可让用户在设置页等位置控制深色模式。

深色模式

<flux:switch x-data x-model="$flux.dark" label="深色模式"  />

分段单选

一个分段式单选控件，可让用户在设置页等位置控制深色模式。

亮色

深色

跟随系统

<flux:radio.group x-data variant="segmented" x-model="$flux.appearance">    <flux:radio value="light" icon="sun">亮色</flux:radio>    <flux:radio value="dark" icon="moon">深色</flux:radio>    <flux:radio value="system" icon="computer-desktop">跟随系统</flux:radio></flux:radio.group>

或者，你可以使用仅图标的变体来节省横向空间：

<flux:radio.group x-data variant="segmented" x-model="$flux.appearance">    <flux:radio value="light" icon="sun" />    <flux:radio value="dark" icon="moon" />    <flux:radio value="system" icon="computer-desktop" /></flux:radio.group>