Contrast Theme

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>

CSS Color String

default:"theme dependent"

Color of background.

CSS Color String

default:"theme dependent"

Color of text.

CSS Color String

default:"theme dependent"

Color of node.

CSS Color String

default:"theme dependent"

Color of edge.

Theme Toggle Overview

Overview

Getting Started

Styling

Components

Data Flow

Examples

Description

​Description

Description