pages._explore-components-interaction-themeswitcher.title

pages._explore.sections.basic-usage.title

html

<ThemeSwitcher />

typescript

<script setup lang="ts">
// The ThemeSwitcher automatically detects available themes
// and allows switching between them (light/dark)
</script>

pages._explore.sections.complex-usage.title

html

<ThemeSwitcher 
    :type="ThemeSwitcherTypes.TOGGLE"
/>

typescript

<script setup lang="ts">
import { ThemeSwitcherTypes } from '#core-types/components/interaction/theme-switcher'

// Currently only TOGGLE type is available
// The component shows icons for each available theme
</script>

Interactive Example

Theme switcher:

← Click to switch themes

html

<div class="flex items-center gap-4">
    <Text text="Theme switcher:" />
    <ThemeSwitcher />
    <Text text="← Click to switch themes" />
</div>

typescript

<script setup lang="ts">
// The theme switcher will immediately apply the selected theme
// to the entire application, persisting the choice in localStorage
</script>

pages._explore.sections.props.title

Prop	Default	Type
type	ThemeSwitcherTypes.TOGGLE	ThemeSwitcherTypes

pages._explore.sections.types.title

Name	Type	Options
ThemeSwitcherTypes	enum	TOGGLE