How can CSS variables enable theming for dark mode?

How can CSS variables enable theming for dark mode?

• A. Use inline styles in HTML to set variables.
• B. Redefine CSS variables inside selectors or media queries (e.g., [data-theme='dark'] { --bg: #000; --fg: #fff; }).
• C. Use separate CSS files only for each theme.
• D. Rewrite variables in every rule manually instead of using variables.

Answer: (B)

CSS custom properties let you define values once and reuse them everywhere with var(--name). The power for theming comes from the fact that these variables are inherited and can be redefined in a more specific scope without touching every rule. Define a default set of colors at the root, like --bg for background and --fg for foreground. Then, in a dark-theme scope—such as a data attribute on an element or a media query—you redefine those same variables just for that scope. All code that uses var(--bg) and var(--fg) automatically picks up the new values when the scope is active. This makes switching themes fast and centralized, because you’re not duplicating rules or rewriting selectors—you're simply changing the values that the rest of the CSS pulls from. A common pattern looks like this: set default variables on :root, then override in a dark-themed selector like [data-theme="dark"] or within a @media (prefers-color-scheme: dark) block. For example, you’d keep styling as background: var(--bg); color: var(--fg); and only change --bg and --fg in the dark scope. This approach supports easy theming and dynamic switching without needing separate CSS files or inline styles, and it respects inheritance so nested elements adopt the new theme values automatically.

CSS custom properties let you define values once and reuse them everywhere with var(--name). The power for theming comes from the fact that these variables are inherited and can be redefined in a more specific scope without touching every rule.

Define a default set of colors at the root, like --bg for background and --fg for foreground. Then, in a dark-theme scope—such as a data attribute on an element or a media query—you redefine those same variables just for that scope. All code that uses var(--bg) and var(--fg) automatically picks up the new values when the scope is active. This makes switching themes fast and centralized, because you’re not duplicating rules or rewriting selectors—you're simply changing the values that the rest of the CSS pulls from.

A common pattern looks like this: set default variables on :root, then override in a dark-themed selector like [data-theme="dark"] or within a @media (prefers-color-scheme: dark) block. For example, you’d keep styling as background: var(--bg); color: var(--fg); and only change --bg and --fg in the dark scope. This approach supports easy theming and dynamic switching without needing separate CSS files or inline styles, and it respects inheritance so nested elements adopt the new theme values automatically.