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.
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.
<!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.
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
| Spezifikation |
|---|
| Media Queries Level 5 # preferences-attribute |