← Back to Components

QdsThemeSwitch

A toggle switch component for changing between light and dark themes. Theme preference is automatically saved and restored across sessions.

Overview

The qds-theme-switch component is a custom element that allows users to toggle between light and dark themes. It also supports an “auto” mode that uses the system’s preferred theme. The component saves the user’s theme preference in local storage, so it is restored across sessions.

Usage

To use the qds-theme-switch component, include it in your HTML:

<qds-theme-switch></qds-theme-switch>

API Reference

Attributes

• dark - Whether the current theme is dark (boolean).
• auto - Whether to use system preferences (if supported) (boolean).
• compact - When true, shows only the theme toggle button without the auto button (boolean).

CSS Parts

• button - The button container.
• icon - The theme icon.

Events

• theme-change - When the theme is switched, with detail { dark: boolean, theme: string }.

Example

<qds-theme-switch></qds-theme-switch>
<script>
  const themeSwitch = document.querySelector('qds-theme-switch');
  themeSwitch.addEventListener('theme-change', (event) => {
    console.log('Theme changed:', event.detail);
  });
</script>