▚skeehn
DocsComponentsGitHub

Customize

Brand theme generator

One brand color. One radius. A complete --sk-* token set — light and dark — ready to drop into any skeehn project.

Radius
8px
LightDark
Presets

Live preview — light

hue 262° · r8
solidsuccesswarningerror
i

Theme applied

All components inherit these tokens — no rewrites needed.

Brand card

Make it match our brand.
Done — every surface picks up your accent and radius.
apply_themesuccess
data-theme="brand" applied

Generated CSS

css53 lines
/* skeehn theme "brand" — generated from a brand color. Drop into your global CSS. */
[data-theme="brand"] {
  --sk-background: 0 0% 100%;
  --sk-foreground: 262 16% 12%;
  --sk-surface: 262 20% 98%;
  --sk-primary: 262 16% 12%;
  --sk-primary-fg: 0 0% 100%;
  --sk-secondary: 262 14% 96%;
  --sk-secondary-fg: 262 16% 12%;
  --sk-muted: 262 14% 96%;
  --sk-muted-foreground: 262 8% 45%;
  --sk-accent: 262 83% 42%;
  --sk-accent-foreground: 0 0% 100%;
  --sk-border-color: 262 13% 90%;
  --sk-ring: 262 83% 42%;
  --sk-success: 142 64% 34%;
  --sk-warning: 32 90% 44%;
  --sk-info: 217 84% 52%;
  --sk-destructive: 0 70% 50%;
  --sk-radius: 8px; --sk-radius-sm: 6px; --sk-radius-md: 10px; --sk-radius-lg: 14px;
  --sk-radius-panel: 12px; --sk-radius-control: 7px;
  --sk-border-width: 1px;
  --sk-dither-pattern: var(--sk-dither-b2);
  --sk-dither-opacity: 0.06;
  color-scheme: light;
}

[data-theme="brand-dark"] {
  --sk-background: 262 16% 8%;
  --sk-foreground: 262 14% 96%;
  --sk-surface: 262 14% 11%;
  --sk-primary: 262 14% 96%;
  --sk-primary-fg: 262 20% 9%;
  --sk-secondary: 262 12% 16%;
  --sk-secondary-fg: 262 14% 96%;
  --sk-muted: 262 12% 15%;
  --sk-muted-foreground: 262 8% 62%;
  --sk-accent: 262 83% 58%;
  --sk-accent-foreground: 0 0% 100%;
  --sk-border-color: 262 12% 20%;
  --sk-ring: 262 83% 58%;
  --sk-success: 150 55% 50%;
  --sk-warning: 38 90% 58%;
  --sk-info: 199 70% 60%;
  --sk-destructive: 0 72% 60%;
  --sk-radius: 8px; --sk-radius-sm: 6px; --sk-radius-md: 10px; --sk-radius-lg: 14px;
  --sk-radius-panel: 12px; --sk-radius-control: 7px;
  --sk-border-width: 1px;
  --sk-dither-pattern: var(--sk-dither-b2);
  --sk-dither-opacity: 0.06;
  color-scheme: dark;
}

Paste after the skeehn engine CSS, then set <html data-theme="brand"> for light or brand-dark for dark. Neutrals are lightly tinted with your hue; the brand color becomes the accent at a readable lightness in both modes.