From 885949b614954199920229ea74d3b179a5871e61 Mon Sep 17 00:00:00 2001
From: nekno <nekno@users.noreply.github.com>
Date: Mon, 5 Jan 2026 02:53:27 -0600
Subject: [PATCH 1/2] Add `toolbar` color (appears as the primary text color)
 to match hard-coded list in
 https://github.com/mozilla-firefox/firefox/blob/e61d59b5c9a651fd7bf28043f87c0dc669833496/browser/components/preferences/dialogs/containers.js#L52

---
 src/js/popup.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/popup.js b/src/js/popup.js
index 7b1f4705..dae58fef 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -1889,7 +1889,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
       return Utils.escaped`<input type="radio" value="${containerColor}" name="container-color" id="edit-container-panel-choose-color-${containerColor}" />
      <label for="edit-container-panel-choose-color-${containerColor}" class="usercontext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="${containerColor}">`;
     };
-    const colors = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple"];
+    const colors = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple", "toolbar"];
     const colorRadioFieldset = document.getElementById("edit-container-panel-choose-color");
     colors.forEach((containerColor) => {
       const templateInstance = document.createElement("div");

From 49d1537beed28782ea26d0fedc03bffd472ea462 Mon Sep 17 00:00:00 2001
From: nekno <nekno@users.noreply.github.com>
Date: Mon, 5 Jan 2026 05:21:09 -0600
Subject: [PATCH 2/2] Flex to fit 9 color icons per row. Ensure the `toolbar`
 color matches the current text color in both light and dark modes, as it does
 in the Firefox container settings.

---
 src/css/popup.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/css/popup.css b/src/css/popup.css
index b0532b71..db8ea3c0 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -69,7 +69,7 @@
   --icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */
   --inactive-opacity: 0.3;
   --overflow-size: 1px;
-  --icon-fit: 8;
+  --icon-fit: 9;
 
   background: var(--bgColor);
   margin-block: 0;
@@ -392,6 +392,11 @@ table {
   --identity-icon-color: #af51f5;
 }
 
+[data-identity-color="toolbar"] {
+  --identity-tab-color: currentColor;
+  --identity-icon-color: currentColor;
+}
+
 [data-identity-icon="fingerprint"] {
   --identity-icon: url("/img/usercontext.svg#fingerprint");
 }