Prisma saysCustom properties (CSS variables) store reusable values, declared with -- and read with var().
Declare a variable like --accent: #b388ff (commonly on :root) and use it anywhere with var(--accent). Change it once and everything updates. Unlike preprocessor variables, these are live in the browser, cascade and inherit, and can be read/changed by JavaScript at runtime — the basis of theming.
Power-ups you unlock
Declare with --name, read with var(--name)
Put global ones on :root
They cascade, inherit, and are live at runtime
JS can read/set them for dynamic theming
Jank the Janitor attacks — common mistakes
Expecting them to work in media-query conditions
Typos in the var name fail silently
No fallback for optional vars
Boss battleDefine --accent on :root, use it in three rules, then change it and watch all update.
Example code
<!doctype html><html><head><meta charset="utf-8">
<style>:root{--accent:#b388ff}h1{color:var(--accent)}button{border:1px solid var(--accent);color:var(--accent);background:none;padding:8px 14px}</style></head><body style="background:#06040d"><h1>themed by a variable</h1><button>same accent</button></body></html>