 |
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 |
 |
Repository Link | https://github.com/discourse/discourse-colorful-categories |
 |
New to Discourse Themes? | Beginner’s guide to using Discourse Themes |
Install this theme component
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.
The composer’s colors will change based on the selected category:
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:
--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);
}
