Skip to main content
Set primary colors for your team’s booking page so it matches your company’s visual identity. You can define different colors for light and dark themes so the page looks right regardless of the booker’s system settings. Set them under Teams → Edit team → Custom Branding.

​
Step-by-step configuration

1

Log in to Cal ID

Sign in to your account.
2

Go to Teams

Click on the Teams icon in the left-hand sidebar.
3

Access the team menu

Locate the team, click the three horizontal dots next to its name, and select Edit team.
4

Go to the Custom Branding tab

Click on the Custom Branding tab at the top of the page.
5

Enable the feature

Scroll to Custom brand colors and switch the section toggle to ON.
6

Set the light theme color

Click on the Brand color (light theme) field, then enter your brand’s Hex code or use the color picker to select the primary color for light mode.
7

Set the dark theme color

Click on the Brand color (dark theme) field, then select the color that will represent your brand when a booker views your page in dark mode.
8

Save your changes

Click the blue Update button at the bottom of the section to apply these colors to your team’s booking page.
Choose colors that remain readable in their respective themes — for example, a darker shade for light mode and a slightly brighter or more vibrant shade for dark mode.

​
What this changes on your page

Once saved, your custom colors will override the default Cal ID branding in several key areas:
  • Buttons: Your primary action buttons (like “Confirm”) will use your selected brand color.
  • Highlights: Selected dates and active time slots in the calendar will be highlighted in your brand color.
  • Navigation elements: Progress bars and specific icons will adopt your custom color scheme.
Team booking page in light mode with the selected date, active time slots, and Confirm button in the team brand color

How bookers see the team's colors

Team booking page in dark mode with time slots and buttons rendered in the dark theme brand color

The same page after dark mode

To ensure accessibility, avoid using very pale colors (like white or light yellow) as your primary brand color, as they can be difficult to read on light backgrounds. Aim for a contrast ratio that keeps your buttons legible for everyone.

Personal brand colors

Apply the same color controls to your own personal booking page.

Team Custom Branding

Add a banner and logo to complete the team page.

Related topics

Managing Custom Brand Colors in Cal IDCustom Branding for TeamsCustomize Your Brand Logo and Favicon in Cal ID for TeamTeam Appearance Settings