Colorful categories component

This theme component 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:

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);
}

Install this theme component

21 Likes