# Theming
Starwind UI v3 and Starwind Pro share semantic CSS variables. Tailwind CSS v4 maps these variables
to utilities such as `bg-background`, `text-foreground`, and `border-border`.
## Theme Designer
The easiest way to customize your theme is with the [Starwind UI Theme Designer](/tools/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 variable names follow familiar shadcn-style semantics. Preserve both light and dark values
when you import or adapt a theme.
## 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](https://tailwindcss.com/docs/colors#default-color-palette-reference).
```css title="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 background and text */
--background: var(--color-neutral-50);
--foreground: var(--color-neutral-950);
/* Background and text color for */
--card: var(--color-neutral-50);
--card-foreground: var(--color-neutral-950);
/* Colors for popovers like and */
--popover: var(--color-neutral-50);
--popover-foreground: var(--color-neutral-950);
/* Primary colors for