php artisan aura:add theme-controllerCopies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.
composer require bluestarsystem/aura-ui
php artisan aura:installFull installation instructions in the Installation guide.
Overview
<x-aura::theme-controller> switches the theme and remembers the choice.
System is a real third state, not the absence of a choice. Someone who has never touched the control should follow their operating system; someone who chose light should stay on light when the OS flips at sunset. Two buttons cannot express that, which is why this is a three-way radio group.
Basic Usage
Theme
<x-aura::theme-controller /><x-aura::theme-controller />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label |
string|null |
null |
Names the group. Defaults to the translated "Theme". |
storageKey |
string |
'aura-theme' |
The localStorage key. |
Reacting to the change
The control dispatches aura-theme-changed on the window with { theme, dark }, so a
chart or a map that has to redraw its own colours can listen for it.
window.addEventListener('aura-theme-changed', (e) => {
myChart.setPalette(e.detail.dark ? darkPalette : lightPalette)
})
Accessibility
role="radiogroup"with real radios: arrow keys, one tab stop and the "2 of 3" announcement come from the browser.- The icons are
aria-hiddenand each option carries its name in text only a screen reader hears — an icon alone is not a name. - On
system, a change to the OS preference is followed as it happens, not only read once at load.