The real time chat demo: Ping →

Theme Toggle

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


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

export default {
darkMode: 'class',


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-item title="Theme" icon="o-swatch" @click="$dispatch('mary-toggle-theme')" />

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

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