Step-by-step guide: customizing your Cal.com theme colors
Cal.com is more than just scheduling infrastructure; it's a communication solution. Our product makes it easier for people to meet, collaborate, and generally make things happen. We do this by providing accessible and customizable tools that our users can use to tailor their account or scheduling environment. We know that with all the options we offer, sometimes it's easy to miss one or two features.
Cal.com is passionate about helping each and every subscriber on their journey to becoming a time management master. This is one of the reasons why we regularly publish blog posts to help individuals discover features they might not use every day but could make a difference if they do.
Boost your brand with Cal.com's custom color options
Today we're using this opportunity to spotlight our custom colors option. This is a feature that you might not have used yet. People usually encounter it as part of adding an embedded booking component to their website. Whenever a Cal.com user wants to add a bookable event to their website, we offer them the option of doing so via a custom-generated snippet of code. This code has options that account holders can adjust, controlling everything from the theme to the brand colors. Needless to say, our embeds are a pretty popular feature.
However, you might be wondering: it's great that you can customize scheduling events, but what about my regular interface? Can I add colors to that? The answer is yes; of course you can. We are committed to ensuring that our users' brands can be part of their calendar scheduling environment. So, with this in mind, just follow the steps below to customize your account-level booking interface colors.
Customizing your account-wide color options
Log into your Cal.com account.
Click on the drop-down menu right by your username.
Select "My Settings."
Select "Appearance" from the menu bar on the left-hand side of your screen.
Scroll down until you see "Custom Brand Colors." If the toggle is in the off position, click on it to activate it so it switches to the on position.
Choose the brand color that you would like to use as part of the light version of the theme.
Next, choose the associated brand color you like for the dark version of the theme.
Once you've made your selections, click the update button.
With this, you've successfully changed how your Cal.com booking portal looks so that it best reflects your brand's colors.
Customizing your embed color options
Now, you might be wondering: What if I need different colors for events that I embedded on my website? Don't worry; this isn't a problem because each embed is customizable. If you need it, the steps below will guide you through customizing event embed colors:
Log into your Cal.com account.
Click on "Event Types" if you're not already at your Event Types dashboard.
Click on the three dots on the left-hand side of the screen. This will open a drop-down menu.
Click on the "embed" option from within the drop-down menu. Choose "inline embed."
Next, select the brand color that you'd like to use for the inline embed.
You can also specify whether you want to use the light theme or the dark theme via the drop-down menu under the theme section.
Once you've adjusted the colors so the brand color reflects one that's complementary to your website, simply click the copy code button.
You can follow these same steps to customize the colors of other Cal.com embeds like the floating pop-up button, pop-up element, and pop-up element via click, as well as the email embed.
We hope that this tutorial has made it easier for you to take advantage of one of our simplest yet most impactful aesthetic features. If you have any questions or tips that you would like to share about how you use Cal.com, please feel free to reach out to us either via LinkedIn or X/Twitter.
Thanks for reading, and as always, happy scheduling.
