Colorful Categories

:discourse2: Summary Colorful Categories uses each category’s colors in more places when you’re on a category topic list or within a topic; the header, reply/create buttons, topic timeline, and the composer.
:eyeglasses: Preview Preview it on theme-creator.discourse.org
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-colorful-categories
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

The composer’s colors will change based on the selected category:

Kapture 2021-10-27 at 11.47.15

Each of the color changes mentioned above can be disabled in the theme’s settings. You can even disable all of the settings if you’d like to use this component as a way to make category colors reusable as css custom properties. For example, every category page and topic will have these properties set:

  --category-color
  --category-text-color

and the composer will get:

  --composer-category-text-color
  --composer-category-color

These can be reused wherever you’d like in your own CSS, for example:

body {
  background: var(--category-color); 
}

There are some defaults set when a category isn’t present, which you can change in your own CSS:

:root {
  --composer-category-text-color: var(--secondary);
  --composer-category-color: var(--tertiary);
  --category-color: var(--secondary);
  --category-text-color: var(--primary-low-mid);
}
28 Likes

I really like this theme component for making it super clear which category you are in. Looks like the spacing on some buttons shifts when this theme component is installed.

With theme component:

Screen Shot 2022-01-24 at 11.45.07 AM

Without theme component:

Screen Shot 2022-01-24 at 11.44.10 AM

2 Likes

@awesomerobot This is a really cool component and seems like it might be underloved right now!

Yesterday we ran into a situation where this sort of things might have been helpful in our Discourse for Teams instance. (Discourse for Teams…team…if you’re listening please add this theme component!)

  • We have a number of categories that have permissions restricted to certain groups
  • Sometimes there is sensitive information that might get shared in them
  • It’s possible that if someone is not careful, they may select the wrong category and post something without realizing it to a less restrictive category
    • Worse yet, if there are auto-posting triggers, like to Slack, that content might get out there before there’s even much of a chance to move the post
      • And yes, this happened to us

Having a strong visual indicator about where the content is going would be extremely helpful.

I might go further and suggest that this (or another version of this) plugin be about “Category context”. Perhaps an additional feature could be that the category name also gets appended to the action buttons. See below:

CleanShot 2022-01-25 at 06.56.06@2x

1 Like

Thanks so much for this hidden gem. Love it so far @awesomerobot

However, I have a small issue with the menu header. It will change the colour as the create new topic categories colour. I tried with different themes and they all have the same issue

Is there any way to just change the colour for the categories but keep the menu header colour in touch?
Link

1 Like

I just worked on an instance where the category color was not picked up (and logged on the console) with some categories. Took me a while to find the common cause, but it seemed to be the filter setting no subcategories instead of all topics on the Category Settings page:

Screenshot from 2022-06-21 23-11-55

Choosing this setting adds /none to the category url. And this seems to interfere with the color selection.