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

Make sure your app.css has this settings.

/* Tailwind */
@import "tailwindcss";
 
/* daisyUI */
@plugin "daisyui" {
    themes: light --default, dark --prefersdark;
}
 
/* Dark theme variant support */
@custom-variant dark (&:where(.dark, .dark *));

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

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.

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 app.css as described on daisyUI docs.

@plugin "daisyui" {
    themes: light --default, dark --prefersdark, retro, aqua;
}

Then, set the theme names on x-theme-toggle component.

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

Made with by Robson Tenório and contributors.