Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Dark mode toggle

An Alpine-powered control that toggles the .dark class on <html>. It renders x-slate::button, so every button prop works here too.

The preferred theme is stored in localStorage under slate-theme (dark / light) and restored on load. Include a small boot script in your layout <head> (see the docs site theme-init component) to avoid a flash of the wrong theme.

Usage
example.blade.php 
<x-slate::dark-mode-toggle />

Defaults are variant="ghost" and size="icon".

Variants
example.blade.php 
<div class="flex items-center gap-2">
    <x-slate::dark-mode-toggle />
    <x-slate::dark-mode-toggle variant="outline" />
    <x-slate::dark-mode-toggle variant="secondary" />
</div>

Sizes
example.blade.php 
<div class="flex items-center gap-2">
    <x-slate::dark-mode-toggle size="icon-xs" />
    <x-slate::dark-mode-toggle size="icon-sm" />
    <x-slate::dark-mode-toggle size="icon" />
    <x-slate::dark-mode-toggle size="icon-lg" />
</div>

Props

Same as Button: variant, size, rounded, animation, as, type, plus any HTML attributes (class, etc.).

Requirements

Alpine.js must be loaded on the page. Livewire 3 projects include Alpine by default.

Last updated .