diff --git a/extensions/tags/js/src/forum/addTagFilter.tsx b/extensions/tags/js/src/forum/addTagFilter.tsx
index c7a23e7c1..8723083a2 100644
--- a/extensions/tags/js/src/forum/addTagFilter.tsx
+++ b/extensions/tags/js/src/forum/addTagFilter.tsx
@@ -5,6 +5,7 @@ import IndexPage from 'flarum/forum/components/IndexPage';
 import DiscussionListState from 'flarum/forum/states/DiscussionListState';
 import GlobalSearchState from 'flarum/forum/states/GlobalSearchState';
 import classList from 'flarum/common/utils/classList';
+import isDark from 'flarum/common/utils/isDark';
 
 import TagHero from './components/TagHero';
 import Tag from '../common/models/Tag';
@@ -92,6 +93,13 @@ export default function () {
       if (color) {
         newDiscussion.attrs.className = classList([newDiscussion.attrs.className, 'Button--tagColored']);
         newDiscussion.attrs.style = { '--color': color };
+
+        if (isDark(color)) {
+        newDiscussion.attrs.className = classList([newDiscussion.attrs.className, 'Button--tagDark']);
+        }
+        else {
+        newDiscussion.attrs.className = classList([newDiscussion.attrs.className, 'Button--tagLight']);
+        }
       }
 
       newDiscussion.attrs.disabled = !canStartDiscussion;
diff --git a/extensions/tags/less/forum.less b/extensions/tags/less/forum.less
index f1a34a8e2..30850fe4f 100644
--- a/extensions/tags/less/forum.less
+++ b/extensions/tags/less/forum.less
@@ -6,10 +6,17 @@
 @import "forum/TagTiles";
 @import "forum/ToggleButton";
 
-.Button--tagColored {
+.Button {
   --button-primary-bg: var(--color);
   --button-primary-bg-hover: var(--color);
   --button-primary-bg-active: var(--color);
+
+  &--tagLight {
+    color: @text-on-light;
+  }
+  &--tagDark {
+    color: @text-on-dark;
+  }
 }
 .DiscussionHero {
   .item-title {