--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -25,22 +25,32 @@
 %define appmenuWarningBackgroundColorHover #FFE8A2
 %define appmenuWarningBackgroundColorActive #FFE38F
 %define appmenuWarningColor black
 %define appmenuWarningBorderColor hsl(45,100%,77%)
 
 :root:not([uidensity=compact]):not([chromehidden~="toolbar"]) #PanelUI-button {
   margin-inline-start: 3px;
   border-inline-start: 1px solid;
-  border-image: linear-gradient(transparent 4px, rgba(0,0,0,.1) 4px, rgba(0,0,0,.1) calc(100% - 4px), transparent calc(100% - 4px));
+  border-image: linear-gradient(
+    transparent 4px,
+    var(--lwt-toolbar-vertical-separator, rgba(0,0,0,.1)) 4px,
+    var(--lwt-toolbar-vertical-separator, rgba(0,0,0,.1)) calc(100% - 4px),
+    transparent calc(100% - 4px)
+  );
   border-image-slice: 1;
 }
 
 :root:not([uidensity=compact]):not([chromehidden~="toolbar"]) #nav-bar[brighttext] > #PanelUI-button {
-  border-image-source: linear-gradient(transparent 4px, rgba(100%,100%,100%,.2) 4px, rgba(100%,100%,100%,.2) calc(100% - 4px), transparent calc(100% - 4px));
+  border-image-source: linear-gradient(
+    transparent 4px,
+    var(--lwt-toolbar-vertical-separator, rgba(255,255,255,.2)) 4px,
+    var(--lwt-toolbar-vertical-separator, rgba(255,255,255,.2)) calc(100% - 4px),
+    transparent calc(100% - 4px)
+  );
 }
 
 #PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   display: -moz-box;
   height: 10px;
   width: 10px;
   background-size: contain;
   border: none;

--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -148,16 +148,17 @@ class Theme {
           break;
         case "icons_attention":
           this.lwtStyles.icon_attention_color = cssColor;
           break;
         case "tab_text":
         case "toolbar_field":
         case "toolbar_field_text":
         case "toolbar_field_border":
+        case "toolbar_field_separator":
         case "toolbar_top_separator":
         case "toolbar_bottom_separator":
         case "toolbar_vertical_separator":
           this.lwtStyles[color] = cssColor;
           break;
       }
     }
   }

--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -112,16 +112,20 @@
               "toolbar_field_text": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "toolbar_field_border": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
+              "toolbar_field_separator": {
+                "$ref": "ThemeColor",
+                "optional": true
+              },
               "toolbar_top_separator": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "toolbar_bottom_separator": {
                 "$ref": "ThemeColor",
                 "optional": true
               },

--- a/toolkit/components/extensions/test/browser/browser_ext_themes_separators.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_separators.js
@@ -1,29 +1,31 @@
 "use strict";
 
 // This test checks whether applied WebExtension themes that attempt to change
 // the separator colors are applied properly.
 
 add_task(async function test_support_separator_properties() {
   const SEPARATOR_TOP_COLOR = "#ff00ff";
-  const SEPARATOR_VERTICAL_COLOR = "#9400ff";
+  const SEPARATOR_VERTICAL_COLOR = "#f0000f";
+  const SEPARATOR_FIELD_COLOR = "#9400ff";
   const SEPARATOR_BOTTOM_COLOR = "#3366cc";
 
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
         "images": {
           "headerURL": "image1.png",
         },
         "colors": {
           "accentcolor": ACCENT_COLOR,
           "textcolor": TEXT_COLOR,
           "toolbar_top_separator": SEPARATOR_TOP_COLOR,
           "toolbar_vertical_separator": SEPARATOR_VERTICAL_COLOR,
+          "toolbar_field_separator": SEPARATOR_FIELD_COLOR,
           "toolbar_bottom_separator": SEPARATOR_BOTTOM_COLOR,
         },
       },
     },
     files: {
       "image1.png": BACKGROUND,
     },
   });
@@ -36,21 +38,29 @@ add_task(async function test_support_sep
       `rgb(${hexToRGB(SEPARATOR_TOP_COLOR).join(", ")})`
     ),
     "Top separator color properly set"
   );
 
   let mainWin = document.querySelector("#main-window");
   Assert.equal(
     window.getComputedStyle(mainWin).getPropertyValue("--urlbar-separator-color"),
-    SEPARATOR_VERTICAL_COLOR,
+    SEPARATOR_FIELD_COLOR,
+    "Toolbar field separator color properly set"
+  );
+
+  let panelUIButton = document.querySelector("#PanelUI-button");
+  Assert.ok(
+    window.getComputedStyle(panelUIButton)
+          .getPropertyValue("border-image-source")
+          .includes(`rgb(${hexToRGB(SEPARATOR_VERTICAL_COLOR).join(", ")})`),
     "Vertical separator color properly set"
   );
 
   let toolbox = document.querySelector("#navigator-toolbox");
   Assert.equal(
-    window.getComputedStyle(toolbox, ":after").borderBottomColor,
+    window.getComputedStyle(toolbox, "::after").borderBottomColor,
     `rgb(${hexToRGB(SEPARATOR_BOTTOM_COLOR).join(", ")})`,
     "Bottom separator color properly set"
   );
 
   await extension.unload();
 });

--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -18,19 +18,20 @@ const kCSSVarsMap = new Map([
   ["--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"],
+  ["--urlbar-separator-color", "toolbar_field_separator"],
   ["--tabs-border-color", "toolbar_top_separator"],
+  ["--lwt-toolbar-vertical-separator", "toolbar_vertical_separator"],
   ["--toolbox-border-bottom-color", "toolbar_bottom_separator"],
-  ["--urlbar-separator-color", "toolbar_vertical_separator"],
   ["--lwt-toolbarbutton-icon-fill", "icon_color"],
   ["--lwt-toolbarbutton-icon-fill-attention", "icon_attention_color"],
 ]);
 
 this.LightweightThemeConsumer =
  function LightweightThemeConsumer(aDocument) {
   this._doc = aDocument;
   this._win = aDocument.defaultView;