如何在 JavaScript/CSS 中检测 MAC OS 反转颜色模式? [英] How to detect MAC OS inverted color mode in JavaScript / CSS?

问题描述

如果操作系统处于高对比度模式，我想做一些额外的对比度工作.在 Windows 中，我们可以使用像

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) {}

这将通过媒体查询检测到这一点，我们可以从那里扩展功能.如果我们在 Mac OS 中没有这样的媒体查询，也许有一个 JS 替代方案?或者它是否在如此低的水平上反转颜色，以至于我们根本无法真正观察它?

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?

推荐答案

您现在可以在 safari 技术预览中执行此操作:

you can do this in safari technical preview right now:

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

你应该使用它:

• 照片
• .icns-ish 图标图片(应用图标之类的东西都可以)

你不应该使用它:

• 文本图像(我的意思是，你不应该使用文本图像，但如果你出于某种原因必须......不要在这些图像上使用这种技术！)
• 装饰图片
• 单色字形(看起来像字体图标的东西)

• 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)

在我们讨论这个主题时，减少运动媒体查询现在也在 safari 技术预览中.

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

这篇关于如何在 JavaScript/CSS 中检测 MAC OS 反转颜色模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！