Svelte by Example: CSS Custom Properties

Svelte components have first-class support for CSS custom properties (also known as CSS variables).

In this example, we'll allow the color of our Todo component to be overridden with a CSS variable.

We'll set up a --color custom property, with a red fallback value.

Todo.svelte

<script>
  let { task } = $props();
</script>

<p>{task}</p>

<style>
  p {
    color: var(--color, red);
  }
</style>

Pass CSS custom properties alongside component props. Svelte adds a wrapper to carry the custom properties; they aren't part of $props.

TodoList.svelte

<script>
  import Todo from './Todo.svelte';
</script>



<Todo task="Mow lawn" --color="green" />

resources://