There was a question this week regarding Widgets that asked the following:
“When dragging a file and holding it over the widget it behaves differently when using different themes. With default and compact themes, the whole widget changes its colour from blue to purple. When using flat theme, it remains blue. Is it a bug or is it done on purpose that way?”
While I cannot say if this is a bug or on purpose it’s good to know that when using widgets most of the colours you are seeing on screen can be easily customised via theming.
What I usually like to do is open the currently in use widgets-styles package in the IDE e.g.
cd node_modules/@com.mgmtp.a12.widgets/widgets-styles/
// VS code only to open the current dir
code .
In this case the component is question was the file upload widget so I would find the config values for this component. These are usually available at a path like:
dist/stylus/config/public/components/‘component you are looking for’
However, if you are using another theme e.g. flat, then you might need to look at:
dist/stylus/themes/flat/components/‘component you are looking for’
In this case:
dist/stylus/themes/flat/components/file_upload.config.styl
There are quite a few options in this file for things that can potentially be changed, in this case it was known that the hover colour needed changing so a quick search for “hover” brings back a smaller set of results.
$a12_uploadHoverBorderStyle = 2px solid $flat_interactionColor
$a12_uploadHoverColor = $flat_interactionColor
Back in our project we just need to update these values after they are set by the theme to override them. If you’re using the fullstack-template then you can put this into:
client/resources/stylus/components/index.styl
Them assign new values:
$a12_uploadHoverBorderStyle = 10px solid pink
$a12_uploadHoverColor = pink
Then this will be the value used from now. In the case of the original question the following values were used:
$a12_uploadHoverBorderStyle = 2px solid $a12_activeColor
$a12_uploadHoverColor = $a12_activeColor