browserSettings.overrideContentColorScheme
A BrowserSetting
object whose underlying value is a string.
Firefox enables users to choose a theme for the browser UI. These themes apply either a light or dark theme to webpages. Using the layout.css.prefers-color-scheme.content-override
preference, users can override the theme and choose to render webpages in a light or dark theme or follow the device's theme. This browser setting exposes that preference.
This object takes these values:
- "light": Applies a light theme to webpages.
- "dark": Applies a dark theme to webpages.
- "system": Applies a light or dark theme to webpages based on the device's theme.
- "browser": Applies a light or dark theme to webpages based on the browser's theme.
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | ||||||
---|---|---|---|---|---|---|---|
overrideContentColorScheme |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Examples
This example overrides the setting to use the dark theme for webpages:
js
function logResult(result) {
console.log(`Setting was modified: ${result}`);
}
browser.browserSettings.overrideContentColorScheme
.set({ value: "dark" })
.then(logResult);