Dark Mode

Slate UI Kit includes built-in dark mode support. All components automatically adapt to dark mode when the .dark class is applied to a parent element.

Setup

Dark mode is automatically configured via CSS variables. No additional setup is required!

Usage

Class-Based Dark Mode

Apply the dark class to enable dark mode:

example.blade.php

<html class="dark">
    <!-- Your app -->
</html>

<html class="dark">
    <!-- Your app -->
</html>

Toggle Dark Mode with Alpine.js

Toggle dark mode dynamically:

example.blade.php

<div x-data="{ dark: false }">
    <button @click="dark = !dark; document.documentElement.classList.toggle('dark', dark)">
        Toggle Dark Mode
    </button>
    
    <!-- Your content -->
</div>

<div x-data="{ dark: false }">
    <button @click="dark = !dark; document.documentElement.classList.toggle('dark', dark)">
        Toggle Dark Mode
    </button>
    
    <!-- Your content -->
</div>

Using System Preference

With Tailwind CSS v4, dark mode uses prefers-color-scheme by default. To use class-based dark mode, configure it in your CSS:

example.blade.php

@theme {
    /* Your theme variables */
}

/* Dark mode uses .dark class */
.dark {
    /* Dark mode variables */
}

@theme {
    /* Your theme variables */
}

/* Dark mode uses .dark class */
.dark {
    /* Dark mode variables */
}

Customization

Override Dark Mode Colors

Override CSS variables in resources/css/slate.css:

example.blade.php

.dark {
    --color-primary: 142 70% 45%; /* Custom dark mode primary */
    --color-background: 222.2 84% 4.9%; /* Custom dark background */
    /* ... other overrides */
}

.dark {
    --color-primary: 142 70% 45%; /* Custom dark mode primary */
    --color-background: 222.2 84% 4.9%; /* Custom dark background */
    /* ... other overrides */
}

Component-Specific Dark Mode

Components automatically use dark mode colors when the .dark class is present. No additional configuration needed!

Examples

Button in Dark Mode

example.blade.php

<div class="dark">
    <x-slate::button>Dark Mode Button</x-slate::button>
</div>

<div class="dark">
    <x-slate::button>Dark Mode Button</x-slate::button>
</div>

Input in Dark Mode

example.blade.php

<div class="dark">
    <x-slate::input placeholder="Dark mode input" />
</div>

<div class="dark">
    <x-slate::input placeholder="Dark mode input" />
</div>

Color System

Slate uses semantic colors that automatically adapt to dark mode:

background / foreground - Page background and text
primary / primary-foreground - Main brand color
muted / muted-foreground - Subtle backgrounds/text
border - Border colors
And more...

All colors are defined in slate.css with both light and dark mode values using Tailwind CSS v4's @theme system.

Next Steps

Theming - Learn more about customizing colors
Components - See all components in dark mode