diff --git a/extensions/tags/js/src/forum/components/TagHero.js b/extensions/tags/js/src/forum/components/TagHero.js
index 1b24884f3..838e314e5 100644
--- a/extensions/tags/js/src/forum/components/TagHero.js
+++ b/extensions/tags/js/src/forum/components/TagHero.js
@@ -1,4 +1,5 @@
 import Component from 'flarum/common/Component';
+import isDark from 'flarum/common/utils/isDark';
 import tagIcon from '../../common/helpers/tagIcon';
 
 export default class TagHero extends Component {
@@ -7,7 +8,7 @@ export default class TagHero extends Component {
     const color = tag.color();
 
     return (
-      <header className={'Hero TagHero' + (color ? ' TagHero--colored' : '')} style={color ? { '--hero-bg': color } : ''}>
+      <header className={'Hero TagHero' + (color ? ' TagHero--colored' : '') + (isDark(color) ? ' TagHero--dark' : ' TagHero--light')} style={color ? { '--hero-bg': color } : ''}>
         <div className="container">
           <div className="containerNarrow">
             <h2 className="Hero-title">
diff --git a/extensions/tags/less/forum/TagHero.less b/extensions/tags/less/forum/TagHero.less
index 8d9a3f593..4b704d0d2 100644
--- a/extensions/tags/less/forum/TagHero.less
+++ b/extensions/tags/less/forum/TagHero.less
@@ -1,5 +1,8 @@
 .TagHero {
-  &--colored {
-    --hero-color: #fff;
+  &--light {
+    --hero-color: @text-on-light;
+  }
+  &--dark {
+    --hero-color: @text-on-dark;
   }
 }