diff --git a/extensions/tags/js/src/forum/addTagLabels.js b/extensions/tags/js/src/forum/addTagLabels.js
index 12e2245ba..a213d1486 100644
--- a/extensions/tags/js/src/forum/addTagLabels.js
+++ b/extensions/tags/js/src/forum/addTagLabels.js
@@ -1,6 +1,7 @@
 import { extend } from 'flarum/common/extend';
 import DiscussionListItem from 'flarum/forum/components/DiscussionListItem';
 import DiscussionHero from 'flarum/forum/components/DiscussionHero';
+import isDark from 'flarum/common/utils/isDark';
 
 import tagsLabel from '../common/helpers/tagsLabel';
 import sortTags from '../common/utils/sortTags';
@@ -23,7 +24,13 @@ export default function () {
       const color = tags[0].color();
       if (color) {
         view.attrs.style = { '--hero-bg': color };
-        view.attrs.className += ' DiscussionHero--colored';
+
+        if (isDark(color)) {
+          view.attrs.className += ' DiscussionHero--dark';
+        }
+        else {
+          view.attrs.className += ' DiscussionHero--light';
+        }
       }
     }
   });
diff --git a/extensions/tags/less/common/TagLabel.less b/extensions/tags/less/common/TagLabel.less
index f4378ca51..db8e1b9cf 100644
--- a/extensions/tags/less/common/TagLabel.less
+++ b/extensions/tags/less/common/TagLabel.less
@@ -42,13 +42,25 @@
     &.colored {
       --tag-color: var(--tag-bg);
       margin-right: 5px;
-      background: @body-bg !important;
+    }
+    &.tag-light {
+      background: @text-on-light !important;
+    }
+    &.tag-dark {
+      background: @text-on-dark !important;
     }
   }
 }
-.DiscussionHero--colored {
-  &, a {
-    color: @body-bg;
+.DiscussionHero {
+  &--light {
+    &, a {
+      color: @text-on-light;
+    }
+  }
+  &--dark {
+    &, a {
+      color: @text-on-dark;
+    }
   }
 }
 .TagsLabel {