​
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. As of version 10 update, a save button was added to the Theme Toggle component. This button saves the state of the canvas as a JSON string to local storage and reconstructs the graph based on this data.

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.

BackgroundContrast Theme