HTML & CSS Interview Question #109

How can CSS custom properties be used for theming?

Responsive Design, Modern CSS, Variables, Transitions & Animations Senior Advanced

Quick Interview Answer

A theme can redefine a set of custom properties at a higher-level element. Components consume the variables instead of hard-coding theme-specific colors throughout their rules.

Detailed Explanation

A theme can redefine a set of custom properties at a higher-level element. Components consume the variables instead of hard-coding theme-specific colors throughout their rules.

Themes can be selected with a class, data attribute, user preference, or application state. A robust theme should also preserve contrast, focus visibility, and other accessibility requirements rather than changing colors only for appearance.

Code Example

:root {
    --background: white;
    --text: #111827;
}

[data-theme="dark"] {
    --background: #111827;
    --text: #f9fafb;
}

body {
    background: var(--background);
    color: var(--text);
}