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