Welcome to the new Daily Docs. Please let us know what you think.

Customizing Daily Prebuilt calls with color themes

Example custom Daily Prebuilt colors with blue and black surrounding four participants on a call

Daily Prebuilt includes the ability to customize theme colors for various parts of the video call UI, even allowing options to specify light or dark modes (see below for specific elements which can be customized). For the moment, this feature is available to all users, no matter which plan you subscribe to. In the future, it will be part of our branding bundle on our Scale plan. We’ve even included Figma templates to accelerate your prototyping.

What can be customized?

Each of these properties can be customized with any valid hex color, ex. #AABBCC or #001122. You can specify as few, or as many properties, as you want. For example, you could give all ten properties a color or simply provide an accent color.

accentMain theme color. Used for primary actions and keyboard focus.
accentTextText color rendered on accent.
backgroundBackground color.
backgroundAccentBackground color for highlighted elements.
baseTextDefault text and icon color, as rendered on background or backgroundAccent.
borderDefault border color for bordered elements.
mainAreaBgBackground color for the main call area.
mainAreaBgAccentBackground color for video tiles.
mainAreaTextText color for text rendered inside the call main area, e.g. names.
supportiveTextText color for supportive, less emphasized, text.

How do I customize it?

There are three ways to customize your theme:

  1. Passing a theme property to createFrame()
  2. Passing a theme property to join()
  3. Via the setTheme() method

We’ll look at options 1 and 2 first since they are similar.

Let’s say you want to customize the accent color so it’s aligned with your brand.

Using createFrame():

or via join():

Or finally, via setTheme():

Note: When applied during a call, setTheme() overrides any color themes specified in createFrame() or join().

In the above examples, we’re customizing a single color, accent. Remember, you can customize as many colors as you want, even all ten, effectively creating an entirely new theme!

But, many of your users might have a preference for either a dark or light theme, so we’ve provided a means for those to be customized individually.

Say, for example, you wanted to have a different accent color, for each theme type:

Note: if you provide a light theme, you must also provide a dark, or vice-versa.

Whenever a new theme is applied, we also emit a theme-updated event which contains the theme that was applied.

An example event payload, based on the setTheme() call above would look like:

Additionally, you can get the current theme at any point using the theme() method. Building again, on the above example, consider the following, where currentTheme would contain the same theme object:

Rainbow colors surround Daily Prebuilt embedded video calls

Creating a full theme

Although every example thus far has been using a single color override (accent), you can, of course, provide new values for all available colors to any of the aforementioned methods.

One global theme:

Or separate light and dark themes:

One more thing: prototype in Figma

To help you and your team design and preview your color theme, we have put together a few Figma files that will help you better visualize how the colors of your theme map to the individual UI elements of Daily Prebuilt.

If you are a Figma pro, feel free to jump right in! Here are links to the default dark and light Figma theme files, respectively. If you aren’t, read on to learn how to use these files.

Get started

Using the Figma files requires:

  1. A Figma account, sign up if you do not have one
  2. A desktop computer and modern browser (like Chrome). Figma’s browser requirements.
  3. Your brand's colors!

Once you’ve signed up, open either of our default theme files via one of these two links: dark theme or light theme and duplicate it to your Figma account. These are the default themes that Daily Prebuilt ships with. You will be modifying these files to preview your color palette.

Draft templates are duplicated in the Figma interface

Duplicate to drafts by clicking on the chevron (down arrow) in the top bar.

Once you’ve duplicated the file, navigate to your drafts folder by clicking on the Figma icon (top left) and selecting Back to files, choose the Drafts tab, and then open the duplicated file—named Daily Prebuilt [Light] Theme (Copy). If you are using Figma’s native Mac/Windows app, click on the home icon.

Modifying the Figma theme file

Themes are composed of 10, editable, color styles which are shown in Figma’s design panel—if you cannot view the styles, hit the escape key to deselect your current selection.

Each style maps to individual elements that are spread across all of the mock interfaces. By editing these styles, you will be able to preview what your theme will look like in real-time.

Colors go from red to green to blue to purple in Figma template

Editing the Background color style.

To edit a style:

  1. Simply hover over a Color Style and click the edit icon.
  2. Then click on the fill color to choose a new color or enter a HEX value.

As you’ll see, elements that map to the color are updated in real-time! Feel free to edit all of the colors in the template, or edit only the ones that you’d like.

Note: certain elements are not editable at this time. These include, system colors (errors/warnings), name/mic UI overlaid over participants video feeds, etc.

Once you have finalized your theme you will need to copy the HEX values into a string and pass them off to a developer for implementation. To do this, just click on the edit icon (beside each style) and copy the HEX value to your clipboard.

Note: As always, when dealing with color, you will want to consider how this impacts accessibility, in particular the color contrast. We suggest verifying this with a contrast checker.

If you have any questions, please contact us! We’re excited to see what you create.