Theme Studio
Hydrateless is themed entirely through CSS variables, so a handful of tokens restyles every component at once. Adjust the controls below and watch real components update live, then copy the generated CSS into your global stylesheet to apply it across your app.
Project settings
Preview your theme across real components.
New
Active
Your changes preview live as you edit tokens.
Tabs, accordions, and the rest pick up your tokens too.
Second panel.
Drop this into your global stylesheet to apply the theme:
:root {
--hl-primary: hsl(217deg 91% 60%);
--hl-primary-hover: hsl(217deg 91% 52%);
--hl-primary-active: hsl(217deg 91% 44%);
--hl-primary-fg: hsl(0deg 0% 100%);
--hl-primary-subtle: hsl(217deg 100% 95%);
--hl-primary-subtle-fg: hsl(217deg 91% 48%);
--hl-ring: hsl(217deg 91% 60%);
--hl-border: #e2e8f0;
--hl-border-strong: #e2e8f0;
--hl-radius-xs: 2px;
--hl-radius-sm: 4px;
--hl-radius-md: 8px;
--hl-radius-lg: 12px;
--hl-radius-xl: 16px;
--hl-radius-2xl: 20px;
--hl-text-base: 16px;
--hl-font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}