Colorful Categories

theme-component
,
1
: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

Screen Shot 2021-10-27 at 11.37.24 AM
Screen Shot 2021-10-27 at 11.37.24 AM1358×911 71.3 KB

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);
}
38 Likes
2

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
3

@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

2 Likes
4

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
5

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.

6

Just added this today looks really good :smiley:

However, every time I pressed on a topic I kept seeing a white square next to the category name. Then I realised it was the category colour but showing this square seems pointless if the entire category colour is shown in the header.

Without TCimage
With TC image

(TC = Theme Component)

2 Likes
7

Good morning folks, after today’s update, something here broke the category border colors in cat+topics view. Can someone confirm this?

image

1 Like
8

Experiencing this too, with Material theme.

9

This was unrelated to this component, and has been fixed:

10

What about adding categories picker?

I want to enable it in a few subscribed ones (achievable with trust levels too) :slight_smile:

11

I noticed in messages the color of the reply to topic button and the timeline handle is the same as the background. They are both white on white.

image
image891×427 11.5 KB

There is also a deprecation notice in the console

[THEME 5601 ‘Colorful categories’] Deprecation notice: Importing getOwner from discourse-common/lib/get-owner is deprecated. Use import { getOwner } from '@ember/application', or if you still need the fallback shim, use import { getOwnerWithFallback } from 'discourse-common/lib/get-owner';. [deprecated since Discourse 3.2] [deprecation id: discourse.get-owner-with-fallback]

And the sidebar toggle does not change color like the search icon.

image

2 Likes
12

Component likely needs an update

3 Likes
13

I think this one should be ok :rocket:

I’ve been working through our all-the-plugins and all-the-themes directories to try and identify affected themes/plugins in advance. We’re making progress on updating the official ones on our end, and I’ve sent PMs to authors of open-source third-party ones which might be affected :writing_hand:

5 Likes