Concorde UI component — 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/co Doc ID: core/components/ui/theme/theme. Keywords: Concorde, supersoniks, core/components/ui/theme/theme, theme, Theme, UI component, sonic-theme, web component, --sc-*, @supersoniks/concorde/theme, theme="custom", light, dark, auto, prefers-color-scheme. URL: https://concorde.supersoniks.org/core/components/ui/theme.

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.

Basic example

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

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.

<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>

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-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>

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-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>

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:

window.parent.postMessage({ type: "GetSonicTheme" }, "*");

API reference