A one-click button that switches between light and dark mode. Reads the system preference on first visit, persists the choice to localStorage, and toggles the dark class on <html>.
Drop it anywhere — click to toggle between sun (light) and moon (dark) icons. The active icon matches the current mode.
<x-ui::theme-toggle />
All attributes are forwarded to the button, so pass a custom class to override the default w-10 h-10 size.
Small
Medium
Large
{{-- Small --}}
<x-ui::theme-toggle class="w-8 h-8" />
{{-- Medium (default) --}}
<x-ui::theme-toggle />
{{-- Large --}}
<x-ui::theme-toggle class="w-12 h-12" />Commonly placed in a navbar or header alongside other navigation actions.
Toggle above to see the whole page switch themes
{{-- Navbar usage --}}
<nav class="flex items-center justify-between px-6 py-3 border-b">
<span class="font-semibold">My App</span>
<div class="flex items-center gap-3">
<x-ui::button variant="ghost" size="sm">Docs</x-ui::button>
<x-ui::button variant="ghost" size="sm">GitHub</x-ui::button>
<x-ui::theme-toggle />
</div>
</nav>No configuration needed — the toggle handles everything automatically.
System preference on first visit
Reads prefers-color-scheme to set the initial mode if no preference is stored.
Persisted to localStorage
Saves the chosen theme under the key "theme" so it survives page reloads.
Toggles the dark class on <html>
Works with Tailwind's class-based dark mode strategy — all dark: variants respond instantly.
{{-- Reads system preference on first visit --}}
{{-- Persists choice in localStorage under the key "theme" --}}
{{-- Adds / removes the "dark" class on <html> --}}
<x-ui::theme-toggle />