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 DalgleishProfile ↗

Real-World Case Study

13 Years Exp

AboutStackQuote

RoleCreator of CSS Modules

Salary₹88 Lakhs/yr equivalent

CompanyVercel