Theme Toggle

Theme toggle allows users to switch between light and dark themes.

Overview

Theme toggle persists the user's preference and integrates with @daffodil/design's theming system.

<daff-sf-theme-toggle></daff-sf-theme-toggle>

Usage

To use theme toggle, import DaffSfThemeToggleComponent into your custom component:

import { DaffSfThemeToggleComponent } from '@daffodil/storefront/theme-toggle';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DaffSfThemeToggleComponent,
  ],
})
export class CustomComponent {}

Accessibility

Theme toggle includes an aria-label that updates based on the current theme. It uses aria-live="polite" to announce theme changes to assistive technologies.