← CSS Styling
Responsive design and components · 15 MIN

Custom properties and themes

Custom properties and themes

Custom properties store values that can be reused and overridden. Define colors, spacing, radii and typography in one place. Theme changes can be made by changing variables on a root or theme container.

Try it yourself

Change the example, run it, and explain the result in your own words. Then create one variation of your own.

Key idea

Use the example as a starting point, not something to memorize. Practise, inspect the result and make small improvements.

Code example

 :root { --brand: #2563eb; --space: 1rem; --radius: .8rem; }
.button { background: var(--brand); border-radius: var(--radius); }