new
The real time chat demo: Ping →

Theme Toggle

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

Setup

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

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

Example

It is not expected to have more one of these on page. Make sure to refresh this page if you click more than one bellow.

<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>

maryUI
Sponsor