Skip to main content

Documentation Index

Fetch the complete documentation index at: https://svelvet.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
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.