helpwithcovid / covid-volunteers

Organizing and matching volunteers with COVID-19 projects
https://helpwithcovid.com
MIT License
96 stars 76 forks source link

Add example new category color #287

Closed shen-sat closed 4 years ago

shen-sat commented 4 years ago

I'm trying to use our theming implementation to allow me to add a new color for use throughout the website. The reason being that HWBE will have new categories and they will need new colors.

I've attempted to add a new category color cat-foobar to the HWBE theme. As a test, I changed the Settings file, so that the category Education now uses the color cat-foobar. I added the 'cat-foobar': '#0800ff' to the theme/tailwind.config.yml file, but it didn't work.

In order to get it to work, I had to add 'cat-foobar': '#0800ff' to the the global tailwind file (ie tailwind.config.js). It seems like in order to add a color (eg cat-foobar) to HWBE, we need to declare the came color in our global tailwind file. Once cat-foobar is decalred in the global tailwind file, I can override it with whatever color I want in the theme/tailwind.config.yml file

This poses a problem as it means I have to declare HWBE-specific colors in the global Tailwind file, which negates the whole point of our themeing implementation.

I could of course be going about this the wrong way 😅 . I've made this PR to help illustrate what I mean (see code comments below).

adrianthedev commented 4 years ago

Yes. You are correct @shen-sat. The theme config file (.yml file) doesn't take into account the category colors.

I pushed some changes that will make that happen. So from now on you can add/update category colors inside tailwind.config.yml under the categories key.

What do you think about this solution?