Components
Theme Toggle
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 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.