Theme

DotNaos theming extends Tailwind's CSS-first theme instead of maintaining a second foundation. Tailwind owns the base spacing, type, and utility namespaces; DotNaos adds semantic appearance roles such as --color-text, --color-control, and --color-accent.

Load the contract

Import the layers once, in this order:

@import "tailwindcss";
@import "@dotnaos/design/tokens.css";
@import "@dotnaos/design/theme.css";
@import "@dotnaos/design/styles.css";
@import "@dotnaos/design/tailwind-theme.css";

tailwind-theme.css is imported last so its native variables such as --spacing, --radius-md, --text-sm, and --shadow-md override framework defaults.
Semantic colors live directly in Tailwind's --color-* namespace, producing utilities such as bg-bg-0, text-text-muted, and ring-focus-ring without an alias layer.
tokens.css contains only DotNaos-specific corner shapes, because Tailwind has no equivalent namespace for them.
theme.css overrides the same Tailwind color and shadow variables for light and dark appearances.
styles.css loads shared fonts and low-level behavior.

Select an appearance

Set data-theme to light, dark, or system on the document root or any scoped subtree. Components inherit CSS variables directly; no React provider is required.

<html data-theme="system">
  <!-- application -->
</html>

Theme.Toggle only changes this attribute. Persistence is an application concern, so products can choose cookies, local storage, a user profile, or no persistence at all.

Customize a product theme

Override roles at the application boundary instead of restyling individual components:

:root,
[data-theme="light"] {
  --color-accent: #0067d9;
  --color-accent-hover: #0058ba;
}

[data-theme="dark"] {
  --color-accent: #46a2ff;
  --color-accent-hover: #75b9ff;
}

Keep one meaning per role and define both appearances. If a new shared role is missing, add it to the design package rather than borrowing an unrelated variable whose current value happens to look right.

Continue with the complete token reference and the component usage rules.

Load the contract

Select an appearance

Customize a product theme

On this page