Theme toggle
An icon button that switches between the light and dark themes. The preference is stored in the browser and, if the layout has a preference-url, also saved to the account. Since the icon is chosen with CSS, it looks right as soon as the page first opens.
Basic usage
A moon icon is shown in the light theme and a sun icon in the dark theme; clicking switches to the opposite of the theme on screen. For screen readers, the button text also changes with the theme ("Switch to the dark theme" / "Switch to the light theme").
<acun:theme-toggle />In the layout
acun:layout.sidebar and acun:layout.horizontal show the button in the top bar themselves. To move it elsewhere, pass :theme-toggle="false" to the layout and put the button in the slot you want; attributes such as class are added to the button.
<acun:layout.sidebar :theme-toggle="false">
<acun:slot:drawerFooter>
<acun:theme-toggle class="ms-auto" />
</acun:slot:drawerFooter>
{{ $slot }}
</acun:layout.sidebar>| Prop | Values |
|---|---|
theme-toggle | true | false (layout prop) |
Light, dark and system
The button only switches between light and dark. To also offer the user the option of following the operating system, build your own picker with $store.appearance.set().
<div x-data class="inline-flex gap-1 rounded-sm bg-gray-100 p-1 dark:bg-zinc-800">
<acun:button size="sm" variant="ghost" x-on:click="$store.appearance.set('light')">Light</acun:button>
<acun:button size="sm" variant="ghost" x-on:click="$store.appearance.set('dark')">Dark</acun:button>
<acun:button size="sm" variant="ghost" x-on:click="$store.appearance.set('system')">System</acun:button>
</div>| Prop | Values |
|---|---|
$store.appearance.set() | light | dark | system |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
(attributes) | — | Takes no props; attributes such as class and aria-* are added to the button |