Colors & Theming

Customize the look and feel with a single CSS variable.

Accent Color

The entire theme is built around the --accent CSS variable. By default, it's a calm blue.

You can change it globally or locally by setting the variable in your CSS or inline styles.

Global Override

:root {
  --accent: #10b981; /* Emerald green */
}

Inline Override

<html style="--accent: #f43f5e">
  ...
</html>

Preview:

Dark Mode

one.css includes a built-in dark theme. It respects the user's system preference automatically via prefers-color-scheme.

To force a specific theme, add the data-theme attribute to the <html> tag.

Force Dark Theme

<html data-theme="dark">
  ...
</html>

Force Light Theme

<html data-theme="light">
  ...
</html>

JavaScript Toggle

You can toggle the theme with a simple script:

document.documentElement.setAttribute('data-theme', 'dark');
// To revert to system/light:
document.documentElement.removeAttribute('data-theme');