Dark Mode

The Dark Mode functionality is a js based feature that allows the user to switch between a light dark and system theme.

Prepare Tailwind

To use the dark mode, you need to add the following to your css file:

Copy to clipboard

@custom-variant dark (&:where(.dark, .dark *));

Concepts

For using the dark mode, Aura provides the $aura.theme alpine store that can be used to switch between the themes. When used simply in the front-end, the mode can be switched by using the x-model directive from alpine.js.

Alternatively, when switching the theme from the backend, a window event switch-theme can be dispatched with the theme as the payload. The initially loaded theme can be set by setting the data-aura-theme attribute on the html tag to light, dark, or system.

JS Event

Copy to clipboard

window.dispatchEvent(new CustomEvent('switch-theme', {detail: 'dark'}));

It can be used in the following ways:

Light

Dark

System

Copy to clipboard

<aura:select custom x-model="$aura.theme">
    <aura:select.option value="light">Light</aura:select.option>
    <aura:select.option value="dark">Dark</aura:select.option>
    <aura:select.option value="system">System</aura:select.option>
</aura:select>

Dark Mode

Copy to clipboard

<aura:toggle x-model="$aura.dark" label="Dark Mode" />

Light

Dark

System

Copy to clipboard

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

Copy to clipboard

<aura:button icon="sun" x-on:click="$aura.theme = 'light'" />
<aura:button icon="moon" x-on:click="$aura.theme = 'dark'"/>
<aura:button icon="computer-desktop" x-on:click="$aura.theme = 'system'"/>

Copy to clipboard

<aura:dropdown>
    <aura:button icon="cog-6-tooth" />
    <aura:dropdown.content>
        <aura:dropdown.button 
            icon-start="moon"
            x-on:click="$aura.theme = 'light'"
            x-show="$aura.theme === 'dark'"
        >
            Dark Mode
        </aura:dropdown.button>
        <aura:dropdown.button 
            icon-start="sun"
            x-on:click="$aura.theme = 'system'"
            x-show="$aura.theme === 'light'"
        >
            Light Mode
        </aura:dropdown.button>
        <aura:dropdown.button 
            icon-start="computer-desktop"
            x-on:click="$aura.theme = 'dark'"
            x-show="$aura.theme === 'system'"
        >
            System Mode
        </aura:dropdown.button>
    </aura:dropdown.content>
</aura:dropdown>

Home