Theming

Load the default theme

1import "@lenso/tokens/styles.css";

Import the stylesheet once from your rendering entry or root layout. Components read its CSS variables; loading only compiled StyleX classes does not supply a theme.

Customize a scope

Override semantic variables in your application stylesheet, after the theme import:

1.project-theme {2  --accent: oklch(0.55 0.18 270);3  --accent-foreground: oklch(1 0 0);4  --radius: 0.625rem;5}

Apply the class to the document or a containing surface. Keep color pairs consistent, and inspect derived hover/soft colors when changing their base value. The Colors guide lists common roles.

Theme configuration center

Open the Theme builder for the standalone HeroUI v3.2.6-style editor: accent and neutral tint sliders, font and radius grids, 11 theme presets, light/dark preview, undo/redo, shuffle and shared links. Alongside the component mosaic, Dashboard, Mail, Chat and Finances are local examples built with live Lenso components. Their sample-data interactions need no external service; edits in these examples are not stored or included in theme links.

The builder generates both mode palettes from one appearance configuration. Edits update the address bar, so refreshing or opening a shared link restores the configuration without server storage. Use the top-right Share action to copy the link. Its code overlay exports CSS or TypeScript; JSON preserves editable builder settings and can be imported again. Custom fonts accept public Google Fonts stylesheet URLs.

Links now use individual query parameters. Earlier ?theme=... JSON links no longer restore settings; import a saved JSON configuration and use Share to generate a new link.

Applications can also configure individual semantic overrides directly through the same underlying typed API:

1import { defineTheme, themeToVariables, themeToCSS } from "@lenso/tokens";2import { ThemeScope } from "@lenso/ui";3
4const theme = defineTheme({5  name: "project",6  light: { accent: "oklch(0.55 0.18 270)", radius: "0.625rem" },7  dark: { accent: "oklch(0.75 0.15 270)" },8});9
10<ThemeScope11  theme="light"12  data-lenso-theme={theme.name}13  style={themeToVariables(theme, "light")}14>15  {/* Your components */}16</ThemeScope>;

For stylesheet delivery, write themeToCSS(theme) to a CSS file and load it after the default theme. Use both data-lenso-theme="project" and data-theme="light" (or "dark") on the intended scope. The default theme still supplies derived hover/soft colors and radius scales; the export contains only your overrides.

Portalled components

Portalled menus, dialogs and tooltips render outside their trigger's DOM ancestry. Lenso preserves the light/dark theme scope through its native portal wrappers; arbitrary custom classes are not automatically copied. Put shared overrides on the document, or ensure your custom portal container participates in the intended theme.

Component styling

Use xstyle for a local component override and CSS variables for a shared theme. Do not replace the component's entire compiled class output. See Styling.