P2.8: CSS Variables & Themes

CSS Variables (Custom Properties) allow you to store values and reuse them throughout stylesheets, enabling easy dark/light mode toggling.

1. Declaring CSS Variables

Variables are declared inside the :root pseudo-class and accessed using var().

:root {
  --primary-color: #39FF14;
  --bg-color: #060c18;
}

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

Mark DalgleishView Profile 🔗

Real-World Developer Case Study

13 Years Exp

RoleCreator of CSS Modules

Salary₹88 Lakhs/yr equivalent

CompanyVercel

Core Tech Stack

CSS VariablesDark Mode theme tokensCSS Modules

“Dynamic styling and theming used to require heavy JS computations. Now, CSS variables allow you to toggle themes on the client instantly with zero layout re-renders.”