> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.cal.id/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Managing Custom Brand Colors in Cal ID

In **Cal ID**, set primary colors for your booking page so it matches your visual identity — with separate colors for light and dark themes.

| Set your brand colors

1. Log in to Cal ID.
2. Click the **Settings** icon in the sidebar.
3. Open the **Custom Branding** tab.
4. Scroll to **Custom brand colors** and switch the toggle **ON**.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/f/1/c/6f1c2c7b8034d000/image_1ouelcw.png =1223x615)

5. **Light theme:** click **Brand color (light theme)** and enter a hex code or use the picker.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/f/1/c/6f1c2c7b8034d000/image_1fbaruk.png =1225x615)

6. **Dark theme:** click **Brand color (dark theme)** and choose the color for dark mode.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/f/1/c/6f1c2c7b8034d000/image_1u8psdk.png =1223x615)

7. Click **Update** to apply.

> **Tip:** pick colors that stay readable in each theme — a darker shade for light mode, a brighter one for dark mode.

| What changes on your page

* **Buttons:** primary actions (like "Confirm") use your brand color.
* **Highlights:** selected dates and active time slots are highlighted in your color.
* **Navigation:** progress bars and some icons adopt your scheme.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/f/1/c/6f1c2c7b8034d000/image_9fxket.png =1152x615)

![](https://storage.crisp.chat/users/helpdesk/website/-/6/f/1/c/6f1c2c7b8034d000/image_lj3yya.png =1152x615)

| 💡 Tip

For accessibility, avoid very pale colors (white, light yellow) as your primary — they're hard to read on light backgrounds. Aim for strong contrast so buttons stay easy to see.