---
title: Theme
description: Customizing the default theme
---

Bamboo comes with a default theme that is used to generate the utilities for your project. You can customize this theme
to match your design requirements.

## Breakpoints

Use the `breakpoints` key in the `theme` section of your Bamboo config file to customize the default breakpoints.

```ts filename="bamboo.config.ts"
import { defineConfig } from '@bamboocss/dev'

export default defineConfig({
  theme: {
    extend: {
      breakpoints: {
        '3xl': '1800px',
      },
    },
  },
})
```

Bamboo ships with the following breakpoints by default:

<TokenDocs type="breakpoints" />

## Tokens

### Colors

Use the `colors` key in the `token` section of your Bamboo config file to customize the default color values.

> We recommend using numeric ranges from `50` to `900`

```ts filename="bamboo.config.ts"
import { defineConfig } from '@bamboocss/dev'

export default defineConfig({
  theme: {
    extend: {
      tokens: {
        colors: {
          brand: { value: '#EA8433' },
        },
      },
    },
  },
})
```

Bamboo comes with a handful of colors picked from the amazing Tailwind color palette

<TokenDocs type="colors" />

### Spacing

Same shape under `tokens.spacing` — `gutter: { value: '32px' }`.

Bamboo ships with the following spacing tokens by default:

<TokenDocs type="spacing" />

### Border Radius

Same shape under `tokens.radii`.

<TokenDocs type="radii" />

### Shadows

Use the `shadows` key in the theme section of your Bamboo config file to customize the default box shadows values.

Bamboo ships with the following shadows by default:

<TokenDocs type="shadows" />

### Sizing

Same shape under `tokens.sizes` — `icon: { value: '24px' }`.

Bamboo ships with the following sizing tokens by default, in addition with the values from the default Bamboo
[spacing](#spacing) tokens:

<TokenDocs type="sizing" />

### Fonts

Same shape under `tokens.fonts` — `marketing: { value: 'Inter Variable' }`.

Bamboo ships with the following font families tokens by default:

<TokenDocs type="fonts" />

### Font Sizes

Same shape under `tokens.fontSizes` — `big: { value: '80px' }`.

Bamboo ships with the following font size tokens by default:

<TokenDocs type="fontSizes" />

## Keyframes

Use the `keyframes` key in the `theme` section of your Bamboo config file to customize the default keyframes.

```ts filename="bamboo.config.ts"
import { defineConfig } from '@bamboocss/dev'

export default defineConfig({
  theme: {
    extend: {
      keyframes: {
        fadein: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        fadeout: {
          '0%': { opacity: '1' },
          '100%': { opacity: '0' },
        },
      },
    },
  },
})
```

Bamboo ships with the following keyframes by default:

<TokenDocs type="keyframes" />
