​
Description

The Theme Toggle component can be rendered by passing the toggle prop to the Svelvet component. By default, this will toggle between light and dark themes. For additional customization, import the component and pass the entire thing as a child of Svelvet

When passing the component to Svelvet, you must specify slot=“toggle”
<script lang="ts">
	import { Svelvet, Node, ThemeToggle } from 'svelvet';

</script>

<body>
    <Svelvet width={400} height={400}>
        <Node />
        <ThemeToggle main="dark" alt="light" slot="toggle" />
    </Svelvet>
</body>
main
string
default: "light"

A string associated with a custom theme created using a :root[svelvet-theme="theme-name"] CSS selector. Svelvet reserves light and dark.

alt
string
default: "dark"

A string associated with a custom theme created using a :root[svelvet-theme="theme-name"] CSS selector. Svelvet reserves light and dark.

corner
NE | SE | NW | SW
default: "NE"

Enum controlling corner positioning of button element.

bgColor
CSS Color String
default: "theme dependent"

Color of background.

iconColor
CSS Color String
default: "theme dependent"

Color of icon.

BackgroundOverview