如何在 React 应用程序中使用 javascript/typescript 使 Chrome 响应 Windows 10 高对比度模式

Question

我正在寻找一种简单的方法来检测用户的系统是否处于高对比度模式或未在 React 应用程序中使用 javascript/typescript。

某处的库中是否有可用的 public 方法？

这些 Whosebug 帖子没有给我我要找的东西，这是一个导入的方法：

编辑：我打算能够区分白底黑字模式和黑底白字模式

编辑：这是我尝试过的，但它没有在 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;
    }
 }

Answer 1

Here is what I've tried but it doesn't get applied in Chrome

如何让Chrome响应Windows10高对比度模式：

Chrome 用它的 High Contrast Extension 做自己的事情。此扩展程序不响应 Windows 10 高对比度模式！

Chrome 也不会响应仅适用于 IE 和 Edge Legacy 的 ms-high-contrast 媒体查询。

但是，您可以像这样通过 TypeScript 检测是否启用了 Chrome 的高对比度扩展：

const htmlTag: HTMLElement = document.getElementsByTagName('html')[0];
const isUsingChromeHighContrastExtension: boolean =
    htmlTag.getAttribute('hc') !== null;

现在您有一个布尔值 isUsingChromeHighContrastExtension，您可以使用它根据扩展程序是否启用来调整您的样式。

请注意，Chrome 的高对比度扩展没有白底黑字或黑底白字设置，但它确实有一些视障人士可以从中受益的各种其他选项。

相关：

用于 TypeScript 检测其他 browsers/platforms 中的高对比度。