--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -7,21 +7,21 @@
 @namespace svg url("http://www.w3.org/2000/svg");
 
 :root {
   --identity-popup-expander-width: 38px;
   --panelui-subview-transition-duration: 150ms;
 }
 
 :root:-moz-lwtheme {
-  color: var(--lwt-textcolor) !important;
+  color: var(--lwt-text-color) !important;
 }
 
 :root:-moz-lwtheme:not([customization-lwtheme]) {
-  background-color: var(--lwt-accentcolor) !important;
+  background-color: var(--lwt-accent-color) !important;
   background-image: var(--lwt-header-image) !important;
 }
 
 #main-window:not([chromehidden~="toolbar"]) {
 %ifdef XP_MACOSX
   min-width: 335px;
 %else
   min-width: 300px;
@@ -449,17 +449,17 @@ toolbar:not(#TabsToolbar) > #personal-bo
 #main-window[inFullscreen="true"] {
   padding-top: 0; /* override drawintitlebar="true" */
 }
 %endif
 
 #browser-bottombox[lwthemefooter="true"] {
   background-repeat: no-repeat;
   background-position: bottom left;
-  background-color: var(--lwt-accentcolor);
+  background-color: var(--lwt-accent-color);
   background-image: var(--lwt-header-image);
 }
 
 .menuitem-iconic-tooltip {
   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#menuitem-iconic-tooltip");
 }
 
 /* Hide menu elements intended for keyboard access support */

--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -3190,17 +3190,17 @@ menulist.translate-infobar-element > .me
   background-attachment: fixed;
 }
 
 #main-window[tabsintitlebar][customization-lwtheme] > #titlebar:-moz-lwtheme {
   background-repeat: no-repeat;
   background-position: right top;
   background-attachment: fixed;
   background-image: var(--lwt-header-image);
-  background-color: var(--lwt-accentcolor);
+  background-color: var(--lwt-accent-color);
 }
 
 #main-window[customization-lwtheme]:-moz-lwtheme {
   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"),
                     url("chrome://browser/skin/customizableui/background-noise-toolbar.png");
   background-color: rgb(178,178,178);
   background-repeat: repeat;
   background-attachment: fixed;

--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -11,17 +11,17 @@
 #main-window[customization-lwtheme] #tab-view-deck:-moz-lwtheme {
   background-repeat: no-repeat;
   background-position: right top;
   background-attachment: fixed;
   background-color: transparent;
   background-image: -moz-image-rect(var(--lwt-header-image), 0, 100%,
                       var(--toolbox-rect-height), 0),
                     linear-gradient(to bottom,
-                      var(--lwt-accentcolor) calc(var(--toolbox-rect-height-with-unit) - 1px),
+                      var(--lwt-accent-color) calc(var(--toolbox-rect-height-with-unit) - 1px),
                       rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) - 1px),
                       rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) + 1px),
                       rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 1px),
                       rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 2px),
                       transparent calc(var(--toolbox-rect-height-with-unit) + 2px));
 }
 
 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {

--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -99,22 +99,22 @@ 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("--lwt-textcolor");
-    root.style.removeProperty("--lwt-accentcolor");
+    root.style.removeProperty("--lwt-text-color");
+    root.style.removeProperty("--lwt-accent-color");
     if (active) {
       let textcolor = aData.textcolor || "black";
-      root.style.setProperty("--lwt-textcolor", textcolor);
-      root.style.setProperty("--lwt-accentcolor", aData.accentcolor || "white");
+      root.style.setProperty("--lwt-text-color", textcolor);
+      root.style.setProperty("--lwt-accent-color", aData.accentcolor || "white");
       let dummy = this._doc.createElement("dummy");
       dummy.style.color = textcolor;
       let [r, g, b] = _parseRGB(this._doc.defaultView.getComputedStyle(dummy).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");