The inverted-colors
CSS media feature can be used to test whether the user agent or underlying OS is inverting colors.
Syntax
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.
Examples
HTML
<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>
CSS
p { color: gray; } @media (inverted-colors: inverted) { p { background: black; color: yellow; } } @media (inverted-colors: none) { p { background: #eee; color: red; } }
Result
Specifications
Specification | Status | Comment |
---|---|---|
Media Queries Level 5 The definition of 'inverted-colors' in that specification. |
Editor's Draft |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
inverted-colors media feature | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari Full support 9.1 | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS Full support 10 | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support