--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -26,16 +26,17 @@
   --chrome-nav-buttons-background: hsla(240, 5%, 5%, .1);
   --chrome-nav-buttons-hover-background: hsla(240, 5%, 5%, .15);
   --chrome-nav-bar-controls-border-color: hsla(240, 5%, 5%, .3);
   --chrome-selection-color: #fff;
   --chrome-selection-background-color: #5675B9;
 
   /* Url and search bars */
   --url-and-searchbar-background-color: rgb(71, 71, 73);
+  --url-and-searchbar-color: var(--chrome-color);
   --urlbar-separator-color: #5F6670;
 }
 
 :root:-moz-lwtheme-darktext {
   --url-and-searchbar-background-color: #fff;
 
   --chrome-background-color: #E3E4E6;
   --chrome-color: #18191a;
@@ -89,23 +90,16 @@ toolbar[brighttext] .toolbarbutton-1 {
   text-shadow: none;
 }
 
 #TabsToolbar {
   text-shadow: none !important;
 }
 
 /* URL bar and search bar*/
-#urlbar,
-#navigator-toolbox .searchbar-textbox {
-  background-color: var(--url-and-searchbar-background-color) !important;
-  background-image: none !important;
-  color: inherit !important;
-}
-
 #urlbar:not([focused="true"]),
 .searchbar-textbox:not([focused="true"]) {
   border-color: var(--chrome-nav-bar-controls-border-color);
 }
 
 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels:-moz-lwtheme-brighttext {
   color: #30e60b;
 }

--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -18,26 +18,26 @@
 
 #urlbar:hover,
 .searchbar-textbox:hover {
   border-color: hsla(240,5%,5%,.35);
   box-shadow: 0 1px 6px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.1);
 }
 
 #urlbar:-moz-lwtheme,
-.searchbar-textbox:-moz-lwtheme {
-  background-color: hsla(0,0%,100%,.8);
-  color: black;
+#navigator-toolbox .searchbar-textbox:-moz-lwtheme {
+  background-color: var(--url-and-searchbar-background-color, hsla(0,0%,100%,.8));
+  color: var(--url-and-searchbar-color, black);
 }
 
 #urlbar:-moz-lwtheme:hover,
 #urlbar:-moz-lwtheme[focused="true"],
-.searchbar-textbox:-moz-lwtheme:hover,
-.searchbar-textbox:-moz-lwtheme[focused="true"] {
-  background-color: white;
+#navigator-toolbox .searchbar-textbox:-moz-lwtheme:hover,
+#navigator-toolbox .searchbar-textbox:-moz-lwtheme[focused="true"] {
+  background-color: var(--url-and-searchbar-background-color, white);
 }
 
 :root[uidensity=compact] #urlbar,
 :root[uidensity=compact] .searchbar-textbox {
   min-height: 26px;
   margin-top: 3px;
   margin-bottom: 3px;
 }

--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -103,16 +103,22 @@ class Theme {
           break;
         case "textcolor":
         case "tab_text":
           this.lwtStyles.textcolor = cssColor;
           break;
         case "toolbar":
           this.lwtStyles.toolbarColor = cssColor;
           break;
+        case "toolbar_field":
+          this.lwtStyles.toolbar_field = cssColor;
+          break;
+        case "toolbar_field_text":
+          this.lwtStyles.toolbar_field_text = cssColor;
+          break;
       }
     }
   }
 
   /**
    * Helper method for loading images found in the extension's manifest.
    *
    * @param {Object} images Dictionary mapping image properties to values.

--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -63,16 +63,24 @@
               },
               "textcolor": {
                 "type": "string",
                 "optional": true
               },
               "toolbar": {
                 "type": "string",
                 "optional": true
+              },
+              "toolbar_field": {
+                "type": "string",
+                "optional": true
+              },
+              "toolbar_field_text": {
+                "type": "string",
+                "optional": true
               }
             },
             "additionalProperties": { "$ref": "UnrecognizedProperty" }
           },
           "icons": {
             "type": "object",
             "optional": true,
             "properties": {

--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -3,9 +3,10 @@ support-files =
   head.js
 
 [browser_ext_management_themes.js]
 [browser_ext_themes_chromeparity.js]
 [browser_ext_themes_dynamic_updates.js]
 [browser_ext_themes_lwtsupport.js]
 [browser_ext_themes_multiple_backgrounds.js]
 [browser_ext_themes_persistence.js]
+[browser_ext_themes_toolbar_fields.js]
 [browser_ext_themes_toolbars.js]

new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
@@ -0,0 +1,64 @@
+"use strict";
+
+// This test checks whether applied WebExtension themes that attempt to change
+// the background color and the color of the navbar text fields are applied properly.
+
+add_task(async function setup() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["extensions.webextensions.themes.enabled", true]],
+  });
+});
+
+add_task(async function test_support_toolbar_field_properties() {
+  const TOOLBAR_FIELD_BACKGROUND = "#ff00ff";
+  const TOOLBAR_FIELD_COLOR = "#00ff00";
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "headerURL": "image1.png",
+        },
+        "colors": {
+          "accentcolor": ACCENT_COLOR,
+          "textcolor": TEXT_COLOR,
+          "toolbar_field": TOOLBAR_FIELD_BACKGROUND,
+          "toolbar_field_text": TOOLBAR_FIELD_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+
+  // Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
+  document.documentElement.removeAttribute("remotecontrol");
+
+  let toolbox = document.querySelector("#navigator-toolbox");
+  let searchbar = document.querySelector("#searchbar");
+  let fields = [
+    toolbox.querySelector("#urlbar"),
+    document.getAnonymousElementByAttribute(searchbar, "anonid", "searchbar-textbox"),
+  ].filter(field => {
+    let bounds = field.getBoundingClientRect();
+    return bounds.width > 0 && bounds.height > 0;
+  });
+
+  Assert.equal(fields.length, 2, "Should be testing two elements");
+
+  info(`Checking toolbar background colors and colors for ${fields.length} toolbar fields.`);
+  for (let field of fields) {
+    info(`Testing ${field.id || field.className}`);
+    Assert.equal(window.getComputedStyle(field).backgroundColor,
+      "rgb(" + hexToRGB(TOOLBAR_FIELD_BACKGROUND).join(", ") + ")", "Field background should be set.");
+    Assert.equal(window.getComputedStyle(field).color,
+      "rgb(" + hexToRGB(TOOLBAR_FIELD_COLOR).join(", ") + ")", "Field color should be set.");
+  }
+
+  // Restore the `remotecontrol` attribute at the end of the test.
+  document.documentElement.setAttribute("remotecontrol", "true");
+
+  await extension.unload();
+});

--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -11,17 +11,19 @@ Cu.import("resource://gre/modules/Servic
 Cu.import("resource://gre/modules/AppConstants.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "LightweightThemeImageOptimizer",
   "resource://gre/modules/addons/LightweightThemeImageOptimizer.jsm");
 
 const kCSSVarsMap = new Map([
   ["--lwt-background-alignment", "backgroundsAlignment"],
   ["--lwt-background-tiling", "backgroundsTiling"],
-  ["--toolbar-bgcolor", "toolbarColor"]
+  ["--toolbar-bgcolor", "toolbarColor"],
+  ["--url-and-searchbar-background-color", "toolbar_field"],
+  ["--url-and-searchbar-color", "toolbar_field_text"]
 ]);
 
 this.LightweightThemeConsumer =
  function LightweightThemeConsumer(aDocument) {
   this._doc = aDocument;
   this._win = aDocument.defaultView;
 
   let screen = this._win.screen;