Skip to main content
setTheme(theme) Prebuilt Custom Sets the color theme for an active Daily Prebuilt call. All colors must be in hex format (e.g. "#286DA8"). You can provide a global theme or separate light and dark variants — if you provide one of light/dark, you must provide both. Daily Prebuilt determines the color mode using @media (prefers-color-scheme: dark | light), following the user’s browser or OS setting. Fires a theme-updated event when the theme changes.

​
Parameters

​
theme
DailyThemeConfig
required
A global theme object { colors }, or a { light, dark } object with separate themes for each mode. All color fields are optional — omitted fields fall back to Prebuilt defaults.

​
Return value

Returns a Promise that resolves to the full DailyThemeConfig that was set.

​
Examples

​
Global theme

call.setTheme({
  colors: {
    accent: '#286DA8',
    accentText: '#FFFFFF',
    background: '#FFFFFF',
    backgroundAccent: '#FBFCFD',
    baseText: '#000000',
    border: '#EBEFF4',
    mainAreaBg: '#000000',
    mainAreaBgAccent: '#333333',
    mainAreaText: '#FFFFFF',
    supportiveText: '#808080',
  },
});

​
Light and dark themes

call.setTheme({
  light: {
    colors: {
      accent: '#286DA8',
      background: '#FFFFFF',
    },
  },
  dark: {
    colors: {
      accent: '#E83551',
      background: '#071D3A',
    },
  },
});

​
Single color override

// Only override the accent color; everything else uses Prebuilt defaults
call.setTheme({ colors: { accent: '#286DA8' } });

​
See also

Types

Methods

Events

Guides