Hard coded colors

[paul-asvb]

Bug Report

Theme colors can't overwrite hard coded colors in certain places.
Example here:

https://github.com/OHIF/Viewers/blob/master/platform/ui/src/components/studyBrowser/StudyBrowser.styl#L6

Describe the Bug

When trying to overwrite the default colors some components wont take the color from the :root css variables.

How to find all hardcoded colors:

search for
#([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?
and exclude:
*.svg, *.lock, *.md

Solution suggestion:

Replace them with css variables.
e.g. change background-color: black to background-color: var(--primary-background-color)

[sedghi]

You should modify the tailwind configuration. Since we moved to tailwindcss

[nicoesiea]

Is it possible to ask for an example? For example, how to change the top bar color - the one with the tool icons?

[paul-asvb]

@sedghi that was a great decision. @nicoesiea i haven't tried, but from my experience with tailwind: Change this file https://github.com/OHIF/Viewers/blob/master/platform/ui/tailwind.config.js and build the viewer.

[nicoesiea]

Just be careful, there are two tailwind.config.js files (the first in the APP folder and the second in UI).
I do not understand the reason for these two files.
NOTE I created a new issue for splitButton hard-coded color (#3767)