Colored Tag Styles

[manuel (Manuel Kostka)]

	Summary	Assign tags to custom color styles
	Repository	Manuel Kostka / Discourse / Helpers / Tag Styles · GitLab
	Install Guide	How to install a theme or theme component
	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.

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

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

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

[Fma965]

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

[tmn (Tran Nhat)]

Simple but working perfect. Thank you.

[sunjam (james.network)]

• 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?

[manuel (Manuel Kostka)]

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

Add a data-tag-group attribute for tags

Right now tags have their name stored in the data attribute data-tag-name: [Screenshot from 2022-07-29 15-50-16] Could there also be an attribute data-tag-group? It would make it easy to style and distinguish tags from different groups on the ux. A use-case where I find this especially helpful is on setups that only use tags. Then you likely have some top-level tags and it makes navigation more intuitive when tags from that group stand out with a distinct look. I saw there was a request years…

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.

[45thj5ej]

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?

  $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.

[ogulcan1787]

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?

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

[thaidb]

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

@ogulcan1787

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.

me too

[Av8tion]

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:

[manuel (Manuel Kostka)]

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.

[Av8tion]

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

[manuel (Manuel Kostka)]

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

[Av8tion]

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.

[Ahmed26]

made all settings correctly, labels still grayed out

[manuel (Manuel Kostka)]

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

[Ahmed26]

works very well now thanks

[Av8tion]

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

[manuel (Manuel Kostka)]

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

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.