Как заставить Chrome реагировать на режим высокой контрастности Windows 10 с помощью javascript/typescript в приложении React

Я ищу простой способ определить, находится ли система пользователя в режиме высокой контрастности или не использует javascript/typescript в приложении для реагирования.

Есть ли где-нибудь в библиотеке общедоступный метод?

Эти сообщения stackoverflow не дают мне того, что я ищу, а именно метода из импорта:

Определить, включена ли "Высокая контрастность" в настройках специальных возможностей Android

Как определить инвертированный цветовой режим MAC OS в JavaScript / CSS?

Как сделать Я определяю, включены ли у пользователя настройки высококонтрастного доступа в Mac OS?

РЕДАКТИРОВАТЬ: я намереваюсь различать черный на белом и белый на черном в режиме

EDIT: вот что я пробовал, но это не применяется в 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;
    }
 }

person springathing    schedule 17.09.2020    source источник
comment
comment
stackoverflow.com/ вопросы/38492220/   -  person Ozone    schedule 18.09.2020
comment
Является ли Chrome единственным браузером, к которому относится ваш вопрос?   -  person Super Jade    schedule 18.09.2020
comment
К вашему сведению: медиа-запросы -ms-high-contrast работают только для IE и Edge Legacy.   -  person Super Jade    schedule 18.09.2020
comment
Я вижу, теперь я понимаю. Мне тоже нужно что-то для хрома тогда   -  person springathing    schedule 18.09.2020
comment
Спасибо за это разъяснение, пожалуйста, не стесняйтесь писать все свои комментарии в качестве ответа   -  person springathing    schedule 18.09.2020


Ответы (1)


Вот что я пробовал, но это не применяется в Chrome


Как заставить Chrome реагировать на режим высокой контрастности Windows 10:

Chrome делает свое дело с помощью расширения высокой контрастности. Это расширение не работает в режиме высокой контрастности Windows 10!

Chrome также не будет отвечать на мультимедийные запросы ms-high-contrast, предназначенные только для IE и Edge Legacy.

Однако вы можете определить, включено ли расширение высокой контрастности Chrome с помощью TypeScript, следующим образом:

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

Теперь у вас есть логическое значение isUsingChromeHighContrastExtension, которое вы можете использовать для настройки стиля в зависимости от того, включено ли расширение.

Обратите внимание, что расширение Chrome High Contrast Extension не имеет настройки «черный на белом» или «белый на черном», но у него есть множество других параметров, которые могут быть полезны для некоторых людей с нарушениями зрения.


Связанный:

Как определить, включена ли высокая контрастность для обнаружения высокой контрастности TypeScript в других браузерах/платформах.

Нацеливание на Firefox

person Super Jade    schedule 17.09.2020