Product guide · Theming

Theming

Monoline components consume semantic CSS variables. Set the theme once, then change those variables when your product needs a different voice.

Set up the theme

Import the complete theme from your root stylesheet. The package also registers its compiled component sources with Tailwind.

@import "tailwindcss";
@import "@chitrank2050/monoline-ui/theme.css";

<html lang="en" data-theme="dark">
  <body>{children}</body>
</html>

Override roles, not component selectors

Semantic tokens keep the same purpose in both themes. Override the small set your brand needs and let component styles continue to reference them.

Surfaces

--background, --surface, --surface-2, --card, --popover

Text

--text, --text-body, --text-secondary, --text-muted

Interaction

--accent, --accent-soft, --ring, --focus-ring

Shape

--radius-sm through --radius-3xl, plus --radius-pill

Motion

--duration-* and --ease-* transition tokens

@import "tailwindcss";
@import "@chitrank2050/monoline-ui/theme.css";

/* Load overrides after the package theme. */
[data-theme="light"] {
  --accent: oklch(0.52 0.12 38);
  --accent-soft: oklch(0.52 0.12 38 / 0.1);
}

[data-theme="dark"] {
  --accent: oklch(0.8 0.08 62);
  --accent-soft: oklch(0.8 0.08 62 / 0.14);
}

Avoid a theme flash

Fixed theme: Render data-theme on the server. This is the simplest option and has no client-side theme decision.
Saved preference: Read a cookie on the server, or run a small inline script before the application paints. Keep the initial attribute and hydrated state equal.
System theme: Omit an explicit theme and let CSS resolve prefers-color-scheme without waiting for JavaScript.