CSS Variables (Custom Properties)

Dark Mode with CSS Variables

Implementing dark mode without a heavy theming library comes down to a stable token contract and a media query. This snippet covers the system-preference dark mode using `prefers-color-scheme`, a class-based override that lets users opt in or out, and a per-component theme that nests tokens for a single section.

CSS Preprocessor Features Cheat Sheet

If you have used SCSS or Less, you know variables, nesting, and mixins as preprocessor features. Native CSS now offers all three: custom properties (`--var`), the CSS Nesting Module, and `@layer`. This snippet shows the SCSS form alongside the native form for each so you can see when you actually need a preprocessor and when plain CSS is enough. Audience: practitioners moving from SCSS to native CSS and wondering what they get to drop.

CSS Theming and Custom Properties Quiz

Three drills on theming with CSS custom properties: declaring a token set, switching themes at runtime, and respecting the OS prefers-color-scheme setting.