Components
Theme Toggle
Optional component offering ability to dynamically toggle between themes
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.