Skip to main content
🚀 Starwind Pro Early Access! Get 50% off lifetime access with code LAUNCH at checkout
On this page

Theming

CSS variables are used for styling the components and creating Tailwind CSS utility classes.

Theme Designer

The easiest way to customize your theme is with the Starwind UI Theme Designer. It gives you visual control over colors, typography, border radius, and spacing with a live preview across real components and blocks.

  1. Adjust your theme values visually
  2. Preview changes across buttons, cards, dialogs, pricing blocks, and more
  3. Export the generated CSS and drop it into your src/styles/starwind.css

The Theme Designer is free for everyone and works with both the open-source Starwind UI library and Starwind Pro blocks.

Open Theme Designer

Tip

You can save your theme to your browser’s local storage, so you won’t lose your work between sessions. You can even preview that theme on the blocks page to see how it looks.

Convention

We use a simple background and foreground convention for colors. The background variable is used for the background color of the components, and the foreground variable is used for the color of the text. Note that the background suffix is often omitted.

Info

The css variables are extremely similar to shadcn, making it easy to convert to use starwind, or to use both in your project.

CSS Variables

Below are all the variables in use, with comments for each variable describing what it does. By default, all colors used are default tailwind colors.

src/styles/starwind.css
/* allows you to use "dark:" variant in your html and have it match the .dark css variables */
@variant dark (&:where(.dark, .dark *));


/* ... */


:root {
  /* default color of <body> background and text */
  --background: var(--color-neutral-50);
  --foreground: var(--color-neutral-950);


  /* Background and text color for <Card> */
  --card: var(--color-neutral-50);
  --card-foreground: var(--color-neutral-950);


  /* Colors for popovers like <SelectContent> and <TooltipContent> */
  --popover: var(--color-neutral-50);
  --popover-foreground: var(--color-neutral-950);


  /* Primary colors for <Button>, etc. when variant="primary" */
  --primary: var(--color-blue-700);
  --primary-foreground: var(--color-neutral-50);


  /* Primary color that is accessible for text on the background color */
  --primary-accent: var(--color-blue-800);


  /* Secondary colors for <Button>, etc. when variant="secondary" */
  --secondary: var(--color-neutral-200);
  --secondary-foreground: var(--color-neutral-950);


  /* Secondary color that is accessible for text on the background color */
  --secondary-accent: var(--color-neutral-950);


  /* Muted colors use for <TabsList>, <Avatar>, etc. */
  --muted: var(--color-neutral-100);
  --muted-foreground: var(--color-neutral-600);


  /* Accents like hover effects on <SelectItem> */
  --accent: var(--color-neutral-200);
  --accent-foreground: var(--color-neutral-900);


  /* Various component colors for variant="info" */
  --info: var(--color-sky-300);
  --info-foreground: var(--color-sky-950);


  /* Various component colors for variant="success" */
  --success: var(--color-green-300);
  --success-foreground: var(--color-green-950);


  /* Various component colors for variant="warning" */
  --warning: var(--color-amber-300);
  --warning-foreground: var(--color-amber-950);


  /* Various component colors for variant="error" */
  --error: var(--color-red-700);
  --error-foreground: var(--color-neutral-50);


  /* Default border color */
  --border: var(--color-neutral-200);


  /* Border colors for inputs like <Input>, <Textarea>, <SelectTrigger>  */
  --input: var(--color-neutral-200);


  /* Used for focus outline */
  --outline: var(--color-blue-600);


  /* Border radius for various elements */
  --radius: 0.625rem;


  /* Spacing scale for padding, margins, etc */
  --spacing: 0.25rem;


  /* Heading fonts */
  --font-heading: "Inter Variable", var(--font-sans);


  /* Mono fonts */
  --font-mono: Menlo, monospace;


  /* sidebar variables */
  --sidebar-background: var(--color-neutral-50);
  --sidebar-foreground: var(--color-neutral-950);
  --sidebar-primary: var(--color-indigo-700);
  --sidebar-primary-foreground: var(--color-neutral-50);
  --sidebar-accent: var(--color-neutral-100);
  --sidebar-accent-foreground: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-200);
  --sidebar-outline: var(--color-neutral-400);
}


/* overriding above variables when a parent has the class "dark" */
.dark {
  --background: var(--color-neutral-950);
  --foreground: var(--color-neutral-50);
  /* etc... */
}
/* ... */