search

atom-material / atom-material-ui

A dynamic UI theme for Atom that follows Google's Material Design Guidelines
MIT License
817 stars 203 forks source link

Unfocused elements primary color stays Teal #447

Closed brandon14 closed 6 years ago

brandon14 commented 6 years ago

In some panels, if an element is highlighted with the primary color, when that panel becomes unfocused, it will show the primary color for that element as being the default teal regardless of what the primary color is set to. I have tried with some of the preset color schemes (lime in the screenshot below) and with a custom primary and secondary color.

Reproduction Steps:

  1. Set the primary color of Material UI to something besides the default teal.
  2. Search through the project and for something and in the Project Find Results display, click on the filename dropdown element so that it is highlighted with the primary color.
  3. Click into another panel (for example the Tree View) and observe that the primary color highlight changes to teal.

Expected behavior:

Even when unfocused, the primary color stays the set primary color.

Observed behavior:

When something highlighted as the primary color in a panel is unfocused, it changes to teal.

Screenshots and GIFs

primary-color-mismatch

Atom version: Atom v1.22.0-beta0 x64 OS and version: Windows 7 64-bit

Installed packages:

atom-autocomplete-php@0.25.6
atom-ide-ui@0.5.0
atom-material-ui@2.0.5
busy-signal@1.4.3
flow-ide@1.8.1
hyperclick@0.1.5
ide-php@0.6.9
ide-typescript@0.6.1
intentions@1.1.5
linter@2.2.0
linter-ui-default@1.6.10
php-cs-fixer@4.1.1
php-integrator-annotations@1.2.0
php-integrator-autocomplete-plus@1.6.0
php-integrator-base@3.0.1
php-integrator-navigation@1.2.1
php-integrator-refactoring@1.4.1
platformio-ide-terminal@2.7.0
project-manager@3.3.5
silvestreh commented 6 years ago

Yeah, I've been scratching my head over this one for a while now. Any help is greatly appreciated.

brandon14 commented 6 years ago

@silvestreh I can't promise I'll figure it out but I will dig around and see what I can find.

brandon14 commented 6 years ago

@silvestreh So after an initial investigation to the styles applied, it seems that there is a class .list-group .selected::before, .list-tree .selected::before that is getting the default teal color applied, and when that is focused it applies the.focusable-panel:focus .selected::before class to it which applies the correctly set primary color as the background-color.

And I think this class applied to it isn't defined in your material-ui styles because if you look at the source of that class its coming from the default lists.less in the atom-ui library found here. It is using the @background-color-selected less variable for the background. Maybe that isn't getting updated correctly when you change the primary color?

silvestreh commented 6 years ago

Alright, just fixed it, thanks for the detective work! I've been quite busy with the new baby 😄 I'll publish a patch now.

brandon14 commented 6 years ago

@silvestreh no problem and glad I could help out. Have been using this UI theme for a long time!