How would you implement a light/dark theme toggle using custom properties without duplicating component styles?

Short interview answer

Define semantic custom properties such as --surface, --text, and --brand once with default values, write every component against those names via var(), then define exactly one additional override block, keyed by a class, a data attribute, or a prefers-color-scheme media query, that redefines the same property names. Every component that already reads var() repaints without being touched.