Colored Tag Styles

[nolo (Manuel)]

A simple theme component that let’s you assign tags to a set of pre-defined color styles.

You can select tags from a dropdown-list in the theme settings:

And they’ll show with the assigned style:

I chose a simple interface over flexibility with the styles. So if you want to change the pre-defined colors, you’d have to fork the component and change the style declarations in it’s CSS file.

	Repository	GitHub - nolosb/discourse-tag-styles
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

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

[nolo (Manuel)]

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.