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

Custom CSS is injected under the agency root (`.vg-agency-root-container` / `.vg-agency--root`). Prefer scoping selectors under that root so styles never leak into non-agency surfaces.

### CSS selector map (client dashboard)

Use these stable `vg-*` hooks in Agency → Theme → Client Dashboard Custom CSS. Legacy `vgd-*` hooks still work where present (dual-aliased).

| Area | Example selectors |
| - | - |
| Agency root | `.vg-agency-root-container`, `.vg-agency--root`, `.vg-agency--loading-skeleton` |
| App shell | `.vg-shell--root`, `.vg-shell--topbar`, `.vg-shell--sidebar`, `.vg-shell--content`, `.vg-shell--debugger-pane` |
| Agent shell | `.vg-agent-shell--root`, `.vg-agent-shell--nav-wrap`, `.vg-agent-shell--main`, `.vg-agent-shell--content`, `.vg-agent-shell--debugger-toggle` |
| Agent nav | `.vg-agent-nav--root`, `.vg-agent-nav--button`, `.vg-agent-nav--label`, `.vg-agent-nav--icon`, `.vg-agent-nav--new-agent-button` |
| Usage / trial ribbon | `.vg-usage-ribbon`, `.vg-usage-ribbon--trial`, `.vg-usage-ribbon--pay-button`, `.vg-trial-modal--container` |
| Login | `.vg-login-container--outer`, `.vg-login-container--inner`, `.vg-login-form`, `.vg-login-submit-button`, `.vg-login--lang-switcher` |
| Signup | `.vg-signup-form`, `.vg-signup-submit-button` |
| Forgot / reset password | `.vg-forgot-password--*`, `.vg-reset-password--*` |
| Cookie / blocked / SSO | `.vg-cookie-consent--*`, `.vg-access-blocked--*`, `.vg-sso--*` |
| Onboarding | `.vg-onboarding--page`, `.vg-onboarding-welcome--*`, `.vg-onboarding-goals--*`, … per step |
| Home | `.vg-home--route`, `.vg-home--container`, `.vg-home--try-agent-btn` |
| Convos | `.vg-convos--*`, plus dual `.vgd-*` on the convos layout |
| Billing | `.vg-billing--*` |
| Channels / integrations | `.vg-channels--*`, `.vg-integrations--*`, `.vg-integration-card--*` |
| Analytics / leads / settings / KB | `.vg-analytics--*`, `.vg-leads--*`, `.vg-settings--*`, `.vg-kb--*` |
| Footer | `.vg-agency-footer--container`, `.vg-agency-footer--links` |

Full commented starter stylesheet: [`/sample-dashboard-custom.css`](/sample-dashboard-custom.css) (also useful as a copy/paste base in the Agency CSS editor).

<CodeGroup>
  ```css Example Custom CSS theme={null}
  /* Scope everything to the agency root */
  .vg-agency-root-container .vg-login-submit-button {
    border-radius: 9999px !important;
  }

  .vg-agency-root-container .vg-agent-nav--button[data-active="true"],
  .vg-agency-root-container .vg-agent-nav--button.bg-primary-50 {
    background: yourBrandColor !important;
  }

  /* Squared corners across the client dashboard */
  .vg-agency-root-container * {
    border-radius: 1px !important;
  }
  ```
</CodeGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.