--- a/dom/base/Document.cpp
+++ b/dom/base/Document.cpp
@@ -17470,30 +17470,36 @@ StylePrefersColorScheme Document::Prefer
   }
 
   if (nsPresContext* pc = GetPresContext()) {
     if (pc->IsPrintingOrPrintPreview()) {
       return StylePrefersColorScheme::Light;
     }
   }
 
-  if (!nsContentUtils::IsChromeDoc(this)) {
+  auto preferredColorScheme = [&] {
+    if (nsContentUtils::IsChromeDoc(this)) {
+      return LookAndFeel::SystemColorScheme();
+    }
+
     switch (StaticPrefs::layout_css_prefers_color_scheme_content_override()) {
       case 0:
-        return StylePrefersColorScheme::Dark;
+        return ColorScheme::Dark;
       case 1:
-        return StylePrefersColorScheme::Light;
+        return ColorScheme::Light;
+      case 2:
+        return LookAndFeel::SystemColorScheme();
       default:
-        break;
-    }
-  }
-
-  const bool dark =
-      !!LookAndFeel::GetInt(LookAndFeel::IntID::SystemUsesDarkTheme, 0);
-  return dark ? StylePrefersColorScheme::Dark : StylePrefersColorScheme::Light;
+        return LookAndFeel::ColorSchemeForChrome();
+    }
+  }();
+
+  return preferredColorScheme == ColorScheme::Dark
+             ? StylePrefersColorScheme::Dark
+             : StylePrefersColorScheme::Light;
 }
 
 bool Document::HasRecentlyStartedForegroundLoads() {
   if (!sLoadingForegroundTopLevelContentDocument) {
     return false;
   }
 
   for (size_t i = 0; i < sLoadingForegroundTopLevelContentDocument->Length();

--- a/modules/libpref/init/StaticPrefList.yaml
+++ b/modules/libpref/init/StaticPrefList.yaml
@@ -7112,20 +7112,20 @@
 - name: layout.css.prefers-contrast.enabled
   type: RelaxedAtomicBool
   value: false
   mirror: always
   rust: true
 
 # An override for prefers-color-scheme for content documents.
 #
-# Dark (0), light (1), or system (2).
+# Dark (0), light (1), system (2) or browser (3).
 - name: layout.css.prefers-color-scheme.content-override
   type: RelaxedAtomicInt32
-  value: 2
+  value: 3
   mirror: always
 
 # Dictates whether or not the forced-colors media query is enabled.
 - name: layout.css.forced-colors.enabled
   type: RelaxedAtomicBool
   value: true
   mirror: always
   rust: true

--- a/toolkit/components/extensions/parent/ext-browserSettings.js
+++ b/toolkit/components/extensions/parent/ext-browserSettings.js
@@ -447,37 +447,38 @@ this.browserSettings = class extends Ext
         overrideContentColorScheme: Object.assign(
           getSettingsAPI({
             context,
             name: "overrideContentColorScheme",
             callback() {
               let prefValue = Services.prefs.getIntPref(
                 "layout.css.prefers-color-scheme.content-override"
               );
-              if (prefValue === 0) {
-                return "dark";
-              } else if (prefValue === 1) {
-                return "light";
+              switch (prefValue) {
+                case 0:
+                  return "dark";
+                case 1:
+                  return "light";
+                case 2:
+                  return "system";
+                default:
+                  return "browser";
               }
-              return "system";
             },
           }),
           {
             set: details => {
-              if (!["light", "dark", "system"].includes(details.value)) {
+              let prefValue = ["dark", "light", "system", "browser"].indexOf(
+                details.value
+              );
+              if (prefValue === -1) {
                 throw new ExtensionError(
                   `${details.value} is not a valid value for overrideContentColorScheme.`
                 );
               }
-              let prefValue = 2; // initialize to 2 - system colors
-              if (details.value === "light") {
-                prefValue = 1;
-              } else if (details.value === "dark") {
-                prefValue = 0;
-              }
               return ExtensionPreferencesManager.setSetting(
                 extension.id,
                 "overrideContentColorScheme",
                 prefValue
               );
             },
           }
         ),

--- a/toolkit/components/extensions/test/xpcshell/test_ext_browserSettings.js
+++ b/toolkit/components/extensions/test/xpcshell/test_ext_browserSettings.js
@@ -43,17 +43,17 @@ add_task(async function test_browser_set
     "permissions.default.desktop-notification": PERM_UNKNOWN_ACTION,
     "ui.context_menus.after_mouseup": false,
     "browser.tabs.closeTabByDblclick": false,
     "browser.tabs.loadBookmarksInTabs": false,
     "browser.search.openintab": false,
     "browser.tabs.insertRelatedAfterCurrent": true,
     "browser.tabs.insertAfterCurrent": false,
     "browser.display.document_color_use": 1,
-    "layout.css.prefers-color-scheme.content-override": 2,
+    "layout.css.prefers-color-scheme.content-override": 3,
     "browser.display.use_document_fonts": 1,
     "browser.zoom.full": true,
     "browser.zoom.siteSpecific": true,
   };
 
   async function background() {
     let listeners = new Set([]);
     browser.test.onMessage.addListener(async (msg, apiName, value) => {
@@ -276,16 +276,19 @@ add_task(async function test_browser_set
     "layout.css.prefers-color-scheme.content-override": 0,
   });
   await testSetting("overrideContentColorScheme", "light", {
     "layout.css.prefers-color-scheme.content-override": 1,
   });
   await testSetting("overrideContentColorScheme", "system", {
     "layout.css.prefers-color-scheme.content-override": 2,
   });
+  await testSetting("overrideContentColorScheme", "browser", {
+    "layout.css.prefers-color-scheme.content-override": 3,
+  });
 
   await testSetting("useDocumentFonts", false, {
     "browser.display.use_document_fonts": 0,
   });
   await testSetting("useDocumentFonts", true, {
     "browser.display.use_document_fonts": 1,
   });