​
Overview

This section is a work in progress, but listed below are the available CSS variables for styling elements. Types are not provided as these are traditional CSS parameters.

These variables can be passed as styling props to individual components or used to create global themes using a selector with the following structure: :root[svelvet-theme="theme-name"].

These theme names can be passed to the Svelvet component via the reactive theme prop and to the Theme Toggle component via the main and alt props.

When passing to individual components, these styles are scoped to the component itself. This is not currently true of Edges and our recommendation is to create custom Edge components.

Scroll to the bottom for example code.

You can style parameters beyond those available here by using global selectors. :global(.svelvet-node) applies to all Nodes, for instance. Will add all internal class names with time!

​
Graph

​
--background-cursor
default: "move"

Icon displayed when the cursor is over the background element.

​
--background-color
default: "white"

Color of the background.

​
--dot-color
default: "gray"

Color of the grid dots

​
--selection-box-color
default: "lightblue"

Color of the selection box used to grab multiple Nodes

​
Nodes

​
--node-border-width
default: "1px"

Width of the default Node border

​
--node-border-radius
default: "10px"

Border radius of the default Node

​
--node-cursor
default: "grab"

Icon displayed when the cursor is over a Node component

​
--node-cursor-blocked
default: "not-allowed"

Icon displayed when the cursor is over a Node component which is blocked

​
--node-width
default: "200px"

Width of the default Node

​
--node-height
default: "100px"

Height of the default Node

​
--node-color
default: "white"

Color of the default Node

​
--node-text-color
default: "white"

Text color of the default Node

​
--node-selection-color
default: "white"

Border color of the default Node when selected

​
--node-border-color
default: "white"

Border color of the default Node when not selected

​
--node-shadow
default: "multi-layer shadow"

Shadow of the default Node

​
Anchors

​
--anchor-border-width
default: "1px"

Width of the default Anchor border

​
--anchor-radius
default: "50%"

Border radius of the default Anchor

​
--anchor-width
default: "12px"

Width of the default Anchor

​
--anchor-height
default: "12px"

Height of the default Anchor

​
--anchor-color
default: "gray"

Color when the default Anchor is in a neutral state

​
--anchor-border-color
default: "gray"

Color when the default Anchor is in a neutral state

​
--anchor-connected
default: "gray"

Color when the default Anchor is connected

​
--anchor-connected-border
default: "gray"

Border color when the default Anchor is connected

​
--anchor-hovering
default: "gray"

Color when the default Anchor is hovering

​
--anchor-hovering-border
default: "gray"

Border color when the default Anchor is hovering

​
--anchor-connecting
default: "gray"

Color when the default Anchor is connecting

​
--anchor-connecting-border
default: "gray"

Border color when the default Anchor is connecting

​
Edges

​
--edge-width
default: "2px"

Width of the default Edge

​
--edge-color
default: "black"

Color of the default Edge

​
--target-edge-color
default: "gray"

Color of the default target Edge visible only when hovering and the Edge has been created with an edgeClick function.

<script lang="ts">
	import { Svelvet, Node, ThemeToggle } from 'svelvet';
</script>

<Svelvet>
	<Node --anchor-color="green" --anchor-width="20px" --anchor-radius="2px" />
	<Node --node-color="red" --node-border-radius="40px" />
	<Node --node-border-color="black" />
	<ThemeToggle slot="toggle" main="light" alt="custom-theme" />
</Svelvet>

<style>
	:root[svelvet-theme='custom-theme'] {
		--node-color: hsl(225, 30%, 50%);
		--node-border-color: hsl(225, 20%, 40%);
		--node-selection-color: hsl(45, 90%, 60%);
		--text-color: hsl(0, 0%, 100%);

		--background-color: hsl(225, 20%, 27%);
		--dot-color: hsl(225, 10%, 50%);

		--accent-color: hsl(45, 90%, 60%);
		--primary-color: hsl(225, 30%, 66%);

		--edge-color: hsl(0, 0%, 100%);
		--target-edge-color: hsl(225, 20%, 40%);

		--anchor-color: hsl(45, 90%, 67%);
		--anchor-border-color: hsl(45, 90%, 87%);
		--anchor-connected: hsl(45, 90%, 100%);
		--anchor-connected-border: hsl(225, 20%, 20%);

		--anchor-connecting: hsl(225, 30%, 40%);
		--anchor-connecting-border: hsl(0, 0%, 100%);

		--anchor-hovering: hsl(225, 20%, 46%);
		--anchor-hovering-border: hsl(0, 0%, 0%);

		--minimap-background-color: hsl(225, 20%, 27%);

		--minimap-node-color: hsl(225, 30%, 20%);

		--controls-background-color: hsl(225, 20%, 27%);
		--controls-text-color: hsl(0, 0%, 100%);

		--theme-toggle-text-color: hsl(0, 0%, 100%);
		--theme-toggle-color: hsl(225, 20%, 27%);
	}
</style>
InstallationSvelvet