Theme Switcher

[nerisonpitogo]

Please add a theme swithcer for dark, light, and system options.

[mauritskorse]

Cant you already do that using a dropdown and some alpine?

something like:

<flux:tooltip content="Switch to dark mode">
    <flux:navbar.item icon="moon" iconVariant="outline" iconSize="sm" label="Dark mode" @click="$store.darkMode.toggle()" x-show="!$store.darkMode.mode == 'dark'" x-cloak></flux:menu.item>
</flux:tooltip>
<flux:tooltip content="Switch to light mode">
    <flux:navbar.item icon="sun" label="Light mode" @click="$store.darkMode.toggle()" x-show="$store.darkMode.mode == 'light'" x-cloak></flux:menu.item>
</flux:tooltip>
 

or as a dropdown

<flux:dropdown>
    <flux:button icon-trailing="chevron-down">
       <flux:icon.sun x-cloak x-show="$store.darkMode.mode == 'sun'" />
       <flux:icon.sun x-cloak x-show="$store.darkMode.mode == 'moon'" /> 
       <flux:icon.sun x-cloak x-show="$store.darkMode.mode == 'system'" /> 
        Theme</flux:button>
    <flux:menu>
        <flux:menu.item icon="moon" @click="$store.darkMode.set('dark')">Dark</flux:menu.item>
        <flux:menu.item icon="sun" @click="$store.darkMode.set('light')">Light</flux:menu.item>
        <flux:menu.item icon="computer-desktop" @click="$store.darkMode.set('system')">System</flux:menu.item>
    </flux:menu>
</flux:dropdown>

Of course, you still need an alpine store component that handles those methods. ie:

Alpine.store('darkMode', {
   mode: 'dark'
   //
})