Targets and themes

Targets

Id	Runs on	Stack	Paths
web-react	Web	React 19, Vite, Tailwind v4, HeroUI v3	apps/web, packages/ui
desktop-gpui	macOS	Rust, GPUI, GPUI Component	apps/desktop, crates/acme-ui, crates/acme-tokens
mobile-react-native	iOS, Android	React Native, Expo	apps/mobile, packages/ui-native
kotlin-compose	Android, iOS, desktop	Kotlin, Compose Multiplatform	kotlin

The two JavaScript targets share packages/tokens and the root pnpm workspace configuration. Every project must include at least one target.

Themes

A theme is a JSON file in design/themes defining an accent color ramp and a neutral color ramp. Applying a theme replaces those two ramps in design/tokens/palette.json. Because semantic and component color tokens reference palette steps via aliases ({palette.accent.600}), they pick up the new colors automatically without being edited.

xds themes renders a side-by-side light and dark UI preview in the terminal for each theme, showing a sample page with a card, primary and secondary text, primary and secondary buttons, a link, an accent badge, the four status colors, and color swatches for the accent and neutral ramps. xds resolves the token alias chain itself (from component tokens to semantic tokens to palette steps), so rendering the preview does not require running the Node token generator.

In the interactive theme selector used by xds create and xds theme, the preview updates immediately as you move through the list.

• The preview uses 24-bit truecolor ANSI escapes by default. In macOS Terminal.app, it falls back to the 256-color palette unless COLORTERM=truecolor is set.
• In terminals narrower than 80 columns, the light and dark previews stack vertically. In short terminal windows, the preview compacts to a single line per mode plus the two color ramps.
• When color output is disabled (--no-color, NO_COLOR, or non-TTY stdout), the command prints a plain-text table of hex color values.
• To capture the colored ANSI preview to a file, run FORCE_COLOR=1 xds themes > themes.ansi.

When applying a theme that differs from the one currently in the palette, xds:

1. Updates design/tokens/palette.json using the same layout produced by tools/design-build. xds theme ocean and mise run theme ocean produce identical files.
2. Regenerates the platform token files by running node tools/design-build/src/build.ts, if node 22.18 or newer is on PATH.

If a compatible Node version is not available, step 2 is skipped and xds notes that the generated files are out of date. Running mise run tokens in the project regenerates them. This also happens when node points to a mise shim and the project’s mise.toml has not been trusted yet; run mise trust first.

If the token generator rejects a theme (for example, because a color pairing falls below its contrast threshold), xds theme restores the previous palette and leaves the project unchanged.