--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -18,16 +18,20 @@
 
 :root:-moz-lwtheme {
   background-color: var(--lwt-accent-color) !important;
   background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
   background-position: var(--lwt-background-alignment) !important;
   background-repeat: var(--lwt-background-tiling) !important;
 }
 
+:root:-moz-lwtheme:-moz-window-inactive {
+  background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
+}
+
 #main-window:not([chromehidden~="toolbar"]) {
 %ifdef XP_MACOSX
   min-width: 335px;
 %else
   min-width: 300px;
 %endif
 }
 

--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -124,16 +124,19 @@ class Theme {
         cssColor = "rgb" + (val.length > 3 ? "a" : "") + "(" + val.join(",") + ")";
       }
 
       switch (color) {
         case "accentcolor":
         case "frame":
           this.lwtStyles.accentcolor = cssColor;
           break;
+        case "frame_inactive":
+          this.lwtStyles.accentcolorInactive = cssColor;
+          break;
         case "textcolor":
         case "background_tab_text":
           this.lwtStyles.textcolor = cssColor;
           break;
         case "toolbar":
           this.lwtStyles.toolbarColor = cssColor;
           break;
         case "toolbar_text":
@@ -269,16 +272,17 @@ class Theme {
       }
     }
   }
 
   static unload(windowId) {
     let lwtStyles = {
       headerURL: "",
       accentcolor: "",
+      accentcolorInactive: "",
       additionalBackgrounds: "",
       backgroundsAlignment: "",
       backgroundsTiling: "",
       textcolor: "",
       icons: {},
     };
 
     if (windowId) {

--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -72,16 +72,20 @@
               "accentcolor": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "frame": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
+              "frame_inactive": {
+                "$ref": "ThemeColor",
+                "optional": true
+              },
               "textcolor": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "background_tab_text": {
                 "$ref": "ThemeColor",
                 "optional": true
               },

--- a/toolkit/components/extensions/test/browser/browser_ext_themes_chromeparity.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_chromeparity.js
@@ -41,8 +41,90 @@ add_task(async function test_support_the
                "Expected correct background color");
   Assert.equal(style.color, "rgba(" + TAB_TEXT_COLOR.join(", ") + ")",
                "Expected correct text color");
 
   await extension.unload();
 
   Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
 });
+
+add_task(async function test_support_theme_frame_inactive() {
+  const FRAME_COLOR = [71, 105, 91];
+  const FRAME_COLOR_INACTIVE = [255, 0, 0];
+  const TAB_TEXT_COLOR = [207, 221, 192, .9];
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "theme_frame": "image1.png",
+        },
+        "colors": {
+          "frame": FRAME_COLOR,
+          "frame_inactive": FRAME_COLOR_INACTIVE,
+          "background_tab_text": TAB_TEXT_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+
+  let docEl = window.document.documentElement;
+  let style = window.getComputedStyle(docEl);
+
+  Assert.equal(style.backgroundColor, "rgb(" + FRAME_COLOR.join(", ") + ")",
+               "Window background is set to the colors.frame property");
+
+  // Now we'll open a new window to see if the inactive browser accent color changed
+  let window2 = await BrowserTestUtils.openNewBrowserWindow();
+
+  Assert.equal(style.backgroundColor, "rgb(" + FRAME_COLOR_INACTIVE.join(", ") + ")",
+               `Inactive window background color should be ${FRAME_COLOR_INACTIVE}`);
+
+  await BrowserTestUtils.closeWindow(window2);
+  await extension.unload();
+
+  Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
+});
+
+add_task(async function test_lack_of_theme_frame_inactive() {
+  const FRAME_COLOR = [71, 105, 91];
+  const TAB_TEXT_COLOR = [207, 221, 192, .9];
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "theme_frame": "image1.png",
+        },
+        "colors": {
+          "frame": FRAME_COLOR,
+          "background_tab_text": TAB_TEXT_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+
+  let docEl = window.document.documentElement;
+  let style = window.getComputedStyle(docEl);
+
+  Assert.equal(style.backgroundColor, "rgb(" + FRAME_COLOR.join(", ") + ")",
+               "Window background is set to the colors.frame property");
+
+  // Now we'll open a new window to make sure the inactive browser accent color stayed the same
+  let window2 = await BrowserTestUtils.openNewBrowserWindow();
+
+  Assert.equal(style.backgroundColor, "rgb(" + FRAME_COLOR.join(", ") + ")",
+               "Inactive window background should not change if colors.frame_inactive isn't set");
+
+  await BrowserTestUtils.closeWindow(window2);
+  await extension.unload();
+
+  Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
+});

--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -9,16 +9,17 @@ const {utils: Cu, interfaces: Ci, classe
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/AppConstants.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "LightweightThemeImageOptimizer",
   "resource://gre/modules/addons/LightweightThemeImageOptimizer.jsm");
 
 const kCSSVarsMap = new Map([
+  ["--lwt-accent-color-inactive", "accentcolorInactive"],
   ["--lwt-background-alignment", "backgroundsAlignment"],
   ["--lwt-background-tiling", "backgroundsTiling"],
   ["--lwt-tab-text", "tab_text"],
   ["--toolbar-bgcolor", "toolbarColor"],
   ["--toolbar-color", "toolbar_text"],
   ["--url-and-searchbar-background-color", "toolbar_field"],
   ["--url-and-searchbar-color", "toolbar_field_text"],
   ["--lwt-toolbar-field-border-color", "toolbar_field_border"],