Skip to content

Theme Toggle

Simple Theme‑Umschaltung mit Light/Dark (localStorage) und optionalen Icons.

vue
<script setup lang="ts">
import { ThemeToggle } from '@stratton-cologne/ui'
</script>

<template>
  <ThemeToggle />
  <!-- oder als Switcher: <ThemeSwitcher /> -->
  <!-- Icons: <Icon name="Sun" /> etc. → siehe Icon -->
  
</template>

Props

  • ariaLabel: Überschreibt A11y-Label.
  • label / labelLight / labelDark: Statische Labels für die Anzeige.

Slots

  • default: Erhält { isDark, theme, toggle, setTheme } und rendert Standardinhalt, wenn nicht überschrieben.

Hinweis: Falls <lucide-icon> global registriert ist, erscheint automatisch ein passendes Sun/Moon-Icon.