--- a/browser/base/content/browser-addons.js
+++ b/browser/base/content/browser-addons.js
@@ -793,17 +793,17 @@ var LightWeightThemeWebInstaller = {
 /*
  * Listen for Lightweight Theme styling changes and update the browser's theme accordingly.
  */
 var LightweightThemeListener = {
   init() {
     Services.obs.addObserver(this, "lightweight-theme-styling-update", false);
     Services.obs.addObserver(this, "lightweight-theme-optimized", false);
     if (document.documentElement.hasAttribute("lwtheme"))
-      this.updateStyleSheet(document.documentElement.style.backgroundImage);
+      this.updateStyleSheet(document.documentElement.style.getPropertyValue("--lwt-header-image"));
   },
 
   uninit() {
     Services.obs.removeObserver(this, "lightweight-theme-styling-update");
     Services.obs.removeObserver(this, "lightweight-theme-optimized");
   },
 
   /**

--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -78,16 +78,22 @@ toolbar:-moz-lwtheme {
 
   --toolbarbutton-active-background: rgba(70%,70%,70%,.25);
   --toolbarbutton-active-bordercolor: rgba(0,0,0,.3);
   --toolbarbutton-active-boxshadow: 0 0 2px rgba(0,0,0,.6) inset;
 
   --toolbarbutton-checkedhover-backgroundcolor: rgba(85%,85%,85%,.25);
 }
 
+:root {
+  color: var(--lwt-textcolor);
+  background-color: var(--lwt-accentcolor);
+  background-image: var(--lwt-header-image);
+}
+
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */
 }
 
 #main-menubar {
   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
 }
 
@@ -333,16 +339,21 @@ toolbar:-moz-lwtheme {
 #personal-bookmarks {
   min-height: 24px;
 }
 
 #print-preview-toolbar:not(:-moz-lwtheme) {
   -moz-appearance: toolbox;
 }
 
+#browser-bottombox:-moz-lwtheme {
+  background-image: var(--lwt-footer-image);
+  background-color: var(--lwt-accentcolor);
+}
+
 #browser-bottombox:not(:-moz-lwtheme) {
   background-color: -moz-dialog;
 }
 
 /* ::::: titlebar ::::: */
 
 #main-window[sizemode="normal"] > #titlebar {
   -moz-appearance: -moz-window-titlebar;

--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -99,37 +99,36 @@ LightweightThemeConsumer.prototype = {
 
     let root = this._doc.documentElement;
     let active = !!aData.headerURL;
     let stateChanging = (active != this._active);
 
     // We need to clear these either way: either because the theme is being removed,
     // or because we are applying a new theme and the data might be bogus CSS,
     // so if we don't reset first, it'll keep the old value.
-    root.style.removeProperty("color");
-    root.style.removeProperty("background-color");
+    root.style.removeProperty("--lwt-textcolor");
+    root.style.removeProperty("--lwt-accentcolor");
     if (active) {
-      root.style.color = aData.textcolor || "black";
-      root.style.backgroundColor = aData.accentcolor || "white";
+      root.style.setProperty("--lwt-textcolor", aData.textcolor || "black");
+      root.style.setProperty("--lwt-accentcolor", aData.accentcolor || "white");
       let [r, g, b] = _parseRGB(this._doc.defaultView.getComputedStyle(root).color);
       let luminance = 0.2125 * r + 0.7154 * g + 0.0721 * b;
       root.setAttribute("lwthemetextcolor", luminance <= 110 ? "dark" : "bright");
       root.setAttribute("lwtheme", "true");
     } else {
       root.removeAttribute("lwthemetextcolor");
       root.removeAttribute("lwtheme");
     }
 
     this._active = active;
 
-    _setImage(root, active, aData.headerURL);
+    _setImage(root, active, aData.headerURL, "--lwt-header-image");
     if (this._footerId) {
       let footer = this._doc.getElementById(this._footerId);
-      footer.style.backgroundColor = active ? aData.accentcolor || "white" : "";
-      _setImage(footer, active, aData.footerURL);
+      _setImage(footer, active, aData.footerURL, "--lwt-footer-image");
       if (active && aData.footerURL)
         footer.setAttribute("lwthemefooter", "true");
       else
         footer.removeAttribute("lwthemefooter");
     }
 
     // On OS X, we extend the lightweight theme into the titlebar, which means setting
     // the chromemargin attribute. Some XUL applications already draw in the titlebar,
@@ -152,18 +151,21 @@ LightweightThemeConsumer.prototype = {
         }
       }
     }
     Services.obs.notifyObservers(this._win, "lightweight-theme-window-updated",
                                  JSON.stringify(aData));
   }
 }
 
-function _setImage(aElement, aActive, aURL) {
-  aElement.style.backgroundImage =
-    (aActive && aURL) ? 'url("' + aURL.replace(/"/g, '\\"') + '")' : "";
+function _setImage(aElement, aActive, aURL, aVariableName) {
+  if (aActive && aURL) {
+    aElement.style.setProperty(aVariableName, `url("${aURL.replace(/"/g, '\\"')}")`);
+  } else {
+    aElement.style.removeProperty(aVariableName);
+  }
 }
 
 function _parseRGB(aColorString) {
   var rgb = aColorString.match(/^rgba?\((\d+), (\d+), (\d+)/);
   rgb.shift();
   return rgb.map(x => parseInt(x));
 }