December 12, 2024
深色模式控制
版本 ^1.0.30
Flux 一直支持深色模式：当你的系统外观改变时，Flux 会随之适配。
不过，这种“跟随系统”的支持，与提供可独立于系统偏好、由站点自行完全控制的深色模式之间，存在着不小的差距。
在进入细节之前，先看看现在要创建一个如上图所示的深色模式切换器有多么简单。下面就是该切换器所使用的完整代码：
<flux:radio.group 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:button x-on:click="$flux.dark = ! $flux.dark" ... />新的 JavaScript API
正如你在上面的代码片段中所看到的，Flux 现在在 Alpine 表达式中提供了一个魔法对象 $flux 可供使用。
这个魔法对象上有两个与深色模式相关的属性：.dark 和 .appearance。
你可以通过布尔属性 $flux.dark 获取/设置应用的深色状态。也可以通过 $flux.appearance 获取/设置应用的主题偏好（该属性的取值为三者之一：light、dark、system）。
有了这两个简单的属性，你就可以实现任意形式的深色模式控制组件。例如：下拉选择、菜单、按钮、开关、单选组、卡片，或分段单选等。只受你的想象力限制。
如果你需要在 Alpine 之外进行控制，我们还在全局 window 上提供了一个 Flux 对象：window.Flux。
现在，你可以这样做：
let button = document.querySelector('...')
button.addEventListener('click', () => {
Flux.dark = ! Flux.dark
})底层是如何工作的？
开箱即用地，Flux 会在你页面的 <body> 元素上添加/移除 .dark 类。
这意味着你可以很容易地通过如下 Tailwind 配置，让 Tailwind 根据该类而不是系统偏好来切换：
module.exports = {
darkMode: 'selector',
...
}Flux 还处理了诸多细节，例如将用户的外观偏好存到 localStorage 中，以便在页面加载之间保持该选择。
我们也会在运行时监听系统偏好的变化，从而无需等待页面重新加载就能让站点自适应。
这些事儿自己做并不算火箭科学，但确实比你期望的要复杂。用起来吧。