diff --git a/modules/templates/util_render.go b/modules/templates/util_render.go
index 1056c42643..2e957e6375 100644
--- a/modules/templates/util_render.go
+++ b/modules/templates/util_render.go
@@ -152,7 +152,7 @@ func (ut *RenderUtils) renderLabelWithTag(label *issues_model.Label, tagName, ta
 
 	if labelScope == "" {
 		// Regular label
-		return htmlutil.HTMLFormat(`<%s %s class="ui label %s" style="color: %s !important; background-color: %s !important;" data-tooltip-content title="%s"><span class="gt-ellipsis">%s</span></%s>`,
+		return htmlutil.HTMLFormat(`<%s %s class="ui label %s" style="--custom-color-label-text: %s; --custom-color-label-bg: %s;" data-tooltip-content title="%s"><span class="gt-ellipsis">%s</span></%s>`,
 			tagName, tagAttrs, extraCSSClasses, textColor, label.Color, descriptionText, ut.RenderEmoji(label.Name), tagName)
 	}
 
@@ -189,8 +189,8 @@ func (ut *RenderUtils) renderLabelWithTag(label *issues_model.Label, tagName, ta
 	if label.ExclusiveOrder > 0 {
 		// <scope> | <label> | <order>
 		return htmlutil.HTMLFormat(`<%s %s class="ui label %s scope-parent" data-tooltip-content title="%s">`+
-			`<div class="ui label scope-left" style="color: %s !important; background-color: %s !important">%s</div>`+
-			`<div class="ui label scope-middle" style="color: %s !important; background-color: %s !important">%s</div>`+
+			`<div class="ui label scope-left" style="--custom-color-label-text: %s; --custom-color-label-bg: %s;">%s</div>`+
+			`<div class="ui label scope-middle" style="--custom-color-label-text: %s; --custom-color-label-bg: %s;">%s</div>`+
 			`<div class="ui label scope-right">%d</div>`+
 			`</%s>`,
 			tagName, tagAttrs,
@@ -203,8 +203,8 @@ func (ut *RenderUtils) renderLabelWithTag(label *issues_model.Label, tagName, ta
 
 	// <scope> | <label>
 	return htmlutil.HTMLFormat(`<%s %s class="ui label %s scope-parent" data-tooltip-content title="%s">`+
-		`<div class="ui label scope-left" style="color: %s !important; background-color: %s !important">%s</div>`+
-		`<div class="ui label scope-right" style="color: %s !important; background-color: %s !important">%s</div>`+
+		`<div class="ui label scope-left" style="--custom-color-label-text: %s; --custom-color-label-bg: %s;">%s</div>`+
+		`<div class="ui label scope-right" style="--custom-color-label-text: %s; --custom-color-label-bg: %s;">%s</div>`+
 		`</%s>`,
 		tagName, tagAttrs,
 		extraCSSClasses, descriptionText,
diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index cf850e4c5a..6941e6cb69 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -8,8 +8,8 @@
   gap: var(--gap-inline);
   min-width: 0;
   max-width: 100%;
-  background: var(--color-label-bg);
-  color: var(--color-label-text);
+  background-color: var(--custom-color-label-bg, var(--color-label-bg));
+  color: var(--custom-color-label-text, var(--color-label-text));
   padding: 2px 6px;
   font-size: var(--font-size-label);
   font-weight: var(--font-weight-medium);
@@ -20,8 +20,19 @@
   text-overflow: ellipsis;
 }
 
-a.ui.label {
-  cursor: pointer;
+.ui.label.scope-parent .ui.label.scope-left,
+.ui.label.scope-parent .ui.label.scope-middle,
+.ui.label.scope-parent .ui.label.scope-right {
+  background-color: var(--custom-color-label-bg, var(--color-label-bg));
+  color: var(--custom-color-label-text, var(--color-label-text));
+}
+
+.ui.menu .item > .label:not(.scope-parent) {
+  background-color: var(
+    --custom-color-label-bg,
+    var(--color-label-bg)
+  ) !important;
+  color: var(--custom-color-label-text, var(--color-label-text)) !important;
 }
 
 .ui.label > a {
@@ -288,7 +299,9 @@ a.ui.ui.ui.basic.grey.label:hover {
 If the labels-list itself needs some layouts, use extra classes or "tw" helpers. */
 .labels-list {
   display: contents;
-  font-size: var(--font-size-label); /* it must match the label font size, otherwise the height mismatches */
+  font-size: var(
+    --font-size-label
+  ); /* it must match the label font size, otherwise the height mismatches */
 }
 
 .labels-list a {