Web/CSS/@media/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	Status	Comment
Media Queries Level 5The definition of 'inverted-colors' in that specification.	Editor's Draft

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`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

inverted-colors by Mozilla Contributors is licensed under CC-BY-SA 2.5.