Set primary brand colors for the light and dark themes of your personal Cal ID booking page so the page matches your visual identity.
Set primary colors for your personal 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 Settings → Custom Branding.
Scroll to Custom brand colors and switch the section toggle to ON.
Switching away from Cal ID defaults
5
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.
Matching your brand in light mode
6
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.
Keeping contrast right in dark mode
7
Save your changes
Click the blue Update button at the bottom of the section to apply these colors to your 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.
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.
How bookers see your colors
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.
