LEMMOUI
DocsArchitectureSwappable Themes
Theme Engine

Swappable Themes

The engine powering zero-JS theme switching, custom skins, and dynamic cascading.

Interactive Playground

Select any theme below to observe instant live re-skinning across all components.

Active Theme:
neon
Dark Mode
CSS Scope:[data-theme="neon"].dark
Appearance Mode
Interactive Buttons
Sample
Buttons adapt to the active primary hue, hover states, and radius token.

Badges

Default
Secondary
Outline
Destructive
Token: bg-primary text-primary-foreground
Lemmo Studio
Visual Generation Canvas

Autonomous UI generation workspace synchronized with design system tokens.

Next.js 16
Tailwind v4
Swappable
Status: Active

6 Bundled Production Themes

Lemmo Neon

Official Lemmo Brand (#131517 & #D1FE17)

lemmoui/themes/neon.css

Midnight

SaaS Slate & Electric Indigo

lemmoui/themes/midnight.css

Emerald

Deep Obsidian & Fresh Green Tech

lemmoui/themes/emerald.css

Cyberpunk

Synthwave Neon Cyan & Magenta

lemmoui/themes/cyberpunk.css

Minimal

Brutalist Monochrome & Zero Radius

lemmoui/themes/minimal.css

Neutral

Balanced Standard Neutral Slate

lemmoui/themes/default.css

Zero-JS Re-theming Mechanism

Themes in Lemmo UI are pure CSS stylesheets targeting the HTML attribute data-theme. When you change data-theme="neon" to data-theme="midnight":

  • Zero JavaScript re-renders: The browser CSS engine natively cascades the new CSS variable values across all DOM elements instantly.
  • Nested Themability: You can apply a theme globally on <html data-theme="neon">, or scope a different theme to a specific card or section: <div data-theme="minimal">.

Creating a Custom Theme

Anyone can create a new theme by defining values for the token contract in a CSS file:

[data-theme="custom-sunset"] {
  --background: #120c18;
  --foreground: #f8f4fc;
  --card: #1c1424;
  --card-foreground: #f8f4fc;
  --primary: #ff6b4a;
  --primary-foreground: #ffffff;
  --secondary: #2c1b3a;
  --secondary-foreground: #ff6b4a;
  --border: rgba(255, 107, 74, 0.15);
  --radius: 0.75rem;
}