# Theme

The color palette of your brand is defined by these variables:

{% code title="src/theme.ts" %}

```typescript
export const colors = {
  brand: {
    50: theme.colors.teal["50"],
    100: theme.colors.teal["100"],
    200: theme.colors.teal["200"],
    300: theme.colors.teal["300"],
    400: theme.colors.teal["400"],
    500: theme.colors.teal["500"],
    600: theme.colors.teal["600"],
    700: theme.colors.teal["700"],
    800: theme.colors.teal["800"],
    900: theme.colors.teal["900"],
  },
};
```

{% endcode %}

By default, the brand color is defined with the teal color palette of ChakraUI.

To create the color palette of your brand color, you can use <https://themera.vercel.app/>\
Set the gray color to your brand color (I used purple), and get all the shades of the color palette 👇

{% embed url="<https://www.loom.com/share/70181487a4954a8ca5580a5d082d97f5?sid=2458e897-a8bb-4da7-a45f-17eb913217b5>" %}
Generate a color palette
{% endembed %}

Now you can copy the colors into the brand colors.

### TailwindCSS

If you want to use the same brand color via TailwindCSS class names, edit the `tailwind.config.ts` file and add the brand colors. Replace the HEX value with your brand color, as regenerated via Themera.&#x20;

{% code title="tailwind.config.ts" %}

```typescript
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
  extend: {
      colors: {
        'brand': {
          50: '#cffafe',
          100: '#cffafe',
          200: '#cffafe',
          300: '#cffafe',
          400: '#cffafe',
          500: '#cffafe',
          600: '#cffafe',
          700: '#cffafe',
          800: '#cffafe',
          900: '#cffafe',
        },
      },
    },
  }
}
```

{% endcode %}

You can now use the brand colors via class names, i.e. `text-brand-500`