Themes

Switch to Themes view using the icon in the main menu.

The Themes page is where you define the shared visual foundation for your app. Use it to manage app-wide theme values like colors and typography, then review the result directly in the Builder preview as you make changes.

Theme Modes

Draftbit lets you configure separate values for your app’s light and dark themes.

• Light Theme contains the values used when your app is shown in light mode.
• Dark Theme contains the values used when your app is shown in dark mode.

Switch between these modes at the top of the page to edit each theme independently.

Tip

If your app supports both light and dark appearance, review both themes before publishing so text, surfaces, and status colors remain readable in each mode.

Color Tokens

The Colors section groups related theme tokens so you can update your palette systematically instead of changing individual components one by one.

Group	Purpose
Base	Core background and foreground text colors used throughout the app.
Primary	Your main brand colors for prominent actions and emphasis.
Secondary	Supporting accent colors for secondary UI treatments.
Tertiary	Additional accent colors for extended palette needs.
Card & Popover	Surface colors for layered UI such as cards, sheets, and popovers.
Muted & Accent	Subtle supporting colors for less prominent UI and accent treatments.
Semantic	Status and feedback colors for states like success, warning, or error.

Editing A Token Group

Expand a color group to reveal the individual tokens inside it. For example, the Base group includes values like Background and Foreground. Update those values to change the shared colors used across your app.

In the Themes editor, token values are shown as HSL color values, which makes it easier to keep related colors consistent across light and dark themes.

Typography

Alongside colors, the Themes page is also where you manage shared typography settings for the active theme. These theme-level values help keep text treatment consistent across screens instead of styling each text element from scratch.

Themes vs Component Styles

The Themes page controls shared, app-level design values. For one-off adjustments on a specific element, use the Styles tab in the Builder.

A practical way to work is:

1. Set your core palette and typography in Themes.
2. Build screens in the AI App Builder.
3. Fine-tune individual components in the Styles tab only when needed.

This keeps your app visually consistent while still giving you flexibility for screen-specific design decisions.