The inverted-colors
CSS media feature can be used to test whether the user agent or underlying OS is inverting colors.
The inverted-colors
CSS media feature can be used to test whether the user agent or underlying OS is inverting colors.
The inverted-colors
feature is specified as a keyword value chosen from the list below.
none
Colors are displayed normally.
inverted
All pixels within the displayed area have been inverted.
<p> If you're using inverted colors, this text should be blue on white (the inverse of yellow on black). If you're not, it should be red on light gray. </p> <p> If the text is gray, your browser doesn't support the `inverted-colors` media feature. </p>
p { color: gray; } @media (inverted-colors: inverted) { p { background: black; color: yellow; } } @media (inverted-colors: none) { p { background: #eee; color: red; } }
Specification |
---|
Media Queries Level 5 # inverted |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
inverted-colors |
No | No | No | No | No | 9.1 | No | No | No | No | 10 | No |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors