​
Description

To render the Theme Toggle component, simply pass the contrast prop to the Svelvet component. This will generate a select menu offering 8 preset themes tailored for individuals with diverse visual conditions, featuring common color combinations. Additionally, the component includes a custom option, empowering users to tailor the theme according to their specific requirements.

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

</script>

<body>
    <Svelvet width={400} height={400}>
        <Node />
        <ThemeToggle slot="contrast" />
    </Svelvet>
</body>
bgColor
CSS Color String
default: "theme dependent"

Color of background.

textColor
CSS Color String
default: "theme dependent"

Color of text.

nodeColor
CSS Color String
default: "theme dependent"

Color of node.

edgeColor
CSS Color String
default: "theme dependent"

Color of edge.

Theme ToggleOverview