How to detect MAC OS inverted color mode in JavaScript / CSS?

Question

I want to do some extra contrast work if the OS is in high contrast mode. With Windows we can use the media queries like

@media screen and (-ms-high-contrast: active) {}

which would detect this via media query and we can extend the functionality from there. If we don't have a media query like this in Mac OS, perhaps there's a JS alternative? Or does it invert the colors at such a low level that we can't really look into it at all?

Answer 1

you can do this in safari technical preview right now:

@media (inverted-colors) {
    img.cancel-inversion {
        filter: invert(1);
    }
}

you should use this on:

• photographs
• .icns-ish icon images (things like app icons are okay)

you should not use this on:

• images of text (I mean, you shouldn't use images of text, but if you must for some reason... don't use this technique on those images!)
• decorative images
• monochrome glyphs (things that look like font icons)

while we're on this subject reduce motion media query is in safari technical preview right now as well.