Skip to content
Stratum

stratum-uikit theme

Theme subcommands for stratum-uikit.

stratum-uikit theme list

Section titled “stratum-uikit theme list”

Prints all available Stratum themes with descriptions:

Terminal window
npx stratum-uikit theme list
Available themes:


  slate     Wealthsimple-inspired — high-contrast B&W, pill buttons, soft shadows  [default]
  obsidian  Gumroad-inspired — warm off-white, thick borders, zero radii, offset shadows
  quartz    Go Club-inspired — electric blue, glass surfaces, aggressive blur


Slate is installed by default with npx stratum-uikit init.


To add another theme, copy the theme file from:
  https://docs-mauve-nine.vercel.app/themes/obsidian

Slate is installed automatically by stratum-uikit init. To add Obsidian or Quartz, copy the file manually — it’s a single ~80-line TypeScript file.

Adding a theme manually

Section titled “Adding a theme manually”

  1. Copy the theme file from the docs:

    • Obsidian — src/tokens/themes/obsidian.ts
    • Quartz — src/tokens/themes/quartz.ts

  2. Add one entry to src/tokens/themes/registry.ts:

import { obsidianThemeLight, obsidianThemeDark } from './obsidian';


export const THEME_REGISTRY = [
  { name: 'slate',    label: 'Slate',    light: slateLight,    dark: slateDark    },
  { name: 'obsidian', label: 'Obsidian', light: obsidianThemeLight, dark: obsidianThemeDark },
];

That’s it — setTheme('obsidian') now works. TypeScript infers the new name automatically.

stratum-uikit theme add

Section titled “stratum-uikit theme add”

Creating a custom theme

Section titled “Creating a custom theme”

Use createTheme() to build a brand theme from a base:

import { createTheme } from '@/tokens/themes/createTheme';
import { slateThemeLight, slateThemeDark } from '@/tokens/themes/slate';


export const brandLight = createTheme(slateThemeLight, {
  colors: {
    accent:       '#E11D48',
    accentHover:  '#BE123C',
    accentSubtle: '#FFF1F2',
  },
});


export const brandDark = createTheme(slateThemeDark, {
  colors: {
    accent:       '#FB7185',
    accentHover:  '#F43F5E',
    accentSubtle: '#4C0519',
  },
});

See Custom Themes for the full guide.

Section titled “Related”