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 Benutzerpräferenzen-API ermöglicht es Seitenautoren, benutzerpräferenzbezogene Media Query-Einstellungen programmatisch zu überschreiben.
Konzepte und Nutzung
Unterstützende Benutzeragenten 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 bietet einen programmgesteuerten Zugang zu diesen Präferenzen, sodass Seitenautoren auf Präferenzänderungen lauschen und diese überschreiben können.
Beispiele
Umschaltung des Dunkelmodus
Der folgende Code implementiert eine minimale Umschaltung für den Dunkelmodus.
HTML
Das HTML enthält ein Formular mit drei Optionsfeldern. Diese Optionsfelder setzen das color-scheme-Feld entweder auf system, light oder dark.
<!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 Änderungsereignislistener für alle Elemente mit dem Namen color-scheme. Wenn der Wert system ist, löscht der Handler die Farbschema-Überschreibung. Andernfalls fordert er eine Überschreibung des Farbschemas mit dem Wert des Eingabeelements an.
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
Spezifikationen
| Specification |
|---|
| Media Queries Level 5 # preferences-attribute |