Dark Mode

µCSS manages the toggle between light and dark themes. Dark mode is activated either automatically via the user's system preference (prefers-color-scheme), or manually via the data-theme attribute on the root element.

Usage

No configuration is required for automatic mode. µCSS detects the system preference and adapts colors accordingly.

To force a theme, add data-theme on <html>:

<html data-theme="dark">

Available modes

Mode	Trigger	CSS Selector
Light (default)	System preference or `data-theme="light"`	`:root:not([data-theme="dark"])`
Auto dark	`prefers-color-scheme: dark` without `data-theme`	`@media (prefers-color-scheme: dark) { :root:not([data-theme]) }`
Forced dark	`data-theme="dark"`	`[data-theme="dark"]`

Manual toggle

A JavaScript button allows the user to toggle between themes:

<button id="theme-toggle">Toggle theme</button>

<script>
const btn = document.getElementById('theme-toggle');
btn.addEventListener('click', () => {
    const html = document.documentElement;
    const current = html.getAttribute('data-theme');
    html.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
});
</script>

Affected color variables

All µCSS color variables adapt to the theme. The main ones:

Variable	Light theme	Dark theme
`--mu-background-color`	`#fff`	`rgb(19, 22.5, 30.5)`
`--mu-color`	`#373c44`	`#c2c7d0`
`--mu-primary`	`#0172ad`	`#01aaff`
`--mu-muted-color`	`#646b79`	`#8891a4`
`--mu-card-background-color`	`#fff`	`rgb(24, 28.5, 38)`

The full list is available in Variables.

`color-scheme` property

µCSS sets color-scheme: light or color-scheme: dark depending on the active theme. This native CSS property informs the browser of the color scheme, which affects scrollbars, native form fields, and other browser UI elements.

Color customization

To override the colors of a theme, target the corresponding selector:

/* Override background in dark mode */
[data-theme="dark"] {
    --mu-background-color: #1a1a2e;
}

/* Override in light mode */
:root:not([data-theme="dark"]) {
    --mu-primary: #e63946;
}

Accessibility

Theme toggling must not modify the content or structure of the page.
Color contrasts comply with WCAG AA recommendations in both themes.
Using prefers-color-scheme as the default mode respects user preferences.
Provide a visible toggle control so users can override system settings when desired.