# Theme

**`sonic-theme`** is the root element of a Concorde UI: it holds the `--sc-*` design tokens, optionally applies a built-in palette, and is where popovers, modals and toasts are mounted. Import `@supersoniks/concorde/theme` once at the app entry and wrap your app in it. Token names and brand overrides are covered in [Theming](/docs/getting-started/theming).

## Basic example

<sonic-code>
  <template>
    <sonic-theme color font class="block bg-base p-6 rounded-lg">
      <sonic-button type="primary">Save changes</sonic-button>
    </sonic-theme>
  </template>
</sonic-code>

## Theme mode

With no `theme` (or `theme="custom"`), only the core tokens and your own `--sc-*` overrides apply. `light` and `dark` apply the built-in palettes; `auto` switches between them with `prefers-color-scheme`.

<sonic-code>
  <template>
    <div class="grid gap-4 md:grid-cols-2">
      <sonic-theme theme="light" color font class="block bg-base p-4 rounded-md border border-neutral-200">
        <p class="text-sm mb-3 opacity-80">theme="light"</p>
        <div class="flex flex-wrap gap-2">
          <sonic-badge type="primary">Primary</sonic-badge>
          <sonic-badge type="success">Success</sonic-badge>
          <sonic-badge type="danger">Danger</sonic-badge>
        </div>
      </sonic-theme>
      <sonic-theme theme="dark" color font class="block bg-base p-4 rounded-md">
        <p class="text-sm mb-3 opacity-80">theme="dark"</p>
        <div class="flex flex-wrap gap-2">
          <sonic-badge type="primary">Primary</sonic-badge>
          <sonic-badge type="success">Success</sonic-badge>
          <sonic-badge type="danger">Danger</sonic-badge>
        </div>
      </sonic-theme>
    </div>
  </template>
</sonic-code>

## Text color and font

`color` sets the host text color to `--sc-base-content`. `font` applies the base font family, weight and style tokens. Both are off by default. To paint the background, add the Tailwind classes `block` and `bg-base` on the host.

<sonic-code>
  <template>
    <sonic-theme theme="light" color font class="block bg-base p-6 rounded-lg">
      <p>Body copy inherits the base content color and font from the theme.</p>
    </sonic-theme>
  </template>
</sonic-code>

## Pop container

Overlays such as `sonic-modal` are appended to the last connected `sonic-theme`, or to `document.body` when there is none. `Theme.getPopContainer()` returns that element.

<sonic-code>
  <template>
    <sonic-theme theme="light" color font class="block bg-base p-4 rounded-lg">
      <sonic-button onclick="document.getElementById('themePopModal').show()">
        Open modal
      </sonic-button>
      <sonic-modal id="themePopModal">
        <sonic-modal-title>Mounted on theme</sonic-modal-title>
        <sonic-modal-content>
          This dialog is appended under the nearest sonic-theme pop container.
        </sonic-modal-content>
        <sonic-modal-actions>
          <sonic-button hideModal>Close</sonic-button>
        </sonic-modal-actions>
      </sonic-modal>
    </sonic-theme>
  </template>
</sonic-code>

## Embedded iframes

On connect, the theme posts its resolved `--sc-*` values and linked Google Fonts / Adobe Fonts stylesheets to every iframe on the page (message type `SonicTheme`). An iframe can ask for them again:

<sonic-code language="javascript">
  <template>
window.parent.postMessage({ type: "GetSonicTheme" }, "*");
  </template>
</sonic-code>

## API reference

| Attribute | Values | Description |
|----------|---------|-------------|
| `theme` | `custom` (default) · `light` · `dark` · `auto` | Built-in palette; `custom` applies core tokens and your overrides only |
| `color` | boolean | Host text color uses `--sc-base-content` |
| `font` | boolean | Host uses the base font family, weight and style tokens |

| Slot | Description |
|------|-------------|
| *(default)* | Application content |