patterncssModerate
color-scheme for correct dark mode form controls and scrollbars
Viewed 0 times
color-schemedark modenative controlsscrollbarform elementssystem ui
Problem
When implementing dark mode with custom CSS variables, browser-native UI elements (scrollbars, form inputs, checkboxes, date pickers) remain light, creating an inconsistent visual experience.
Solution
Declare color-scheme to tell the browser the element's preferred color scheme:
/* Tell the browser the page supports light and dark */
:root {
color-scheme: light dark;
}
/* Force dark mode for native elements in dark context */
.dark-panel {
color-scheme: dark;
background: #1a1a2e;
color: white;
}
/* Force light mode (e.g., an input in a dark card that should stay light) */
.light-input {
color-scheme: light;
}
/* In HTML meta tag for initial paint */
/* <meta name="color-scheme" content="light dark"> */Why
color-scheme is an inherited CSS property that informs the browser of the color scheme for the rendering of form elements, scrollbars, and other native UI components. Without it, native controls always render in light mode.
Gotchas
- color-scheme: light dark means the browser chooses based on the user's system preference — use prefers-color-scheme to make explicit per-context choices.
- Setting color-scheme also affects the Canvas API's default colors and the default link color.
- The meta tag version is important for avoiding a flash of incorrect theme on initial page load.
- color-scheme does not change the value of CSS system colors like ButtonFace — those update automatically when the scheme is set.
Context
Dark mode implementations where native browser UI elements look inconsistent.
Revisions (0)
No revisions yet.