Svelvet home pagelight logo
Components
Theme Toggle

​
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 widht={400} height={400}>
        <Node />
        <ThemeToggle main="dark" alt="light" slot="toggle" />
    </Svelvet>
</body>
mainDefault: "light"
string

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

altDefault: "dark"
string

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

cornerDefault: "NE"
NE | SE | NW | SW

Enum controlling corner positioning of button element.

bgColorDefault: "theme dependent"
CSS Color String

Color of background.

iconColorDefault: "theme dependent"
CSS Color String

Color of icon.