[css-color-adjust][css-color] Expose user agent native theme colors to CSS #12837
Description
OS and browsers provide extensive settings and UI for customizing color themes—Dark, Light, Morning Breeze… whatever the user chooses. The problem is that web developers don’t have access to those colors or other customized theme values to properly honor them in web apps.
Only a few system colors are exposed, such as Canvas and CanvasText. But if you look at the variety of colors available in browser/OS themes, it’s an order of magnitude more.
To make it worce, even those base colors from the browser theme are provided only for light mode, and ignored in dark or custom mode. What’s the point of these settings if web pages just ignore them? Bugs cromium, FF
While CSS currently defines no theme colors or principles for theme building (beyond light/dark mode and forced-colors for high contrast), OS and browsers still expose extensive customization UIs.
proposal
Provide a convention for exposing such colors and other properties. CSS custom properties would give developers a useful way to access, use, and adapt these values according to application UX design.
For implementors, this would be low effort—just mapping the internal color map to CSS properties. The internal naming conventions will of course remain vendor-specific, but with only a few major browser engines, browser-specific mappings could easily be handled via a top-level polyfill.
Here is a POC fdemonstrating this approach, based on system colors.