diff --git a/browser/modules/ThemeVariableMap.jsm b/browser/modules/ThemeVariableMap.jsm
index 3295d89716b8..05fa663a1054 100644
--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -25,4 +25,7 @@ const ThemeVariableMap = [
   ["--lwt-toolbarbutton-hover-background", "button_background_hover"],
   ["--lwt-toolbarbutton-active-background", "button_background_active"],
   ["--lwt-selected-tab-background-color", "tab_selected"],
+  ["--lwt-toolbar-field-focus", "toolbar_field_focus"],
+  ["--lwt-toolbar-field-focus-color", "toolbar_field_text_focus"],
+  ["--lwt-toolbar-field-focus-border-color", "toolbar_field_border_focus"],
 ];
diff --git a/browser/themes/shared/urlbar-searchbar.inc.css b/browser/themes/shared/urlbar-searchbar.inc.css
index 08823f9b54fe..5d3325f8b975 100644
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -59,12 +59,17 @@
 }
 
 #urlbar:-moz-lwtheme:hover,
-#urlbar:-moz-lwtheme[focused="true"],
-#navigator-toolbox .searchbar-textbox:-moz-lwtheme:hover,
-#navigator-toolbox .searchbar-textbox:-moz-lwtheme[focused="true"] {
+#navigator-toolbox .searchbar-textbox:-moz-lwtheme:hover {
   background-color: var(--url-and-searchbar-background-color, white);
 }
 
+#urlbar:-moz-lwtheme[focused="true"],
+#navigator-toolbox .searchbar-textbox:-moz-lwtheme[focused="true"] {
+  background-color: var(--lwt-toolbar-field-focus, var(--url-and-searchbar-background-color, white));
+  color: var(--lwt-toolbar-field-focus-color, var(--url-and-searchbar-color, black));
+  border-color: var(--lwt-toolbar-field-focus-border-color, var(--lwt-toolbar-field-border-color, @fieldBorderColor@));
+}
+
 :root[uidensity=compact] #urlbar,
 :root[uidensity=compact] .searchbar-textbox {
   min-height: 26px;
diff --git a/toolkit/components/extensions/ext-theme.js b/toolkit/components/extensions/ext-theme.js
index 9ec543888498..5c3c17fd5f25 100644
--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -164,6 +164,9 @@ class Theme {
         case "popup":
         case "popup_text":
         case "popup_border":
+        case "toolbar_field_focus":
+        case "toolbar_field_text_focus":
+        case "toolbar_field_border_focus":
           this.lwtStyles[color] = cssColor;
           break;
       }
diff --git a/toolkit/components/extensions/schemas/theme.json b/toolkit/components/extensions/schemas/theme.json
index 782e7a591a23..a992a36b9da4 100644
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -172,6 +172,18 @@
               "popup_border": {
                 "$ref": "ThemeColor",
                 "optional": true
+              },
+              "toolbar_field_focus": {
+                "$ref": "ThemeColor",
+                "optional": true
+              },
+              "toolbar_field_text_focus": {
+                "$ref": "ThemeColor",
+                "optional": true
+              },
+              "toolbar_field_border_focus": {
+                "$ref": "ThemeColor",
+                "optional": true
               }
             },
             "additionalProperties": { "$ref": "UnrecognizedProperty" }
diff --git a/toolkit/components/extensions/test/browser/browser.ini b/toolkit/components/extensions/test/browser/browser.ini
index 04323c18d532..a4950dcbc853 100644
--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -17,6 +17,7 @@ support-files =
 [browser_ext_themes_tab_line.js]
 [browser_ext_themes_tab_loading.js]
 [browser_ext_themes_tab_text.js]
+[browser_ext_themes_toolbar_fields_focus.js]
 [browser_ext_themes_toolbar_fields.js]
 [browser_ext_themes_toolbars.js]
 [browser_ext_themes_toolbarbutton_icons.js]
diff --git a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields_focus.js b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields_focus.js
new file mode 100644
index 000000000000..f6c76c0d2a96
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields_focus.js
@@ -0,0 +1,55 @@
+"use strict";
+
+add_task(async function test_toolbar_field_hover() {
+  const TOOLBAR_FIELD_BACKGROUND = "#FF00FF";
+  const TOOLBAR_FIELD_COLOR = "#00FF00";
+  const TOOLBAR_FOCUS_BACKGROUND = "#FF0000";
+  const TOOLBAR_FOCUS_TEXT = "#9400FF";
+  const TOOLBAR_FOCUS_BORDER = "#FFFFFF";
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "colors": {
+          "accentcolor": "#FF0000",
+          "textcolor": "#ffffff",
+          "toolbar_field": TOOLBAR_FIELD_BACKGROUND,
+          "toolbar_field_text": TOOLBAR_FIELD_COLOR,
+          "toolbar_field_focus": TOOLBAR_FOCUS_BACKGROUND,
+          "toolbar_field_text_focus": TOOLBAR_FOCUS_TEXT,
+          "toolbar_field_border_focus": TOOLBAR_FOCUS_BORDER,
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+
+  // Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
+  document.documentElement.removeAttribute("remotecontrol");
+  registerCleanupFunction(() => {
+    document.documentElement.setAttribute("remotecontrol", "true");
+  });
+  info("Checking toolbar field's focus color");
+
+  let urlBar = document.getElementById("urlbar");
+  urlBar.setAttribute("focused", "true");
+  Assert.equal(window.getComputedStyle(urlBar).backgroundColor,
+               `rgb(${hexToRGB(TOOLBAR_FOCUS_BACKGROUND).join(", ")})`,
+               "Background Color is changed");
+
+  Assert.equal(window.getComputedStyle(urlBar).color,
+               `rgb(${hexToRGB(TOOLBAR_FOCUS_TEXT).join(", ")})`,
+               "Text Color is changed");
+  testBorderColor(urlBar, TOOLBAR_FOCUS_BORDER);
+
+  urlBar.removeAttribute("focused");
+
+  Assert.equal(window.getComputedStyle(urlBar).backgroundColor,
+               `rgb(${hexToRGB(TOOLBAR_FIELD_BACKGROUND).join(", ")})`,
+               "Background Color is set back to initial");
+  Assert.equal(window.getComputedStyle(urlBar).color,
+               `rgb(${hexToRGB(TOOLBAR_FIELD_COLOR).join(", ")})`,
+               "Text Color is set back to initial");
+  await extension.unload();
+});