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 />

In a settings row

Studio appearance

In a settings row.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 />
</Cluster>

API

Import

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

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