CSSCSS · Lesson 13Custom Properties (Variables)Design tokens, theming and dark mode.Video tutorialTrack course · freeCodeCampCSS Full Course — Zero to Hero Speed0.75x1x1.25x1.5x2x Skip intro Next lessonWatch 00:00 · 1 checkpoints Watch on YouTube More on this topic Transcript & captions .txt2/200:00Custom Properties (Variables). Design tokens, theming and dark mode.00:05Try it yourself — edit the sample and run it in the browser.Try it yourself Copy Reset Run<style> :root{ --bg:#0b1020; --fg:#e2e8f0; --accent:#22d3ee; --radius:12px } .dark{ --bg:#000; --accent:#f472b6 } body{ background:var(--bg); color:var(--fg); font-family:system-ui } .chip{ background:var(--accent); color:#000; padding:10px 16px; border-radius:var(--radius); display:inline-block; margin:6px } </style> <div class="chip">default token</div> <div class="dark"><div class="chip">overridden token</div></div>Knowledge check0/1 answeredHow do you read a custom property?var(--name)$nameget(--name)Mark as complete PreviousTransitions & AnimationsNext Pseudo-classes & Pseudo-elements