--- title: Theming description: Use CSS Variables to customize the look and feel of your application. --- We use CSS variables for styling. This allows you to easily change the colors of components without having to update class names. **CSS variables must be defined without color space function**. See the [Tailwind CSS documentation](https://tailwindcss.com/docs/customizing-colors#using-css-variables) for more information. ## Convention We use a simple `background` and `foreground` convention for colors. The `background` variable is used for the background color of the component and the `foreground` variable is used for the text color. The `background` suffix can be omitted if the variable is used for the background color of the component. Given the following CSS variables: ```css --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; ``` The `background` color of the following component will be `hsl(var(--primary))` and the `foreground` color will be `hsl(var(--primary-foreground))`. ```tsx

Hello

``` ## CSS Variables Here's the list of variables available for customization: ```css title="Default background color of ...etc" --background: 0 0% 100%; --foreground: 222.2 47.4% 11.2%; ``` ```css title="Muted backgrounds such as , and " --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; ``` ```css title="Background color for " --card: 0 0% 100%; --card-foreground: 222.2 47.4% 11.2%; ``` ```css title="Background color for popovers such as , , " --popover: 0 0% 100%; --popover-foreground: 222.2 47.4% 11.2%; ``` ```css title="Default border color" --border: 214.3 31.8% 91.4%; ``` ```css title="Border color for inputs such as ,

"
--input: 214.3 31.8% 91.4%;
```

```css title="Primary colors for <Button />"
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
```

```css title="Secondary colors for <Button />"
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
```

```css title="Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc"
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
```

```css title="Used for destructive actions such as <Button variant="destructive">"
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
```

```css title="Used for focus ring"
--ring: 215 20.2% 65.1%;
```

```css title="Border radius for card, input and buttons"
--radius: 0.5rem;
```

## Default

The following is the default color palette used by the components.

```css title="styles/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

--card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

--primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

--accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

--ring: 215 20.2% 65.1%;

--radius: 0.5rem;
  }

.dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

--muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

--popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

--card: 224 71% 4%;
    --card-foreground: 213 31% 91%;

--border: 216 34% 17%;
    --input: 216 34% 17%;

--primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;

--secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;

--accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

--ring: 216 34% 17%;

--radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}
```