diff --git a/res/css/views/rooms/_RoomBreadcrumbs2.scss b/res/css/views/rooms/_RoomBreadcrumbs2.scss
index 6e5a5fbb16..d3b8ec1914 100644
--- a/res/css/views/rooms/_RoomBreadcrumbs2.scss
+++ b/res/css/views/rooms/_RoomBreadcrumbs2.scss
@@ -57,7 +57,7 @@ limitations under the License.
     margin-top: -42px;
 
     &.mx_Tooltip {
-        background-color: $tagpanel-bg-color;
+        background-color: $inverted-bg-color;
         color: $accent-fg-color;
         border: 0;
 
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 1546e7a400..bc133c2756 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -36,6 +36,7 @@ $info-plinth-fg-color: #888;
 $preview-bar-bg-color: $header-panel-bg-color;
 
 $tagpanel-bg-color: $base-color;
+$inverted-bg-color: $tagpanel-bg-color;
 
 // used by AddressSelector
 $selected-color: $room-highlight-color;
diff --git a/res/themes/element/css/_element.scss b/res/themes/element/css/_element.scss
index bb848d899f..57995ff999 100644
--- a/res/themes/element/css/_element.scss
+++ b/res/themes/element/css/_element.scss
@@ -316,7 +316,8 @@ $reaction-row-button-selected-border-color: $accent-color;
 
 $kbd-border-color: $reaction-row-button-border-color;
 
-$tooltip-timeline-bg-color: $tagpanel-bg-color;
+$inverted-bg-color: #27303a;
+$tooltip-timeline-bg-color: $inverted-bg-color;
 $tooltip-timeline-fg-color: #ffffff;
 
 $interactive-tooltip-bg-color: #27303a;
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index c4b4262642..b694202869 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -66,6 +66,7 @@ $secondary-accent-color: #f2f5f8;
 $tertiary-accent-color: #d3efe1;
 
 $tagpanel-bg-color: #27303a;
+$inverted-bg-color: $tagpanel-bg-color;
 
 // used by RoomDirectory permissions
 $plinth-bg-color: $secondary-accent-color;