如何在React应用程序中使用javascript/typescript使Chrome响应Windows 10高对比度模式
我正在寻找一种简单的方法来检测用户的系统是否处于高对比度模式，或者没有在react应用程序中使用javascript/typescript。
在某个库中有公共方法可用吗？
这些堆栈溢出帖子并没有给出我想要的内容，这是一种从导入中获得的方法：
如何在JavaScript / CSS中检测MAC倒置颜色模式？
编辑：我希望能够区分黑白模式下的黑色和白色模式
编辑：下面是我尝试过的内容，但它没有在Chrome中应用
/* Targets displays using the Windows’ "High Contrast Black" theme: */
@media screen and (-ms-high-contrast: white-on-black) {
.targetClass {
color: white;
background-color: black;
}
}
/* Targets displays using the Windows’ "High Contrast White" theme: */
@media screen and (-ms-high-contrast: black-on-white) {
.targetClass {
color: black;
background-color: white;
}
}回答 1
Stack Overflow用户
发布于 2020-09-17 21:55:35
这是我尝试过的，但在Chrome中没有得到应用
如何使Chrome响应Windows 10高对比度模式：
Chrome用它的高对比度延伸做自己的事情。此扩展不响应Windows 10高对比度模式！
Chrome也不会回应ms-high-contrast媒体查询，这是只为IE和边缘遗产。
但是，您可以通过TypeScript检测Chrome的高对比度扩展是否启用如下所示：
const htmlTag: HTMLElement = document.getElementsByTagName('html')[0];
const isUsingChromeHighContrastExtension: boolean =
htmlTag.getAttribute('hc') !== null;现在您有了一个布尔值，isUsingChromeHighContrastExtension，您可以使用它来根据是否启用扩展来调整样式。
请注意，Chrome的高对比度扩展没有黑色的白色或白色的黑色设置，但它确实有许多其他选项，一些视力受损的人从中受益。
相关信息：
如何检测是否启用高对比度用于在其他浏览器/平台中检测高对比度的TypeScript。
https://stackoverflow.com/questions/63943983
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号