Colored Tag Styles

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:

:point_right: 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.

22 Likes

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

Simple but working perfect. Thank you.

1 Like
  • 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

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

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

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.

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