Themes & Design

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

Themes & Design is where you set your app’s shared look and give the agent a design to work from. The page has two tabs:

• Theme edits your app’s light and dark themes: colors and typography that every screen uses.
• Design takes a design you made elsewhere, such as a Claude Design export or a static HTML/CSS site, and drafts a prompt for the agent to build screens from it.

The page has three panels: the editor on the left, a live preview of your app in the middle, and the Theme Assistant chat on the right. On a narrow screen, they become tabs you switch between.

Backend apps

Backend apps don’t have themes or a preview, so the page is called Design and only shows the design upload and the Design Assistant chat. See Design import.

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 Theme tab 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.
UI Elements	Colors for borders, inputs, focus rings, overlays, and notifications.

If your theme file defines colors outside these groups, they appear in a Custom group so you can still edit them.

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.

The Themes editor supports token picking from your palette and custom one-off values. Apps imported from Draftbit Classic can also edit their imported v1 themes and palettes here, under the Themes, Palettes, and Typography tabs. When you update a palette token, every theme value that references that token updates with it. If you’ve migrated the app’s styles to NativeWind, changes here only reach screens that haven’t been migrated yet.

Typography

Alongside colors, the Theme tab 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.

Use the Typography tab to edit the font family, size, weight, and style for each text style. Styles are grouped into Headings, Text, and Interactive. The font picker includes Google Fonts with live previews and wires the selected font into the right Expo or web configuration for your app.

If a theme has no typography defined yet, click Apply default type set to start from a standard set of text styles.

Saving, Committing, and Resetting

Your theme edits save automatically as you make them, and the preview updates to match. While you have changes that aren’t committed yet, a save status (Saving…, Saved, or Save failed with a Retry link) appears at the top of the page next to two buttons:

• Commit Changes opens a dialog with a suggested commit message, such as “Update light theme”. Edit it if you like, then click Commit to save the theme to your current branch. Committed changes show up in Version History.
• Reset throws away your uncommitted theme edits and returns the theme to its last committed version.

Caution

Auto-saved edits aren’t part of your app’s history until you commit them, and Reset discards them.

Theme Assistant

The Theme Assistant panel is a chat with the agent, right next to the theme editor. Describe the change you want, for example “Make the primary color more vibrant”, and the agent edits your theme files. When it finishes, the editor reloads with the new values so you can review them, fine-tune them by hand, and commit.

Theme Assistant threads are regular agent threads, so they use credits the same way as chats in the AI App Builder.

No Themes Found

The Theme tab edits theme files in your app’s code. It looks for them in theming/themes/ (or src/theming/themes/) in your app repository, usually as light.ts and dark.ts. If it can’t find any, you’ll see No Themes Found. If it finds theme files it can’t read, you’ll see No compatible themes found.

In either case, click Ask agent to set up themes. This opens a new thread with a prompt that asks the agent to create compatible light and dark themes. Review the prompt, then send it when you’re ready.

Design Import

The Design tab turns a design you already have into screens. Upload the design, and Draftbit writes a prompt for the agent that points it at your files. The agent then builds screens that follow your project’s existing components and conventions. It doesn’t copy the HTML as-is. It aims to match the design’s palette, typography, and copy rather than reproduce it pixel for pixel.

What You Can Upload

• A Claude Design ZIP. In Claude, choose Export, then Download project as .zip.
• A ZIP of a static HTML/CSS site.
• A single .html file.

Uploading a Design

1. Open Themes & Design and select the Design tab.
2. Drag your file onto the upload area, or click Choose file.
3. Draftbit reads the file and sends it to your app’s sandbox. When it’s done, you’ll see a summary with the design’s title and how many pages and images it found.
4. A new thread opens in the chat panel with the prompt already filled in. Read it, edit it if you want, and send it when you’re ready.

To use a different design, click Import another. The newest prompt tells the agent to build from that design and ignore earlier ones.

Limits

• Uploads can be up to 20 MB. A single HTML file, or any one file inside a ZIP, can be up to 10 MB.
• A ZIP can hold up to 500 files and 100 MB once extracted, and it needs at least one HTML file.
• Only these file types are kept: .html, .htm, .css, .png, .jpg, .jpeg, .gif, .svg, .webp, .ico, .woff, .woff2, .ttf, .otf, .json, .txt, and .md. Everything else is skipped, and JavaScript is always removed.
• Your design files sit next to your project so the agent can read them while it builds. They aren’t saved permanently and go away when your sandbox restarts. The prompt tells the agent to copy any images it needs into your project, so the screens it builds don’t depend on the uploaded files.

Tip

If your sandbox restarted before the agent finished, upload the design again to get a fresh prompt.

Themes vs Component Styles

The Theme tab 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 & Design.
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.