The five states must be checked per theme, not inverted from light

What it is

Default, hover, pressed, disabled, and loading tuned on a light theme cannot be produced for dark or other themes by “flipping lightness.” Direct mapping makes hover indistinguishable from rest, disabled louder than rest on a dark fill, and a loading spinner melt into the background. The five states have to be checked per theme because each theme’s baseline lightness is different, and state steps are relative.

Why it happens

States are recognized by relative contrast. Hover on a light primary is often “a bit darker.” Mapped into dark, “a bit darker” hits an already-dark fill and the step falls into noise; a mechanical invert to “a bit lighter” may outshine rest and promote hover into a second primary. Disabled usually drops saturation and contrast; on dark, low-contrast type is already near threshold, and one more drop makes it vanish—or a grey patch on near-black becomes a high-contrast slab that looks more clickable than rest. A loading mark that used a dark stroke on light disappears on dark. A theme is not a filter. It is another baseline, and the five steps have to be recomputed on it.

Studying it

Drop the same component into light, dark, and high-contrast themes. Force a choice: are these two frames the same state, which frame is disabled. Look in a real window against system appearance, not on an artboard strip.

Independent variables: theme, automatic invert versus hand-tuned, state pair. Dependent variables: discrimination accuracy, disabled read as clickable, hover read as another primary.

A designer’s calibrated display underestimates. Spot-check laptop auto-brightness, outdoor light, and OLED dark.

Where it stops holding

A brand-colored primary that is always the same blue may need only a stroke tweak on dark, but disabled and loading still want their own look. User themes, night filters, and browser-forced dark are not in the product’s theme file; checked values still break under an extra mapping. Forced dark that inverts image buttons ruins icon semantics as well as state steps, and the two failures arrive together.

Applying it

• Produce five-state samples per theme; do not generate dark states from light and ship unseen.
• Check three pairs first on the real background of the target theme: rest–hover, rest–disabled, rest–loading.
• Do not reuse the dark-theme disabled recipe on high contrast; that theme usually needs a stronger border, not a weaker one.
• Verify by switching system light, dark, and high contrast on the same button: “can I click, is it loading?” A wrong answer in any theme means mapping replaced checking.

Related

• Within the group: E1.11.2 A disabled icon button must fade both glyph and type · E1.11.3 Contrast of states must be rechecked on every container background · E1.11.4 Hover and disabled must not appear together
• Adjacent: E1.02 Button states · F5 Color · J2.15 Dark and high-contrast compatibility
• Search terms: dark mode · theme mapping · button states