Theming System

Create brand-specific designs with MoonUI's powerful theming system. Easy customization with CSS variables, preset themes, and real-time preview.

CSS VARIABLES

Design Tokens

Customize with CSS variables

globals.css

--primary: 262.1 83.3% 57.8%

HSL Color System

Flexible opacity control

Dark Mode Support

Automatic theme switching

PRESET THEMES

6 Presets

Professional themes ready to use

terminal

$ moonui theme --set corporate

Default Theme

Clean and modern

Corporate, Creative

Business & design focused

Theme Configuration

Set up and customize your theme

1. Configure in moonui.config.js

Choose a preset theme or create a custom one:

moonui.config.js

module.exports = {
  theme: {
    preset: 'corporate',
    // Available: 'default' | 'corporate' | 'creative'
    // 'nature' | 'minimal' | 'ocean'
  }
}

2. Generate Theme CSS

Run the CLI command to generate your theme:

terminal

$ moonui theme --generate

3. Import Generated CSS

Import the generated theme in your global CSS:

globals.css

@import 'moonui-theme.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

Pro Tip

Use the PostCSS or Vite plugin for automatic theme generation during build time.

Design Token System

Comprehensive CSS variables for theming

Color Tokens

Primary Colors

--primaryBrand color

--secondarySecondary actions

--accentHighlights

Semantic Colors

--destructiveErrors

--mutedDisabled

--backgroundPage bg

Usage Example

// HSL format without hsl() wrapper
--primary: 222.2 47.4% 11.2%;

// Usage in CSS
color: hsl(var(--primary));
background: hsl(var(--primary) / 0.1);

CLI Commands

Manage themes with MoonUI CLI

Theme Management

moonui theme --set [name]

Set a preset theme

moonui theme --generate

Generate theme CSS

moonui theme --list

List available themes

Custom Themes

moonui theme --create

Create custom theme

moonui theme --export

Export current theme

moonui theme --import

Import theme file

Theme Builder

Create custom themes visually with our theme builder

Component Gallery

See how components look with different themes