User Preferences API
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The User Preferences API allows users to override user preference related media queries.
Concepts and Usage
A user agent defines values for the CSS media queries prefers-color-scheme, prefers-contrast, prefers-reduced-motion, prefers-reduced-transparency, and prefers-reduced-data. The PreferencesManager object provides programmatic access to these preferences, allowing you to listen for preference changes and override them.
Examples
Dark Mode Toggle
The following code implements a minimal dark mode toggle.
HTML
html
<form>
<label>
<input type="radio" name="color-scheme" value="system" /> System default
</label>
<label>
<input type="radio" name="color-scheme" value="light" /> Light
</label>
<label> <input type="radio" name="color-scheme" value="dark" /> Dark </label>
</form>
JavaScript
js
for (const input of document.getElementsByName("color-scheme")) {
input.addEventListener("change", () => {
if (input.value === "system") {
navigator.preferences.colorScheme.clearOverride();
} else {
navigator.preferences.colorScheme.requestOverride(input.value);
}
});
}
Specifications
| Specification |
|---|
| Media Queries Level 5 # preferences-attribute |