> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daily.co/llms.txt
> Use this file to discover all available pages before exploring further.

# setTheme()

> Sets the color theme for Daily Prebuilt.

`setTheme(theme)`

<Badge color="green">{"✓"} Prebuilt</Badge> <Badge color="red">{"✗"} Custom</Badge>

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`](/reference/daily-js/events/iframe-ui-events#theme-updated) event when the theme changes.

## Parameters

<ParamField body="theme" type="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.

  <Expandable title="DailyThemeColors fields" defaultOpen="true">
    <ResponseField name="accent" type="string">
      Main theme color. Used for primary actions and keyboard focus indicators.
    </ResponseField>

    <ResponseField name="accentText" type="string">
      Text color rendered on top of `accent`.
    </ResponseField>

    <ResponseField name="background" type="string">
      Background color for the UI chrome (toolbar, sidebar, etc.).
    </ResponseField>

    <ResponseField name="backgroundAccent" type="string">
      Background color for highlighted UI elements.
    </ResponseField>

    <ResponseField name="baseText" type="string">
      Default text color, as rendered on `background` or `backgroundAccent`.
    </ResponseField>

    <ResponseField name="border" type="string">
      Default border color for bordered elements.
    </ResponseField>

    <ResponseField name="mainAreaBg" type="string">
      Background color for the main call area.
    </ResponseField>

    <ResponseField name="mainAreaBgAccent" type="string">
      Background color for video tiles within the main call area.
    </ResponseField>

    <ResponseField name="mainAreaText" type="string">
      Text color for labels rendered inside the main call area (e.g. participant names).
    </ResponseField>

    <ResponseField name="supportiveText" type="string">
      Text color for less-emphasized, supportive text.
    </ResponseField>
  </Expandable>
</ParamField>

## Return value

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

## Examples

### Global theme

```javascript theme={null}
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

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

### Single color override

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

## See also

<CardGroup>
  <Card title="Types" icon="t" iconType="solid">
    * [DailyCallOptions: theme](/reference/daily-js/types/daily-call-options#param-theme)
  </Card>

  <Card title="Methods" icon="code" iconType="solid">
    * [theme()](/reference/daily-js/instance-methods/theme)
  </Card>

  <Card title="Events" icon="bolt" iconType="solid">
    * [theme-updated](/reference/daily-js/events/iframe-ui-events#theme-updated)
  </Card>

  <Card title="Guides" icon="book-open" iconType="solid">
    * [Color themes](/docs/prebuilt/customizing-daily-prebuilt-calls-with-color-themes)
  </Card>
</CardGroup>