Advanced Features

CSS Variables (Custom Properties)

Reusable, themeable values declared with -- and used via var().

1Declaring Variables

Custom properties start with -- and are scoped to the element they are defined on.

Example Code

:root {
  --brand: #4f46e5;
  --radius: 10px;
}

.btn {
  background: var(--brand);
  border-radius: var(--radius);
}

var() accepts a fallback used when the variable is undefined.

Example Code

.card {
  padding: var(--card-pad, 16px);
}

Switch themes by overriding variables on a parent or via a class.

Example Code

:root { --bg: white; --fg: #0f172a; }
.dark { --bg: #0f172a; --fg: #f1f5f9; }

body { background: var(--bg); color: var(--fg); }

Finished reading?

Mark this topic as complete to track progress.