theme
Pick or compute a dark/light variant of any design.
Synopsis
design-md theme <slug> [--dark|--light]What it does
The theme command extracts a design’s color palette and computes or picks a dark-mode or light-mode variant. Some brands ship explicit dark and light variants in the catalog; others have only a default. When no explicit variant exists, theme derives one by inverting the luminance of each hex color.
Two modes:
--dark(default) — Output the dark variant. If the brand has an explicit dark mode defined, use it; otherwise compute one by inverting each color.--light— Output the light variant. If the brand has an explicit light mode defined, use it; otherwise compute one by inverting each color.
The output is a valid DESIGN.md colors: section ready to copy, paste, or pipe into a file.
Options
| Flag | Default | Description |
|---|---|---|
--dark | true | Output the dark-mode variant. |
--light | — | Output the light-mode variant. |
If neither flag is specified, --dark is assumed.
Examples
Get the dark variant of Stripe
npx @webdesignhot/design-md theme stripe --darkOutput (abbreviated):
# Stripe · dark variant (computed)
colors:
bg: '#000000'
text: '#f5f5f5'
brand: '#fca4ff'
brand-alt: '#ffaa22'
text-dim: '#bab99a'
border: '#191409'
surface: '#090603'
on-brand: '#000000'
Note: this is a naive luminance flip. Refine the result by hand for production.Get the light variant
npx @webdesignhot/design-md theme stripe --lightPipe to a file
npx @webdesignhot/design-md theme stripe --dark > stripe-dark.yamlExtract and refine
Compute the dark variant, then manually edit it to taste:
npx @webdesignhot/design-md theme stripe --dark | grep -A 20 'colors:' > colors.yaml
# Open colors.yaml in your editor, tweak contrast and saturationHow variants are computed
When you run theme <slug> --dark:
- The command fetches the brand’s DESIGN.md from the catalog.
- It reads the
colors:map from the YAML frontmatter. - For each color value that is a valid hex code (e.g.,
#635bff), it inverts the luminance:RGB(r, g, b)→RGB(255-r, 255-g, 255-b). - Non-hex values (gradients, descriptive names) are passed through unchanged.
- The result is printed as a YAML snippet.
This is a naive inversion — it flips the brightness but doesn’t account for perceptual saturation, hue, or contrast ratios. A computed dark variant may feel washed out or have poor accessibility contrast. Always review and refine by hand before shipping.
If the brand in the catalog already has an explicit dark: or light: section in its colors (future expansion), that section is used instead of deriving one.