Color Modes

Apply light, dark, and system color modes.

Setup

Color modes are included in manifest.js with all core plugins, or can be selectively loaded.

<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js"
    data-plugins="colors"></script>

Modes

Light/Default

The light mode is the default, picking up all variable and static colors not in a .dark declaration.

:root {
    --color-page: #efefef;
}

.card {
    background-color: var(--color-page);
}

.card {
    background-color: white;
}

See theme styles for Manifest's suggested color variables.

Dark

Use the .dark class to override light/default color values. The plugin operates by adding or removing the dark class in the <html> tag.

/* Light mode */
:root {
    --color-page: #efefef;
}

/* Dark mode */
.dark {
    --color-page: #000000;
}

/* Card will adjust background for current mode */
.card {
    background-color: var(--color-page);
}

/* Light mode element */
.card {
    background-color: #eee;
}

/* Dark mode element */
.dark .card {
    background-color: #222;
}

Using Tailwind, dark colors can also be set in HTML using the dark: variant on color utility classes.

<div class="bg-page dark:bg-surface-1">We're going dark</div>

System

The system mode follows the user's system preference for light or dark mode, including automatic switching at dawn and dusk. No additional configuration is required.

UI Toggles

Allow users to toggle color modes with the x-colors directive, using the following values:

'light' sets to light mode
'dark' sets to dark mode
'system' sets to system mode
'toggle' toggles between light and dark modes

Buttons

<button x-colors="'light'"><span x-icon="lucide:sun"></span><span>Light</span></button>
<button x-colors="'dark'"><span x-icon="lucide:moon"></span><span>Dark</span></button>
<button x-colors="'system'"><span x-icon="lucide:sun-moon"></span><span>System</span></button>

See buttons for details on the element.

Toggle

<button x-colors="'toggle'" x-icon="$colors.current === 'light' ? 'ph:moon' : 'ph:sun'" aria-label="Toggle Color Mode"></button>

See icons for details on conditional icons.

<button x-dropdown.bottom="color-mode" aria-label="Color Mode Menu" x-icon="$colors.current === 'light' ? 'lucide:sun' : $colors.current === 'dark' ? 'lucide:moon' : 'lucide:sun-moon'"></button>
<menu popover id="color-mode" disabled="min-w-0">
    <li x-colors="'light'" :disabled="$colors.current === 'light'" x-icon="lucide:sun" aria-label="Light"></li>
    <li x-colors="'dark'" :disabled="$colors.current === 'dark'" x-icon="lucide:moon" aria-label="Dark"></li>
    <li x-colors="'system'" :disabled="$colors.current === 'system'" x-icon="lucide:sun-moon" aria-label="System"></li>
</menu>

See dropdowns for details on the menu element.

Current Mode

Display the current mode's title with x-text="$colors.current":

<p>Join the <strong x-text="$colors.current"></strong> side</p>