> ## Documentation Index
> Fetch the complete documentation index at: https://docs.turbostack.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Change your theme

> At the end of this tutorial, you will be able to change the base colors of your application

## The `globals.css`

Inside your `apps/web/styles`, you will have a `globals.css` with the following value:

```css theme={null}
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* default light theme */
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --primary: 225 74% 57%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 100%;
    --secondary-foreground: 240 10% 3.9%;
    --danger: 0 84.3% 60%;
    --danger-foreground: 0 0% 100%;
    --accent: 240 4.8% 95.9;
    --accent-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;

    --chart-1: var(--primary);
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }
}

::-moz-selection {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
}

::selection {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
}
```

All the CSS Variables exposed here uses `hsl` values. This allows us to change saturation, brightness without having to make changes to the hex code or mapping different levels of saturation in `tailwind.config.ts` file.

## 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.

<Info>The `background` suffix is omitted when the variable is used for the background color of the component.</Info>

Given the following CSS variables:

```css theme={null}
--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))`.

```html theme={null}
<div className="bg-primary text-primary-foreground">Hello</div>
```

## Adding new colors

To add new colors, you need to add them to your `globals.css` and to your `packages/tailwind-config/tailwind.config.ts` file.

```css apps/web/globals.css theme={null}
:root {
  --warning: 38 92% 50%;
  --warning-foreground: 48 96% 89%;
}
```

```typescript packages/tailwind-config/tailwind.config.ts theme={null}
const config: Config = {
  // rest of file,
  theme: {
    extend: {
      colors: {
        // rest of colors defined
        warning: {
          DEFAULT: 'hsl(var(--warning))',
          foreground: 'hsl(var(--warning-foreground))'
        }
      }
    }
  }
}

export { config };
```

You can now use `warning` utility class in your components:

```html theme={null}
<div className="bg-warning text-warning-foreground" />
```