shoelace/docs/components/theme.md

Theme

[component-header:sl-theme]

Themes change the visual appearance of components.

This component will activate a theme and apply its styles to everything inside. All themes must adhere to theming guidelines and expose a class that follows the sl-theme-{name} convention.

To activate a theme, include the necessary stylesheet(s) and wrap your content in an <sl-theme> element. The theme to use is specified by the name prop.

<link rel="stylesheet" href="your-theme.css">

<sl-theme name="dark">
  <!-- Everything inside will use the dark theme -->
</sl-theme>

?> It's important to note that the default "light" theme isn't actually a theme — it's a set of design tokens and base styles that themes can use as a foundation to build upon. As such, it's not possible to opt in to the default theme using this component.

Examples

Dark Theme

To use the official dark theme, include its stylesheet per the instructions on the themes page and activate it as shown in the example below. All design tokens and components will render accordingly.

<div class="theme-overview">
  <sl-theme name="dark">

    <!-- Design tokens used inside <sl-theme> will reflect the theme's colors -->
    <div style="background-color: var(--sl-color-gray-900); padding: var(--sl-spacing-xx-large);">
      <!-- These are just some sample components to demonstrate -->
      <sl-dropdown>
        <sl-button slot="trigger" caret>Dropdown</sl-button>
        <sl-menu>
          <sl-menu-item>Item 1</sl-menu-item>
          <sl-menu-item>Item 2</sl-menu-item>
          <sl-menu-item>Item 3</sl-menu-item>
        </sl-menu>
      </sl-dropdown>

      <sl-dialog label="Dialog">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <sl-button slot="footer" type="primary">Close</sl-button>
      </sl-dialog>
      <sl-button>Open Dialog</sl-button>

      <sl-checkbox>Check me</sl-checkbox>
    </div>
  </sl-theme>
</div>

<script>
  (() => {
    const container = document.querySelector('.theme-overview');
    const dialog = container.querySelector('sl-dialog');
    const openButton = dialog.nextElementSibling;
    const closeButton = dialog.querySelector('sl-button[slot="footer"]');

    openButton.addEventListener('click', () => dialog.show());
    closeButton.addEventListener('click', () => dialog.hide());
  })();
</script>

[component-metadata:sl-theme]