The prefers-color-scheme feature detects a light or dark preference. Forced colors lets the browser apply a user-selected palette that may replace author colors.
Make this comfortable
CSS dark mode and forced colors: honor distinct user settings
How the rule works
A case card starts with an explicit light foreground and surface, then supplies a dark pair when the user prefers dark mode. In forced colors, rely on system colors for the border and let the browser adjust text and backgrounds. Do not opt out of forced adjustment merely to preserve branding. Decorative shadows may disappear, so borders and words must retain the card's structure. A color-scheme declaration can also affect built-in controls; review native inputs as part of the page, not just your custom cards.
.case-card { color: #183047; background: #f4f7fa; border: 1px solid #9fb0c0; }
@media (prefers-color-scheme: dark) {
.case-card { color: #edf3f8; background: #172a3b; border-color: #60788d; }
}
@media (forced-colors: active) {
.case-card { border-color: CanvasText; box-shadow: none; }
}Cost and verification
Media queries themselves add little cost. Maintaining paired colors, icons, controls, and illustrations across modes is the real work. Test actual system settings, not only a browser screenshot with one class toggled. Do not treat forced colors as a dark-mode variant: the user's chosen palette may be light, dark, or another combination. The status text must remain explicit if color distinctions vanish.
Common Mistakes
- Do not replace text with a color-coded dot.
- Do not force brand colors over a user-selected forced palette by default.
- Do not review only the card while native inputs use a different scheme.
Connected lessons
- CSS Interaction and Accessibility
- CSS color and contrast: pair text with its real surface
- CSS focus-visible: keep keyboard location unmistakable
- HTML color-scheme metadata: declare supported UI schemes separately from browser chrome
Further form and type decisions
css
interaction
web