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

# Agency Theme

<Frame>
  **The design preview interface:**

  <img src="https://mintcdn.com/convocore/h_96SLAvmHo1k2ly/images/agency-design-preview.png?fit=max&auto=format&n=h_96SLAvmHo1k2ly&q=85&s=52043415ec5707f4addad8366b52fcb4" alt="Agency color usage options" className="rounded-md" width="500" data-path="images/agency-design-preview.png" />
</Frame>

Navigate to the Theme tab in the agency manager to access the following customization features:

### Font Family

Select a font that resonates with your brand from the extensive library of **free** font from [Google Fonts](https://fonts.google.com).

### Color Usage

Choose how extensively you want to use your brand colors throughout the dashboard:

<Frame>
  <img src="https://mintcdn.com/convocore/45Ecjxi6tZs54Ia5/images/agency-color-usage.png?fit=max&auto=format&n=45Ecjxi6tZs54Ia5&q=85&s=00995b75aa56c46a89870696f7c934b2" alt="Agency color usage options" className="rounded-md" width="600" data-path="images/agency-color-usage.png" />
</Frame>

<CardGroup cols={3}>
  <Card title="Plain" icon="palette">
    Simple design with primary color used sparingly
  </Card>

  <Card title="Colorful" icon="paintbrush">
    More branded look with increased color usage
  </Card>

  <Card title="Gradient" icon="fill-drip">
    Mix of colors with trendy gradient touches
  </Card>
</CardGroup>

### Theme Variant

Select the overall style of your dashboard elements:

<Frame>
  <img src="https://mintcdn.com/convocore/h_96SLAvmHo1k2ly/images/agency-theme-variant.png?fit=max&auto=format&n=h_96SLAvmHo1k2ly&q=85&s=9993af1f18db2480aa3c9dfeb1335192" alt="Agency theme variant options" className="rounded-md" width="500" data-path="images/agency-theme-variant.png" />
</Frame>

<CardGroup cols={2}>
  <Card title="Default" icon="circle-check">
    Standard, modern look
  </Card>

  <Card title="Bordered" icon="border-all">
    Elements with defined borders
  </Card>

  <Card title="Faded" icon="soft-serve">
    Subtle, softer appearance
  </Card>

  <Card title="Flat" icon="square">
    Minimalist, flat design
  </Card>
</CardGroup>

### Agency Brand Colors

Define your brand's color palette:

<Frame>
  <img src="https://mintcdn.com/convocore/45Ecjxi6tZs54Ia5/images/agency-brand-color-picker.png?fit=max&auto=format&n=45Ecjxi6tZs54Ia5&q=85&s=397d567b119309282e39bcb243fe563c" alt="Agency color picker" className="rounded-md" width="500" data-path="images/agency-brand-color-picker.png" />
</Frame>

<Steps>
  <Step title="Set Primary Color">
    Choose your main brand color using the color picker or enter the HEX code
  </Step>

  <Step title="Adjust Color Variants">
    Fine-tune different shades of your primary color for various UI elements
  </Step>

  <Step title="Toggle Dark Mode">
    Enable or disable dark mode for your dashboard
  </Step>
</Steps>

### Client Dashboard Custom CSS

For advanced customization, you can add custom CSS to fine-tune your dashboard's appearance:

<Frame>
  <img src="https://mintcdn.com/convocore/45Ecjxi6tZs54Ia5/images/agency-css-settings.png?fit=max&auto=format&n=45Ecjxi6tZs54Ia5&q=85&s=c21466bc04fa634d8cf0a81c7eb2cc13" alt="Agency custom CSS field" className="rounded-md" width="500" data-path="images/agency-css-settings.png" />
</Frame>

<Tip>
  Use **custom CSS** to make precise adjustments to your dashboard's look and feel. Be cautious with your changes to maintain overall design consistency.
</Tip>

<CodeGroup>
  ```css Example Custom CSS theme={null}
  /* This example makes the corners more square, nice way to imitate website design for brand consistency */
  * {
    border-radius: 1px !important;
  }
  ```
</CodeGroup>
