<theme-toggle>

A custom element that allows you to toggle between light, dark and system theme.

Examples

Below are examples of different configurations and use cases of the <theme-toggle> component.

# Example 1 - Default configuration

This is the default configuration. The element will use the system theme by default.

Source code

<theme-toggle></theme-toggle>

# Example 2 - With custom slots

Light Dark System

Source code

<theme-toggle>
  <span slot="icon-light" aria-hidden="true">☀️</span>
  <span slot="label-light">Light</span>
  <span slot="icon-dark" aria-hidden="true">🌙</span>
  <span slot="label-dark">Dark</span>
  <span slot="icon-system" aria-hidden="true">🌓</span>
  <span slot="label-system">System</span>
</theme-toggle>

# Example 3 - Without label

You can hide the label using the no-label attribute. For accessibility reasons, the label is visually hidden but still available to screen readers.

Source code

<theme-toggle no-label></theme-toggle>

# Example 4 - Without icon

Source code

<theme-toggle no-icon></theme-toggle>

# Example 5 - With custom styling

You can customize the styling of the element by using CSS Parts. The following example uses Water.css for styling.

Source code

<style>
  theme-toggle.custom-toggle::part(base) {
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 0.5rem 0.75rem;
    background-color: var(--button-base);
    font-size: 1.5rem;
    transition: background-color var(--animation-duration) ease-in-out;
  }

  @media (hover: hover) {
    theme-toggle.custom-toggle::part(base):hover {
      background-color: var(--button-hover);
    }
  }
</style>

<theme-toggle class="custom-toggle"></theme-toggle>

# Example 6 - Listen for theme change event

You can listen for the tt-theme-change event to get notified when the theme changes. The event will contain the newly selected theme in the detail property.

Source code

<theme-toggle></theme-toggle>

<script>
  const themeToggle = document.querySelector('theme-toggle');

  themeToggle.addEventListener('tt-theme-change', event => {
    console.log(event.detail); // => {theme: 'light' | 'dark' | 'system'}
  });
</script>

<theme-toggle>

Examples

# Example 1 - Default configuration

# Example 2 - With custom slots

# Example 3 - Without label

# Example 4 - Without icon

# Example 5 - With custom styling

# Example 6 - Listen for theme change event

License