Svelte logo

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


  export let task;


  p {
    color: var(--color, red);
  import Todo from './Todo.svelte';

<Todo --color="green" />