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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.shipped.club/other/theme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.