# Colorful Categories **URL:** \ **Category:** Theme component\ **Tags:** official, colorful-categories\ **Created:** [October 27, 2021, 3:51pm UTC](https://meta.discourse.org/t/colorful-categories/207267 "2021-10-27T15:51:56Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)\ **Post date:** [October 27, 2021, 3:51pm UTC](https://meta.discourse.org/t/colorful-categories/207267/1 "2021-10-27T15:51:56Z")
| | | | | --- | --- | --- | | :discourse2: | **Summary** | **Colorful Categories** uses each category’s colors in more places when you’re on a category topic list or within a topic. | | 👓 | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/colorful-categories) | | 🛠 | **Repository Link** | [https://github.com/discourse/discourse-colorful-categories](https://github.com/discourse/discourse-colorful-categories) | | 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) | Install this theme component > [@](#): > > :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. 👍 > > [❓  **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=colorful-categories "Ask for support on configuring and using Colorful Categories") [🐛  **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=colorful-categories "A bug report means something is broken, preventing normal/typical use of the theme component") [👀  **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=colorful-categories "Discussion about the user interface of Colorful Categories, and how features are presented (including language and UI elements)") [💡  **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=colorful-categories "Discussion about how existing Colorful Categories features can be improved or enhanced, and how proposed new features could work") ### Features **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. ![Screen Shot 2021-10-27 at 11.37.24 AM](https://global.discourse-cdn.com/meta/original/3X/5/4/540967a32cc03401a8007f70f58c6be09385c7e0.png) The composer’s colors will change based on the selected category: ![Kapture 2021-10-27 at 11.47.15](https://global.discourse-cdn.com/meta/original/3X/e/3/e3332f94ec2197812fa0ce7550434de6b606be69.gif) ### Settings Each of the color changes mentioned above can be disabled in the theme’s settings. | Name | Description | | --- | --- | | use category color in composer | disable to use default composer colors | | use category color in header | disable to use default header colors | | use category color in timeline | disable to use default topic timeline colors | | use category color in buttons | disable to use default button colors | ### Development Notes You can 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: ```plaintext --category-color --category-text-color ``` and the composer will get: ```plaintext --composer-category-text-color --composer-category-color ``` These can be reused wherever you’d like in your own CSS, for example: ```css body { background: var(--category-color); } ``` There are some defaults set when a category isn’t present, which you can change in your own CSS: ```css :root { --composer-category-text-color: var(--secondary); --composer-category-color: var(--tertiary); --category-color: var(--secondary); --category-text-color: var(--primary-low-mid); } ``` > :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans. > Last edited by @JammyDodger 2024-06-11T13:40:35Z > > > **Check document** > > > > Perform check on document: ---
**Author:** ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)\ **Post date:** [January 24, 2022, 7:48pm UTC](https://meta.discourse.org/t/colorful-categories/207267/2 "2022-01-24T19:48:17Z")
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](https://global.discourse-cdn.com/meta/original/3X/9/8/98fb3ecb6ecfdb6b841c0c9b057447620740ad42.png) Without theme component: ![Screen Shot 2022-01-24 at 11.44.10 AM](https://global.discourse-cdn.com/meta/original/3X/d/f/df11ddd143efa7464e8d16d495820420ce6d5108.png) ---
**Author:** ![galligan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/galligan/32/224839_2.png) [@galligan](https://meta.discourse.org/u/galligan)\ **Post date:** [January 25, 2022, 11:56am UTC](https://meta.discourse.org/t/colorful-categories/207267/3 "2022-01-25T11:56:46Z")
@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](https://global.discourse-cdn.com/meta/original/3X/f/2/f2b6b7c7d885e6814c451c98bbf2679fb90f2803.png) ---
**Author:** ![quangmai911](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/quangmai911/32/247925_2.png) [@quangmai911](https://meta.discourse.org/u/quangmai911)\ **Post date:** [January 28, 2022, 5:50am UTC](https://meta.discourse.org/t/colorful-categories/207267/4 "2022-01-28T05:50:47Z")
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](https://nimb.ws/rlcJCP) ---
**Author:** ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)\ **Post date:** [June 21, 2022, 10:23pm UTC](https://meta.discourse.org/t/colorful-categories/207267/5 "2022-06-21T22:23:23Z")
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](https://global.discourse-cdn.com/meta/original/4X/6/0/5/605004d37cd854b78bbed583d9e59b5196262029.png) Choosing this setting adds `/none` to the category url. And this seems to interfere with the color selection. ---
**Author:** ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)\ **Post date:** [November 6, 2022, 3:59pm UTC](https://meta.discourse.org/t/colorful-categories/207267/6 "2022-11-06T15:59:07Z")
Just added this today looks really good 😃 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 TC ![image](https://global.discourse-cdn.com/meta/original/4X/0/a/e/0ae6573014d7b6b81eeacbf2ba1288b6856faa87.png) With TC ![image](https://global.discourse-cdn.com/meta/original/4X/b/a/2/ba2c70f9befa027b1d980f89cb0b750b0546ee51.png) (TC = Theme Component) ---
**Author:** ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP)\ **Post date:** [June 7, 2023, 6:11am UTC](https://meta.discourse.org/t/colorful-categories/207267/7 "2023-06-07T06:11:08Z")
Good morning folks, after today’s update, something here broke the category border colors in cat+topics view. Can someone confirm this? ![image](https://global.discourse-cdn.com/meta/original/4X/f/a/c/fac763c91d87e7e9de22bd784dbbb59e35bfac1d.png) ---
**Author:** ![sok777](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@sok777](https://meta.discourse.org/u/sok777)\ **Post date:** [June 7, 2023, 12:30pm UTC](https://meta.discourse.org/t/colorful-categories/207267/8 "2023-06-07T12:30:36Z")
Experiencing this too, with Material theme. ---
**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\ **Post date:** [June 7, 2023, 5:48pm UTC](https://meta.discourse.org/t/colorful-categories/207267/9 "2023-06-07T17:48:36Z")
This was unrelated to this component, and has been fixed: > [@Categories boxes border-color broken after update](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/13): > > This fix has been merged ([FIX: add category colors back to categories pages (#21977) · discourse/discourse@e43ac00 · GitHub](https://github.com/discourse/discourse/commit/e43ac00bf40d1da662ffbe61cd96b50b1696d21e)), so after updating Discourse the colors should return. ---
**Author:** ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead)\ **Post date:** [August 7, 2023, 3:19pm UTC](https://meta.discourse.org/t/colorful-categories/207267/10 "2023-08-07T15:19:58Z")
What about adding categories picker? I want to enable it in a few _subscribed_ ones (achievable with trust levels too) 🙂 ---
**Author:** ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)\ **Post date:** [October 19, 2023, 5:14pm UTC](https://meta.discourse.org/t/colorful-categories/207267/11 "2023-10-19T17:14:33Z")
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](https://global.discourse-cdn.com/meta/original/4X/6/1/8/61871a7386b3ce48a3b9f0b656b0cb82edd3a858.png) 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](https://global.discourse-cdn.com/meta/original/4X/c/5/a/c5ad16c6aedad44d8d8d7eb7cce89aaf69343a25.png) ---
**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\ **Post date:** [October 19, 2023, 5:28pm UTC](https://meta.discourse.org/t/colorful-categories/207267/12 "2023-10-19T17:28:47Z")
Component likely needs an update > [@November 2023 - refactoring Discovery routes: how will it affect my theme/plugin?](https://meta.discourse.org/t/upcoming-refactoring-to-discovery-routes-how-will-it-affect-my-theme-plugin/282816): > > As part of our project to upgrade Discourse to the latest version of Ember, we’ve been working on a significant refactoring of the Discovery (a.k.a. the ‘topic list’) routes. This topic is targeted at theme/plugin developers, and aims to list the kinds of theme/plugin activities which may be affected by the refactoring. Background This refactoring is necessary because modern Ember no longer supports ‘named outlets’ like {{outlet "topics"}}, which we were using extensively on these routes. Ess… ---
**Author:** ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)\ **Post date:** [October 19, 2023, 5:50pm UTC](https://meta.discourse.org/t/colorful-categories/207267/13 "2023-10-19T17:50:07Z")
I think this one should be ok 🚀 I’ve been working through our [all-the-plugins](https://github.com/discourse/all-the-plugins) and [all-the-themes](https://github.com/discourse/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 ✍