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-colorCSS custom property for<div>elements is red, except for the<div>elements with a class namedfoo. - The value of CSS custom properties is inherited from their parent:
<div> <span /> </div>
If the value of
--text-colorfor<div>in the preceding example is red, then without other CSS rules applied to<span>, the value of--text-colorfor<span>is also red.