Is it possible to see if iOS 11’s Smart Invert is enabled using either JavaScript or CSS? I’d like my websites to work with it, seeing I (and probably a lot of other people) use it a lot.
Asked
Active
Viewed 343 times
2
-
https://stackoverflow.com/questions/44470786/how-to-tell-smart-invert-in-ios-11-not-to-invert-my-app-colors-and-detect-if-it – mplungjan Nov 10 '17 at 17:10
-
That’s not CSS. – Jip Nov 10 '17 at 17:12
-
It’s the only question related. Had it been answered with a css or JavaScript answer I would had closed yours. I posted it for information – mplungjan Nov 10 '17 at 17:29
1 Answers
0
Based on the answer posted in the comments above and using Modernizr.js you could do this fairly easily with a custom test.
Modernizr.addTest('colorinvert', accessibilityIgnoresInvertColors in window && !accessibilityIgnoresInvertColors);
This will add a class to the page's <html> element called colorinvert if the colors are being inverted, and nocolorinvert if not.
This should make it easy to apply custom css or javascript logic when the colors are inverted.
Vanilla js could analyze this property and do the same thing as modernizr as well -- something like this run during initial page load should work:
var classname = "colorinvert";
if(typeof(window["accessibilityIgnoresInvertColors"]) === "undefined" || accessibilityIgnoresInvertColors) classname = "no" + classname;
document.getElementsByTagName("html")[0].classList.add(classname);
Will P.
- 8,437
- 3
- 36
- 45
-
-
-
Good point, edited. I'm too used to supporting IE8, but most people don't need that :) – Will P. Nov 10 '17 at 17:43
-
-