Colored Tag Styles

Customization Theme component

AI-generated summary

manuel introduced the “Colored Tag Styles” theme component, which allows administrators to assign custom colors (background, text, border, and bullet) to existing tags. The component uses CSS values and Discourse color variables, supporting dark mode adaptation. Key settings include style names, target tags, and color choices. The component requires the site’s base tag style to be set to “box,” as noted by Fma965.

Early feedback highlighted limitations: sunjam requested targeting Tag Groups instead of individual tags and color-blind-friendly palettes. manuel confirmed that group targeting requires a core Discourse feature request, while custom color options would need code forks unless future UI improvements allow dynamic dropdowns. Users 45thj5ej and ogulcan1787 reported issues with SCSS compilation when modifying styles and compatibility conflicts with the “remove dashes from tag names” plugin, respectively.

Several users, including Av8tion and Ahmed26, reported that styles were not applying, leaving tags grey. manuel migrated the component to a new GitLab repository and later identified the root cause as case-sensitivity: the component failed to parse upper-case tags correctly. After updating the code to handle lowercase data-tag-name values, Ahmed26 and Av8tion confirmed the fix worked.

manuel subsequently released a major update enabling users to create unlimited custom styles directly via the theme settings UI, replacing the previous eight fixed options. This update automatically migrates existing configurations but requires Discourse 3.3.0+. A remaining limitation, raised by UMB, is that styles do not persist when viewing translated tags, as the data-tag-name attribute changes with the locale. manuel acknowledged this issue and is investigating potential solutions.

1
:information_source: Summary Assign tags to custom color styles
:hammer_and_wrench: Repository Manuel Kostka / Discourse / Helpers / Tag Styles · GitLab
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Create custom color styles and assign them to existing tags.

The component ships with three example styles so you can see how it works (a yellow highlight, a subtle accent, and an outline). They don’t do anything until you assign tags to them, and you can edit or delete them freely.

Screenshot From 2026-07-29 20-13-43
Screenshot From 2026-07-29 20-13-43807×219 18.2 KB

Theme settings

Each style has:

  • Name — just a label, so you can tell your styles apart
  • Tags — pick the tags this style applies to
  • Background color
  • Text color
  • Border color
  • Bullet color — colors the square when your site uses the bullet tag style

Screenshot From 2026-07-29 20-14-07
Screenshot From 2026-07-29 20-14-071047×1026 41.2 KB

Colors accept any CSS value, e.g. #ff7a00 or limegreen. You can also use Discourse color variables like var(--tertiary) — those automatically adapt to your color palette, dark mode included.

Site settings

:warning: Discourse has three base tag styles, simple, bullet and box. You can pick your base style in site settings:

image
image1201×381 12.4 KB

25 Likes
Discourse Coloring Tag
Tag Style Tool
Add a data-tag-group attribute for tags
Feedback on my forum, BlackIron
2

Nice work, this only works if the tag style is set to BOX though

removing .box makes it work on simple, not sure if it breaks box or not though
image

3

Simple but working perfect. Thank you.

1 Like
4
  • Would it be possible to assign colors to Tag Groups rather than individual tags?
  • Would it be possible to customize available colors to follow color blind hex values?
3 Likes
5

Thanks for the suggestions!

On targeting tag groups: Right now tags only have a data attribute for their name and that’s what the component targets. I had posted a feature request for adding another attribute for their group a while ago, you can give it a like :wink:

On customizing colors: As of now you’d need to fork the component and hardcode other color values. If dropdown menus (to pick tags) would become available on the popup editors I guess I’ll re-factor the component with more customizable settings.

2 Likes
6

EDIT: Nevermind, I simply forgot to actually save the other “settings.yml” file, lol. Brain is fried.

Hi. When changing the code from the color yellow to purple, I get this error. All I did was simply swap any mention of “yellow” to “purple” and adjust the hex color value. Why?
hhhh

  $tags-purple: str-to-list("#{$purple}", "|");
  @each $tag in $tags-purple {
    .discourse-tag[data-tag-name="#{$tag}"] {
      color: #CCCCCC !important;
      background-color: #ae00d1;
      &:hover {
        color: #CCCCCC;
        background-color: #ae00d1;
      }
    }
  }

The first line here is line 8 that the error mentions.

1 Like
7

Hi thank you for component.
Not working with GitHub - discourse/discourse-remove-dashes-from-tag-names: Remove dashes (-) from tag names in the Topic List and on the Topic page. · GitHub

Maybe you can bring an update? :pray:

It works when there is a single line tag, but it does not work when there is a double line.

Like single line tag : support
Double line : support-me

1 Like
8

Can we select color for all tag in Group Tag?
And not effect with my discourse!

me too

9

Hi, this component isn’t working with my instance. I’ve added in the tags to be certain colors in the admin menu for the component but they are all still grey. I haven’t tweaked the component’s code at all and am just trying to use it as provided. Pictures below for example:

bf94cf238bd4fbc545f9e348d0d49e8f1
bf94cf238bd4fbc545f9e348d0d49e8f11625×1664 145 KB

e57e3c861aa3091a43d2c53871a489961
e57e3c861aa3091a43d2c53871a4899611646×1034 103 KB

1 Like
10

I’m afraid I can’t reproduce. It works for me on 3.5.

In any case, I published an updated component to a new repo on GitLab. No functional changes, just some house-keeping and re-factoring. The old GitHub repo should still work, but if you install afresh, please use the new repo, it’s also listed on the Summary topic.

11

Yeah that new version of the component you linked doesn’t work for me either… the boxes are all still grey

1 Like
12

Yes there’s no functional change. But the component works on a default new instance. Did you inspect elements?

13

I’m not a coding expert unfortunately… if a component doesn’t work plug-and-play I’m fairly sunk. I’ll just have to look for other options to get something like this to work.

15

made all settings correctly, labels still grayed out

1 Like
16

Thanks for the reports, I guess I found the issue.. tags are case-sensitive now, but data-tag-name needs to be parsed a lower-case value. So it didn’t apply styles to upper-case tags.

Let me know if it works after updating the component @Ahmed26 @Av8tion

2 Likes
17

works very well now thanks

2 Likes
18

ea20cb6c121efe0f5db0a1eeb0d2ec601
ea20cb6c121efe0f5db0a1eeb0d2ec6011699×1404 128 KB

Great work and excellent find! Thank you for the hard work in getting these to work for us!

4 Likes
19

I just updated and refactored this component. Previously it came with eight fixed color styles. Now you can create as many styles as you like, right in the theme settings UI :artist_palette: :tada:

Read the updated component description

Updating an existing installation

Your existing configuration should be migrated automatically: tags you had assigned to the old color styles become equivalent styles with the same colors as before.

One thing to check before updating: if any of the old settings still reference tags that no longer exist on your site, remove those first. Stale tag names will cause the update to fail.

This new version requires Discourse 3.3.0 or later. Older sites will stay on the previous version of the component.

4 Likes
20

This doesn’t seem to work for translated tags. The tags in their original English are displayed correctly, but once I switch to a different language site the styling is gone. Any solutions for that?

2 Likes
21

Yes, the component references the data-tag-name attribute, and it changes with the locale. There is no data-tag-id attribute available, the id is only available on the href attribute, but using that one could have other limitations.

I’ll have a look how this could best be supported.

4 Likes