From 7d2c6322b381ecc159e880553afb91cff664fb6a Mon Sep 17 00:00:00 2001
From: Oliver Blanthorn <freedom4cows@gmail.com>
Date: Wed, 22 Jul 2026 10:41:00 +0200
Subject: [PATCH] Fix #3897: allow themes to style container borders

---
 src/content.ts             | 10 ++++------
 src/static/css/content.css |  8 +++++++-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/content.ts b/src/content.ts
index 86b658fc..7a8229e4 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -364,7 +364,7 @@ config.getAsync("modeindicator").then(mode => {
         statusIndicator.classList.add("TridactylInvisible")
     }
 
-    // Dynamically sets the border container color.
+    // Expose the container color to themes.
     if (containerIndicator === "true") {
         webext
             .ownTabContainer()
@@ -372,11 +372,9 @@ config.getAsync("modeindicator").then(mode => {
                 webext.browserBg.contextualIdentities.get(ownTab.cookieStoreId),
             )
             .then(container => {
-                statusIndicator.setAttribute(
-                    "style",
-                    `border: ${
-                        container.colorCode
-                    } var(--tridactyl-indicator-border-style, solid) var(--tridactyl-indicator-border-width, 1.5px) !important`,
+                statusIndicator.style.setProperty(
+                    "--tridactyl-container-color",
+                    container.colorCode,
                 )
             })
             .catch(error => {
diff --git a/src/static/css/content.css b/src/static/css/content.css
index fa31cfd3..53cbbf4c 100644
--- a/src/static/css/content.css
+++ b/src/static/css/content.css
@@ -18,7 +18,13 @@
     font-family: var(--tridactyl-status-font-family) !important;
     background: var(--tridactyl-status-bg) !important;
     color: var(--tridactyl-status-fg) !important;
-    border: var(--tridactyl-status-border) !important;
+    --tridactyl-container-border: var(--tridactyl-container-color)
+        var(--tridactyl-indicator-border-style, solid)
+        var(--tridactyl-indicator-border-width, 1.5px);
+    border: var(
+        --tridactyl-container-border,
+        var(--tridactyl-status-border)
+    ) !important;
     border-radius: var(--tridactyl-status-border-radius) !important;
     font-size: var(--tridactyl-status-font-size) !important;
     padding: 0.25ex !important;