inverted-colors
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 |
---|
Media Queries Level 5 # inverted |
Browser compatibility
BCD tables only load in the browser