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
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 | Status | Comment |
---|---|---|
Media Queries Level 5 The definition of 'inverted-colors' in that specification. | Editor's Draft |
Desktop | ||||||
---|---|---|---|---|---|---|
inverted-colors media feature |
No | No | No | No | No | 9.1 |
Mobile | ||||||
---|---|---|---|---|---|---|
inverted-colors media feature |
No | No | No | No | 10 | No |
© 2005–2020 Mozilla and individual 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