So bringen Sie Chrome dazu, mit Javascript / Typoskript in einer React-App auf den kontrastreichen Windows 10-Modus zu reagieren

Question

Ich suche nach einer einfachen Möglichkeit, um festzustellen, ob sich das System des Benutzers im kontrastreichen Modus befindet oder ob Javascript / Typoskript in einer Reaktions-App nicht verwendet wird.

Gibt es irgendwo in einer Bibliothek eine öffentliche Methode?

Diese Stackoverflow-Posts geben mir nicht das, wonach ich suche. Dies ist eine Methode aus einem Import:

Ermitteln Sie, ob in den Einstellungen für die Barrierefreiheit für Android die Option "Hoher Kontrast" aktiviert ist

Wie erkennt man den invertierten MAC OS-Farbmodus in JavaScript / CSS?

Wie erkenne ich, ob für einen Benutzer die kontrastreichen Einstellungen für Mac OS mit hohem Kontrast aktiviert sind?

BEARBEITEN : Ich beabsichtige, zwischen Schwarz auf Weiß und Weiß auf Schwarz unterscheiden zu können

BEARBEITEN : Folgendes habe ich versucht, aber es wird in Chrome nicht angewendet

/* 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

Folgendes habe ich versucht, aber es wird in Chrome nicht angewendet

So reagieren Chrome auf den kontrastreichen Windows 10-Modus:

Chrome macht sein eigenes Ding mit seiner High Contrast Extension . Diese Erweiterung reagiert nicht auf den kontrastreichen Windows 10-Modus!

Chrome antwortet auch nicht auf ms-high-contrastMedienanfragen, die nur für IE und Edge Legacy gelten.

Sie können jedoch feststellen, ob die kontrastreiche Erweiterung von Chrome über TypeScript wie folgt aktiviert ist:

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

Jetzt haben Sie einen Booleschen Wert, isUsingChromeHighContrastExtensionmit dem Sie Ihr Styling anpassen können, je nachdem, ob die Erweiterung aktiviert ist.

Beachten Sie, dass die kontrastreiche Erweiterung von Chrome keine Schwarz-Weiß- oder Weiß-Schwarz-Einstellung hat, aber eine Reihe anderer Optionen, von denen einige sehbehinderte Menschen profitieren.

Verbunden:

So erkennen Sie, ob ein hoher Kontrast für die TypeScript-Erkennung eines hohen Kontrasts auch in anderen Browsern / Plattformen aktiviert ist .

Targeting von Firefox