Dark Mode

Built-in support for dark color schemes.

Overview

Plume uses the dark class strategy. This means you can toggle dark mode by adding or removing the dark class on the root HTML element (or body).

Examples

Basic Usage

Use the dark: prefix to style elements specifically for dark mode.

Light Mode Preview

This simulates the default appearance.

Dark Mode Preview

This simulates the dark appearance.

blade 
<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
                    <p>This card adapts to the theme.</p>
                    </div>

Usage

You can implement a simple theme switcher using Alpine.js or plain JavaScript.

javascript 
// Toggle dark mode
                    document.documentElement.classList.toggle("dark");

                    // Or using localStorage with Alpine.js
                    x-data="{
                        darkMode: localStorage.getItem(\"theme\") === \"dark\",
                    toggle() {
                    this.darkMode = !this.darkMode;
                    localStorage.setItem(\"theme\", this.darkMode ? \"dark\" : \"light\");
                    }
                    }"
                    :class="{ \"dark\": darkMode }"