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

Question

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

在某个地方的库中是否有可用的公共方法？

这些 stackoverflow 帖子没有给我我正在寻找的东西，这是一种来自导入的方法：

Detect if 'High contrast' is enabled in Android accessibility settings

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

How do I detect if a user has Mac OS high contrast accessibility settings enabled?

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

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

这是我尝试过的，但它没有在 Chrome 中应用

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

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

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

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

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

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

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

相关：

How to detect if high contrast is enabled 用于 TypeScript 检测其他浏览器/平台中的高对比度。

Targeting Firefox