Skip to content

@theme-kit/cli

`theme-kit generate`

text
theme-kit generate [options]

Options

OptionDescriptionDefault
--seed <color>Source color in hex (#rrggbb). The CLI checks this.#6366f1
--family <name>Family name; becomes the theme name and label prefix.default
--mode <mode>light, dark, or both (a pair).both
--codeAlso generate a tokens.code syntax-highlighting palette (opt-in).off
--output <file>Write JSON to a file. Omit to print to stdin.

The CLI requires a hex seed (#rrggbb), e.g. #6366f1. In bash, zsh, and PowerShell the leading # starts a comment, so always quote the seed in a terminal: --seed "#6366f1". Package managers (npm, pnpm, yarn) also run package.json scripts through a shell, so keep the quotes there too — the quotes are a shell concern, not part of the flag itself.

What the generator derives

Given a seed, generate (via generateTheme) derives the full semantic color set: background, foreground, card, popover, primary, primaryForeground, secondary, muted, accent, destructive (with their foregrounds), border, input, ring, plus a radius.lg scale. The same model that builds the default presets is exposed here, so a generated family fits the rest of Theme Kit.

Light + dark pair (default)

bash
theme-kit generate --seed "#6366f1" --family indigo --output theme.json

Writes:

json
1{
2  "light": {
3    "name": "indigo-light",
4    "meta": {
5      "family": "indigo",
6      "mode": "light",
7      "label": "Indigo Light",
8      "order": 10
9    },
10    "tokens": {
11      "colors": {
12        "background": "#f8fafc",
13        "foreground": "#0f172a",
14        "card": "#ffffff",
15        "cardForeground": "#0f172a",
16        "popover": "#ffffff",
17        "popoverForeground": "#0f172a",
18        "primary": "#6366f1",
19        "primaryForeground": "#ffffff",
20        "secondary": "#e4e4f1",
21        "secondaryForeground": "#0f172a",
22        "muted": "#efeff5",
23        "mutedForeground": "#64748b",
24        "accent": "#c6c6ec",
25        "accentForeground": "#0f172a",
26        "destructive": "#ef4444",
27        "destructiveForeground": "#ffffff",
28        "success": "#22c55e",
29        "successForeground": "#ffffff",
30        "border": "#d9d9e8",
31        "input": "#d9d9e8",
32        "ring": "#6366f1"
33      },
34      "radius": {
35        "lg": "8px"
36      }
37    }
38  },
39  "dark": {
40    "name": "indigo-dark",
41    "meta": {
42      "family": "indigo",
43      "mode": "dark",
44      "label": "Indigo Dark",
45      "order": 20
46    },
47    "tokens": {
48      "colors": {
49        "background": "#020617",
50        "foreground": "#f8fafc",
51        "card": "#0f172a",
52        "cardForeground": "#f8fafc",
53        "popover": "#0f172a",
54        "popoverForeground": "#f8fafc",
55        "primary": "#9596ea",
56        "primaryForeground": "#020617",
57        "secondary": "#060846",
58        "secondaryForeground": "#f8fafc",
59        "muted": "#050638",
60        "mutedForeground": "#94a3b8",
61        "accent": "#151651",
62        "accentForeground": "#f8fafc",
63        "destructive": "#f87171",
64        "destructiveForeground": "#020617",
65        "success": "#4ade80",
66        "successForeground": "#020617",
67        "border": "#080a5e",
68        "input": "#080a5e",
69        "ring": "#9596ea"
70      },
71      "radius": {
72        "lg": "8px"
73      }
74    }
75  }
76}

A single mode

bash
theme-kit generate --seed "#6366f1" --family indigo --mode light \
  --output indigo-light.json

Code tokens (opt-in)

Not every theme needs a syntax-highlighting palette. Pass --code to also generate a tokens.code block — a cohesive set of --theme-code-* variables (keyword, string, number, function, type, comment, …) derived from the seed hue, with distinguishable light/dark variants:

bash
theme-kit generate --seed "#6366f1" --family indigo --code \
  --output indigo.json

The generated light.tokens.code (dark mirrors it with inverted colors):

json
1"code": {
2  "background": "#ffffff",
3  "foreground": "#0f172a",
4  "keyword": "#1b1ebc",
5  "string": "#1c7d33",
6  "number": "#a04a00",
7  "function": "#1641d0",
8  "type": "#0e6f73",
9  "comment": "#64748b"
10}

Without --code no code block is emitted, so themes stay lean.

Print to stdout

bash
theme-kit generate --seed "#10b981" --family mint

Exit codes

CodeMeaning
0Generated (file written or printed).
2Invalid --seed or --mode.

Next: validate.

CLI generate — Theme Kit