Skip to main content
The theme commands keep your Outkit profile’s design tokens in lockstep with your application’s real design system. No more copy-pasting hex codes.

​
The Theme Cascade

outkit theme detect scans your repo in this order, stopping at the first source that returns enough tokens:
  1. shadcn/ui CSS variables
  2. Tailwind v4 @theme blocks
  3. Tailwind v3 config (tailwind.config.{js,ts})
  4. CSS-in-JS configs (Chakra, Mantine, Stitches, Panda, Tamagui)
  5. Inline <ThemeProvider> JSX literals
  6. Generic :root { --… } blocks
  7. SVG logo extraction (primary color from your logo)
  8. Repo-wide hex frequency
To see what would be detected without writing anything: 
outkit theme detect --json

​
Interactive flow

outkit theme
This is the friendliest entry point: it detects, previews swatches in your terminal, and asks for confirmation before pushing.

​
One-shot

outkit theme apply
Runs the cascade, applies a contrast guard, and PATCHes the active profile.
FlagEffect
--from <file>Use a specific source instead of the cascade.
--map <map.json>Override the canonical token name mapping.
--preset <id>Use a curated palette instead of detecting.
-ySkip the diff confirmation.

​
Presets

outkit theme presets
Curated palettes shipped with the CLI:
  • modern-neutral
  • vibrant-violet
  • warm-editorial
  • dark-first
Apply one with outkit theme apply --preset modern-neutral.

​
Round-tripping outkit.theme.json

outkit theme pull    # write the active profile's tokens to outkit.theme.json
outkit theme push    # PATCH the profile from outkit.theme.json
outkit theme diff    # show local-vs-remote diff (exits non-zero when they differ)
Use outkit theme diff as a CI gate to ensure the deployed profile matches what’s in your repo.

​
CI hook

outkit theme sync --on-build
This adds a prebuild script to your package.json that runs outkit theme sync on every build, so a token change in your codebase always lands in the deployed profile.

​
Watch mode

outkit theme watch
Re-syncs whenever a known source file changes. Useful while iterating on a design pass.

​
Helpers

outkit theme map --explain     # print the canonical name mapping table
outkit theme regen-surfaces    # recompute surfaceLowest…surfaceHighest from background

​
Next Steps

Profiles and deploy

Treat profiles as code: outkit profiles diff / push / pull / deploy / rollback.

Tail render logs

Watch what your design tokens look like on real renders.