setTheme()

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.

Hide DailyThemeColors fields

accent

string

Main theme color. Used for primary actions and keyboard focus indicators.

accentText

string

Text color rendered on top of accent.

background

string

Background color for the UI chrome (toolbar, sidebar, etc.).

backgroundAccent

string

Background color for highlighted UI elements.

baseText

string

Default text color, as rendered on background or backgroundAccent.

border

string

Default border color for bordered elements.

mainAreaBg

string

Background color for the main call area.

mainAreaBgAccent

string

Background color for video tiles within the main call area.

mainAreaText

string

Text color for labels rendered inside the main call area (e.g. participant names).

supportiveText

string

Text color for less-emphasized, supportive text.

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' } });

Types

DailyCallOptions: theme

Methods

theme()

Events

theme-updated

Guides

Color themes

setSubscribeToTracksAutomatically()setUserData()

Daily Call Client

Types

Factory Methods

Static Methods

Instance Methods

Events

Parameters

Return value

Examples

Global theme

Light and dark themes

Single color override

See also

Types

Methods

Events

Guides

​Parameters

​Return value

​Examples

​Global theme

​Light and dark themes

​Single color override

​See also

Types

Methods

Events

Guides

Parameters

Return value

Examples

Global theme

Light and dark themes

Single color override

See also