Theme Toggle

This component toggles between light/dark themes and includes an automatic persistent state.

It is not expected to have more than one x-theme-toggle on the same page. Make sure to refresh the page while toying around with the theme toggle.

Setup

Enable native Tailwind dark mode support on tailwind.config.js.

export default {
    ...
    darkMode: 'class', 
}

Example

<x-theme-toggle />
<x-theme-toggle class="btn btn-circle" />
<x-theme-toggle class="btn btn-circle btn-ghost" />
<x-theme-toggle class="btn" @theme-changed="console.log($event.detail)" />

Manual activation

You can toggle theme from anywhere by dispatching a mary-theme-toggle event.

<x-menu>
    <x-menu-item title="Theme" icon="o-swatch" @click="$dispatch('mary-toggle-theme')" />
</x-menu>

In this case place a hidden instance of x-theme-toggle on same layout file.

<body>
    {{-- Main content --}}
    <main>
        {{ $slot }}
    </main>
 
    {{-- Side menu --}}
    <x-menu>
        <x-menu-item title="Theme" icon="o-swatch" @click="$dispatch('mary-toggle-theme')" />
    </x-menu>
 
    {{-- Theme toggle --}}
    <x-theme-toggle class="hidden" />
</body>

Custom theme toggle

By default, this component uses the standard "light" and "dark" themes shipped with daisyUI. But, you can customize them by passing the theme names.

First, you need to set this additional themes at tailwind.config.js as described on daisyUI docs.

daisyui: {
    themes: ["light", "dark", "aqua", "cupcake"],
},

<x-theme-toggle darkTheme="aqua" lightTheme="retro" />

It is not expected to have more than one x-theme-toggle on the same page. Make sure to refresh the page while toying around with the theme toggle. Then, click on the theme toggle from the main navbar of this docs to back to default "light" and "dark" themes.

maryUI

Sponsor