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 HelloWorld component to be overridden with a CSS variable.

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

Svelte supports CSS custom properties as component "props".

Todo.svelte


<script>
  export let task;
</script>

<p>{task}</p>

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

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

<Todo --color="green" />

resources://