Make system color keywords compute to themselves

Allow system colors to be inherited as keywords rather than RGB values.


Prior to this change, a descendant element would inherit RGB values rather than keywords for system colors. This would cause undesired behavior when, for example, a parent element and child element have different values for the color-scheme property. The expected behavior is that the keyword would inherit, so that each element would map the keyword to an RGB value according to its respective color-scheme.



Working draft or equivalent

Status in Chromium


In developer trial (Behind a flag) (tracking bug) in:

  • Chrome for desktop release 86

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.



Developers will see a behavioral change in situations like the following: <div style="color-scheme: light; color: CanvasText; background-color: red;"> <div style="color-scheme: dark; background-color: blue;"></div> </div> Suppose the CanvasText color in the “light” color scheme maps to rgb(0, 0, 0), and in the “dark” color scheme maps to rgb(192, 192, 192). Prior to this change, both the parent and child element would use rgb(0,0,0) for the text color. After the change, the parent element will use rgb(0, 0, 0) and the child element will use rgb(192, 192, 192). If developers were expecting "light" values to inherit into a "dark" element, they would need to change this code.

Search tags

css, system, color, colors,

Last updated on 2020-10-16