@stormycms/theme

CSS custom properties for colors, typography, radii, and shadows, with light and dark themes.

pnpm add @stormycms/theme

@import '@stormycms/theme/theme.css';

.button {
  background: var(--color-accent-1);
  color: var(--color-accent-1-c);
  border-radius: var(--radius-round);
}

Apply theme--light or theme--dark to an ancestor to select the theme. A nested theme class changes that subtree.

Token family	Purpose
`--color-brand-*`	Brand colors
`--color-site-*`	Background, text, and borders
`--color-accent-*`	Links and primary actions
`--color-success-`, `--color-error-`, `--color-warning-`, `--color-info-`	Status colors
`--font-brand`, `--font-site`, `--font-mono`	Font stacks
`--radius-1`, `--radius-2`, `--radius-3`, `--radius-round`	Corner radii
`--shadow-1`, `--shadow-glow`, `--gradient-brand`	Shadows and brand gradient

For Tailwind CSS v4, import @stormycms/theme/tailwind.css to register token utilities. Font families are referenced by name. The package does not load font files.

The starter's public site uses the local packages/theme/theme.css. Change that file to customize the site and its editor previews.

Last updated: 10/20/26, 1:09 AM