Themes

Create reusable color and font token sets for consistent styling

Themes

Define named themes with color tokens, font selections, and text styles. Apply themes globally or per-screen for consistent, maintainable designs across your flow.

What a theme is

A theme is a named bundle of design tokens -- CSS variables that control colors, fonts, and typography throughout your screens. Instead of hardcoding color values on individual components, you reference theme tokens. When you change a token, every component using it updates.

A flow can have multiple themes (for example, "Light" and "Dark," or "Brand A" and "Brand B"). One theme is marked as the flow default. Individual screens can override this and bind to a different theme.

Creating and managing themes

Open the Themes panel from the header toolbar. From here you can:

• Create a theme -- Start with a blank set of tokens or duplicate an existing theme.
• Rename -- Click the theme name to edit it.
• Duplicate -- Copy all tokens and text styles to a new theme for quick variations.
• Set as default -- Mark a theme as the flow default. Screens that do not specify a theme inherit this one.
• Delete -- Remove a theme. Screens bound to a deleted theme fall back to the flow default.

Color tokens

Each theme stores color tokens as CSS variables. Edit them in the Themes panel using the color picker. Common tokens include:

• --primary, --secondary, --accent -- Brand colors
• --background, --foreground -- Surface and text colors
• --muted, --muted-foreground -- Subdued surfaces and secondary text
• --destructive -- Error and destructive action colors
• --border, --input -- Border and input field colors

Components reference these tokens through Tailwind utility classes (like bg-primary or text-foreground), so updating a token value changes every component that uses it.

Text styles

Text styles are named typography presets like Headline, Body, Caption, and Footnote. Each text style includes:

• Font family -- A specific font (e.g., Inter, Nunito Sans) from the built-in font catalog.
• Size -- Font size in pixels.
• Weight -- Font weight (100-900).
• Line height -- Line height in pixels.
• Tracking -- Letter spacing in pixels.
• Transform -- Text transform (none, uppercase, lowercase, capitalize).

Apply a text style to a Text component by selecting it in the inspector. The component renders with all the style's typographic settings. Text styles are defined per-theme, so the same screen can look different under different themes.

System text styles

Every theme includes a set of system text styles modeled after iOS typography (Large Title, Title 1-3, Headline, Body, Callout, Subheadline, Footnote, Caption 1-2). You can edit their values but not rename or delete them. Add custom text styles alongside system styles for flow-specific needs.

Google Fonts

Themes load fonts automatically. When you select a font family for a text style, the Studio loads it from Google Fonts in the canvas preview. Published flows include the same fonts in the compiled build, so what you see in the editor matches what users see at runtime.

Per-screen theme binding

By default, every screen inherits the flow default theme. To use a different theme on a specific screen:

1. Select the screen.
2. In the right sidebar under Styles, open the theme dropdown.
3. Choose a theme, or select Inherit from flow to use the default.

This is useful for flows where different screens have different visual treatments -- for example, a dark paywall screen followed by a light confirmation screen.

Per-screen token overrides

Beyond binding to a theme, a screen can override individual tokens. Overrides are layered on top of the bound (or default) theme. This lets you make small adjustments to a single screen without creating an entirely new theme.

How themes resolve

When a screen renders, Nuxie computes its effective tokens in three steps:

1. Determine the theme: use the screen's bound theme if set, otherwise use the flow default.
2. Load the theme's tokens.
3. Merge any per-screen token overrides on top.

The result is pushed into the screen's preview as CSS variables. Components that reference those variables update immediately.

Next steps

• Components & Styling -- See how components use theme tokens through Tailwind utilities and text styles.
• AI Generation -- The AI uses your active theme when generating screens.
• Publishing -- Themes are compiled into the published flow bundle.