Lenso UI

Foundation · Theme scope

Themes

Apply a complete Light or Dark theme to a subtree, then override only the semantic roles your product owns.

Create a scoped theme

Nested scopes inherit from their nearest parent. Portalled overlays can resolve the same scoped theme.

import { ThemeScope } from "@lenso/ui/theme-scope";

<ThemeScope theme="dark" overrides={{ "color.content.primary": "#f4f4f5" }}>
  <Workspace />
</ThemeScope>;

Start with a complete theme

  • Lenso UI supplies complete Light and Dark defaults.
  • Your application owns preference persistence, system-mode resolution, and theme selection.
  • Use public semantic paths such as color.surface.canvas in overrides.

Add the narrowest override

  • Nested scopes inherit values that their partial override does not replace.
  • Portalled overlays use the nearest scope's body-level host when no explicit container is supplied.
  • Override semantic roles rather than component selectors or raw implementation colors.
  • Resolve a system preference in your application, then pass a deliberate light or dark value.
Lenso UI