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, die einstellungsbezogenen Media Query-Einstellungen der Benutzer programmgesteuert zu überschreiben.
Konzepte und Verwendung
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 programmgesteuerten Zugriff auf diese Präferenzen, sodass Seitenautoren Präferenzänderungen überwachen und überschreiben können.
Beispiele
Umschaltung für den 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 Event-Listener für Änderungen bei allen Elementen, die color-scheme heißen. Ist der Wert system, entfernt der Handler die Farbschemasüberschreibung. Andernfalls fordert er eine Farbschemasüberschreibung 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 |