# Theming CSS variables are used for styling the components and creating Tailwind CSS utility classes. ## 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 */ @custom-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