Instance-wide theming using color tokens

Cal.com offers instance-wide theming capabilities with minimum friction. Administrators and developers have the flexibility to tailor the look and feel of the app to align with their brand identity or specific aesthetic preferences with very easy and minor changes.

We use color tokens, which are the primitive color values in our design system, represented by context names. Their values can easily be set inside the apps/web/styles/globals.css file, an example of which is shown below:

**apps/web/styles/globals.css**

  /* background */
:root {
  --cal-bg-emphasis: #e5e7eb;
  --cal-bg: white;
  --cal-bg-subtle: #f3f4f6;
  --cal-bg-muted: #f9fafb;
  --cal-bg-inverted: #111827;

  /* background -> components*/
  --cal-bg-info: #dee9fc;
  --cal-bg-success: #e2fbe8;
  --cal-bg-attention: #fceed8;
  --cal-bg-error: #f9e3e2;
  --cal-bg-dark-error: #752522;
  ...
}
.dark {
  /* background */

  --cal-bg-emphasis: #2b2b2b;
  --cal-bg: #101010;
  --cal-bg-subtle: #2b2b2b;
  --cal-bg-muted: #1c1c1c;
  --cal-bg-inverted: #f3f4f6;

  /* background -> components*/
  --cal-bg-info: #dee9fc;
  --cal-bg-success: #e2fbe8;
  --cal-bg-attention: #fceed8;
  --cal-bg-error: #f9e3e2;
  --cal-bg-dark-error: #752522;
  ...
} 

To modify the theme of an instance, the hexcodes can easily be replaced here to instantly and seamlessly. This ensures a consistent and harmonious visual experience across all sections of the application, reflecting your desired aesthetic with precision.

To have a better understanding of our design system, you can view our design documentation here. If it peaks your interest, you can view the Figma file of our Design Tokens here.

By allowing themes to be applied across the entire instance, businesses can ensure that their brand identity remains consistent. Should there be any rebranding or minor tweaks to the corporate visual identity, instance-wide theming allows for easy and swift updates. With minimal changes, the new theme can be propagated across the entire platform, eliminating the need for manual adjustments on individual sections or components.