ThemeSwitch | tcpsystems/ui

Try it

Svelte

<ThemeSwitch />

Examples

Toggle theme

Toggle theme.svelte

<script lang="ts">
	import ThemeSwitch from '@tcpsystems/ui/foundation/ThemeSwitch';
</script>

<ThemeSwitch />

Custom storage key

Studio appearance

Custom storage key.svelte

<script lang="ts">
	import ThemeSwitch from '@tcpsystems/ui/foundation/ThemeSwitch';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
</script>

<Cluster>
	<span>Studio appearance</span>
	<ThemeSwitch storageKey="studio-theme" />
</Cluster>

API

Import

import ThemeSwitch from '@tcpsystems/ui/foundation/ThemeSwitch';

Prop	Type	Default
`storageKey?`	`string`	`'tcp-theme'`

Hook	Kind
`.tcp-theme-switch`	Root class
`data-storage-key`	Data attribute
`data-variant`	Data attribute