# 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](/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 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](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