The current spec for obtaining the page's theme color allows for only one color value to be "returned" for use by the user agent. This means that there's no declarative way for a developer to adjust the theme color of their site depending on the state of the user agent or display device. This results in situations where the site only looks good when the user agent state or display device initially matches what's expected by the page. As an example, if the page assumes that light mode is the initial/default state and the user has already enabled system-wide dark mode, then the theme color could be painfully bright and would contrast/conflict with the rest of the system.

It would be great for developers (and also possibly web crawlers) to be able to have <meta name="theme-color"> support a media attribute similar to link. For example,

<meta name="theme-color" media="(prefers-color-scheme: light)" content="red">
<meta name="theme-color" media="(prefers-color-scheme: dark)"  content="darkred">

As far as compatibility, the algorithm for obtain the page's theme color is a "first pass" system which will return as soon as a valid <meta name="theme-color"> is found in tree order. Since this feature is entirely opt-in, it's possible for a developer to preserve the existing behavior of something like

<meta name="theme-color" content="red">

by making sure that it is the first <meta name="theme-color"> in tree order and have any alternates come after

<meta name="theme-color" media="(prefers-color-scheme: light)" content="red">
<meta name="theme-color" media="(prefers-color-scheme: dark)"  content="darkred">
<meta name="theme-color" media="(prefers-contrast: less)"      content="...">
<!-- etc -->