web_extensions / latest / api / browsersettings / overridecontentcolorscheme.html /

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

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
overrideContentColorScheme
No
No
95
?
No
No
?
?
95
?
No
?

Examples

This example overrides the setting to use the dark theme for webpages:

function logResult(result) {
  console.log(`Setting was modified: ${result}`);
}

browser.browserSettings.overrideContentColorScheme.set({value: "dark"}).
  then(logResult);

© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/overrideContentColorScheme

Name Web Extensions
Version
Badge
Last Updated 2022-04-28T06:26:19Z