Issues with theming and coloring - Colors.js and colors.css / whitelabel

Im working on metabase trying to do some changes to the theming and coloring. I see in the colors.css file that it should be kept in sync with colors.js.

I am confused about what each of these files actually does and how the colors are used.
Is there documentation about which variables change which elements as the naming isn't the most explicit.

Furthermore, how is all the stuff in the colors.js and colors.css files different/specific from the whitelabeling tab in admin in settings of the app itself when i run it.

Hi @JoedAtEllucian
I would recommend that you use the support email, if you are using the Enterprise Edition.
You would have to look at the element you're trying to modify to see which variable it's using.
The Whitelabel functionality lets the admin easy set certain colors of the UI without having to build their own version.

"I would recommend that you use the support email, if you are using the Enterprise Edition."

  • thank you i will email them

"You would have to look at the element you're trying to modify to see which variable it's using."

  • the issue im having is that it doesnt seem to be consistent. And if it is its hard to find out how. Example, if i change color band in colors.css and leave it in colors.js, it changes to the color i specified in the .css. but if i change them both to be the same thing then it changed the color to something completely different. In truth i dont even know how to phrase my question for the email to support.

"The Whitelabel functionality lets the admin easy set certain colors of the UI without having to build their own version."

  • thank you

@JoedAtEllucian I would recommend that you show exactly what you're trying to change in the UI.