Theming Svelte components with CSS custom properties

Let’s take a quick knowledge check on CSS custom properties:

• You define CSS custom properties like any other CSS properties, except that the name of the CSS custom property starts with two dashes:

  --text-color: blue;

• To reference the CSS custom property, use the var() function:

  color: var(--text-color);

• CSS custom properties cascade like any other CSS properties:

  .foo {
    --text-color: blue;
  }
  div {
    --text-color: red;
  }

  The value of the --text-color CSS custom property for <div> elements is red, except for the <div> elements with a class named foo.

• The value of CSS custom properties is inherited from their parent:

  <div>
    <span />
  </div>

  If the value of --text-color for <div> in the preceding example is red, then without other CSS rules applied to <span>, the value of --text-color for <span> is also red.

Defining CSS custom properties...