User Preferences API

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die User Preferences API ermöglicht es Seitenautoren, auf programmatische Weise benutzerpräferenzbezogene Media Queries-Einstellungen zu überschreiben.

In diesem Artikel

Konzepte und Verwendung

Unterstützende User Agents definieren Werte für die CSS-Media Queries prefers-color-scheme, prefers-contrast, prefers-reduced-motion, prefers-reduced-transparency und prefers-reduced-data. Das PreferenceManager-Objekt ermöglicht programmatischen Zugriff auf diese Präferenzen, wodurch Seitenautoren auf Präferenzänderungen lauschen und diese überschreiben können.

Beispiele

Umschalten des Dunkelmodus

Der folgende Code implementiert ein minimales Umschalten für den Dunkelmodus.

HTML

Das HTML enthält ein Formular mit drei Optionsfeldern. Diese Optionsfelder setzen das color-scheme-Feld auf entweder system, light oder dark.

html
<!doctype html>
<html lang="en-US">
  <head>
    <meta name="color-scheme" content="light dark" />
  </head>
  <body>
    <form>
      <label>
        <input type="radio" name="color-scheme" value="light" />
        Light
      </label>
      <label>
        <input type="radio" name="color-scheme" value="dark" />
        Dark
      </label>
    </form>
  </body>
</html>

JavaScript

Das JavaScript registriert Ereignis-Listener für alle Elemente mit dem Namen color-scheme. Wenn der Wert system ist, entfernt der Handler das Überschreiben des Farbschemas. Andernfalls wird ein Farbschema-Überschreiben mit dem Wert des Eingabeelements angefordert.

js
if (navigator.preferences) {
  const inputs = {
    light: document.querySelector('[name="color-scheme"][value="light"]'),
    dark: document.querySelector('[name="color-scheme"][value="dark"]'),
  };

  inputs[navigator.preferences.colorScheme.value].checked = true;

  inputs.light.addEventListener("change", () => {
    navigator.preferences.colorScheme.requestOverride("light");
  });
  inputs.dark.addEventListener("change", () => {
    navigator.preferences.colorScheme.requestOverride("dark");
  });

  navigator.preferences.colorScheme.addEventListener("change", () => {
    inputs[navigator.preferences.colorScheme.value].checked = true;
  });
} else {
  document.body.append(
    "Your browser doesn’t support the navigator.preferences API",
  );
}

Ergebnis

body {
  font-family: system-ui, sans-serif;
}

label {
  display: block;
  margin: 0.5em 0;
}

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

User Preferences API
Interfaces
1. PreferenceManager
2. PreferenceObject
Eigenschaften
1. Navigator.preferences

User Preferences API

In diesem Artikel

Konzepte und Verwendung

Beispiele

Umschalten des Dunkelmodus

HTML

JavaScript

Ergebnis

Spezifikationen

Browser-Kompatibilität

api.Navigator.preferences

api.PreferenceManager

api.PreferenceObject

Help improve MDN