--- a/browser/components/preferences/colors.js
+++ b/browser/components/preferences/colors.js
@@ -1,15 +1,63 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* import-globals-from ../../../toolkit/content/preferencesBindings.js */
+/* import-globals-from in-content/extensionControlled.js */
+
+const DOC_COLORS_KEY = "overrideDocumentColors";
+const PREF_DOC_COLOR_USE = "browser.display.document_color_use";
 
 Preferences.addAll([
   { id: "browser.display.document_color_use", type: "int" },
   { id: "browser.anchor_color", type: "string" },
   { id: "browser.visited_color", type: "string" },
   { id: "browser.underline_anchors", type: "bool" },
   { id: "browser.display.foreground_color", type: "string" },
   { id: "browser.display.background_color", type: "string" },
   { id: "browser.display.use_system_colors", type: "bool" },
 ]);
+
+window.addEventListener("DOMContentLoaded", () => {
+
+  document
+    .getElementById("disableColorsExtension")
+    .addEventListener(
+      "command", makeDisableControllingExtension(
+        PREF_SETTING_TYPE, DOC_COLORS_KEY).bind(gColorsDialog));
+
+  let deferredUpdate = new DeferredTask(() => {
+    gColorsDialog.updateColorsDialogUI();
+  }, 10);
+
+  let docColorsObserver = {
+    observe: (subject, topic, data) => {
+      deferredUpdate.arm();
+    },
+  };
+
+  Services.prefs.addObserver(PREF_DOC_COLOR_USE, docColorsObserver);
+  window.addEventListener("unload", () => {
+    Services.prefs.removeObserver(PREF_DOC_COLOR_USE, docColorsObserver);
+  });
+
+  gColorsDialog.updateColorsDialogUI();
+}, { once: true, capture: true });
+
+
+var gColorsDialog = {
+
+  /**
+   * Update the colors dialog UI to deal with extension control.
+   */
+  async updateColorsDialogUI() {
+    let isLocked = Services.prefs.prefIsLocked(PREF_DOC_COLOR_USE);
+
+    if (isLocked) {
+      // An extension can't control this setting if any pref is locked.
+      hideControllingExtension(DOC_COLORS_KEY);
+    } else {
+      handleControllingExtension(PREF_SETTING_TYPE, DOC_COLORS_KEY);
+    }
+  }
+};

--- a/browser/components/preferences/colors.xul
+++ b/browser/components/preferences/colors.xul
@@ -8,16 +8,18 @@
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/preferences/preferences.css"?>
 
 <!DOCTYPE dialog [
   <!ENTITY % preferencesDTD SYSTEM "chrome://global/locale/preferences.dtd">
   %preferencesDTD;
   <!ENTITY % colorsDTD SYSTEM "chrome://browser/locale/preferences/colors.dtd">
   %colorsDTD;
+  <!ENTITY % mainDTD SYSTEM "chrome://browser/locale/preferences/main.dtd">
+  %mainDTD;
 ]>
 
 <dialog id="ColorsDialog" type="child" class="prefwindow"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         title="&colorsDialog.title;"
         buttons="accept,cancel,help"
         persist="lastSelected screenX screenY"
         role="dialog"
@@ -26,16 +28,17 @@
 #ifdef XP_MACOSX
         style="width: &window.macWidth; !important;">
 #else
         style="width: &window.width; !important;">
 #endif
 
   <script type="application/javascript" src="chrome://browser/content/utilityOverlay.js"/>
   <script type="application/javascript" src="chrome://global/content/preferencesBindings.js"/>
+  <script type="application/javascript" src="chrome://browser/content/preferences/in-content/extensionControlled.js"/>
 
   <keyset>
     <key key="&windowClose.key;" modifiers="accel" oncommand="Preferences.close(event)"/>
   </keyset>
 
   <vbox id="ColorsDialogPane" class="prefpane">
 
     <script type="application/javascript" src="chrome://browser/content/preferences/colors.js"/>
@@ -97,11 +100,21 @@
                       value="2" id="documentColorAlways"/>
             <menuitem label="&overrideDefaultPageColors.auto.label;"
                       value="0" id="documentColorAutomatic"/>
             <menuitem label="&overrideDefaultPageColors.never.label;"
                       value="1" id="documentColorNever"/>
           </menupopup>
         </menulist>
       </hbox>
+
+      <stringbundle id="bundlePreferences" src="chrome://browser/locale/preferences/preferences.properties"/>
+      <stringbundle id="bundleBrand" src="chrome://branding/locale/brand.properties"/>
+
+      <hbox id="colorsExtensionContent" align="left" hidden="true">
+        <description control="disableColorsExtension" flex="1" />
+        <button id="disableColorsExtension"
+                class="extension-controlled-button accessory-button"
+                label="&disableExtension.label;" />
+      </hbox>
     </vbox>
   </vbox>
 </dialog>

--- a/browser/components/preferences/in-content/extensionControlled.js
+++ b/browser/components/preferences/in-content/extensionControlled.js
@@ -41,16 +41,17 @@ const API_PROXY_PREFS = [
 ];
 
 let extensionControlledContentIds = {
   "privacy.containers": "browserContainersExtensionContent",
   "homepage_override": "browserHomePageExtensionContent",
   "newTabURL": "browserNewTabExtensionContent",
   "defaultSearch": "browserDefaultSearchExtensionContent",
   "proxyConfig": "proxyExtensionContent",
+  "overrideDocumentColors": "colorsExtensionContent",
   get "websites.trackingProtectionMode"() {
     return {
       button: "trackingProtectionExtensionContentButton",
       section:
         trackingprotectionUiEnabled ?
           "trackingProtectionExtensionContentLabel" :
           "trackingProtectionPBMExtensionContentLabel",
     };

--- a/browser/locales/en-US/chrome/browser/preferences/preferences.properties
+++ b/browser/locales/en-US/chrome/browser/preferences/preferences.properties
@@ -225,16 +225,21 @@ extensionControlled.privacy.containers =
 extensionControlled.websites.trackingProtectionMode = An extension, %S, is controlling tracking protection.
 
 # LOCALIZATION NOTE (extensionControlled.proxyConfig):
 # This string is shown to notify the user that their proxy configuration preferences are being controlled by an extension.
 # %1$S is the icon and name of the extension.
 # %2$S is the brandShortName from brand.properties (for example "Nightly")
 extensionControlled.proxyConfig = An extension, %1$S, is controlling how %2$S connects to the internet.
 
+# LOCALIZATION NOTE (extensionControlled.overrideDocumentColors):
+# This string is shown to notify the user that the setting to override the document colors is being controlled by an extension.
+# %S is the icon and name of the extension.
+extensionControlled.overrideDocumentColors = An extension, %S, is also controlling this setting.
+
 # LOCALIZATION NOTE (extensionControlled.enable):
 # %1$S is replaced with the icon for the add-ons menu.
 # %2$S is replaced with the icon for the toolbar menu.
 # This string is shown to notify the user how to enable an extension that they disabled.
 extensionControlled.enable = To enable the extension go to %1$S Add-ons in the %2$S menu.
 
 # LOCALIZATION NOTE (connectionDesc.label):
 # %S is the brandShortName from brand.properties (for example "Nightly")