Colors are very difficult to theme
See original GitHub issueI’ve been working with integrating ReactSelect with our own theming library and I’ve come across a few issues.
- Conflicts in theme namespacing - If you use Emotion components to override ReactSelect components you can get conflicts in the theme object that we override. For example, in my global
ThemeProvider
I have acolors
key with a different format that means that I end up having a weird hybrid of the colors object passed down and this causes issues. It would be better for react select to pass downtheme={{ 'react-select': theme }}
instead oftheme={theme}
as this allows prevents collisions. - The named colors are too generic;
primary
primary75
primary50
andprimary25
- I can’t control what colors are used in what situations so it would make more sense to use named values likemenuBorder
activeBackground
activeText
etc so we know what we are theming and what it affects.
I know this is a pretty opinionated and technically I can work around this by replacing all Components with custom ones but this feels like it defeats the purpose of a “theme” option.
To me, it makes more sense to name the theme colors as for what they are actually used for rather than having to figure out that primary25
is used only for when an element is “focused”.
Another issue is that due to us using neutral0
for both the selected text color and the control background I can’t theme these individually, not to mention there is no text color available for when a value is focussed so using darker colors there won’t work - for example when implementing a Dark Theme.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:41
- Comments:7
Top GitHub Comments
Working with the theme is just terrible.
Maybe it’ll be helpful to somebody.
@hovoodd thank you so much for posting that, it was so helpful! I’m quite meh at frontend, so I had to jam a lot of colors (ie. pink, purple) while debugging to see what would happen. I don’t think I would have been able to work if you hadn’t posted that!!!
My use case : I needed to make react-select work with light/dark mode in Material UI’s theme system, so I’m posting my code I used to make that work for someone who has to do something similar.
(A demo of working react-selects should be on the forms w/light and dark themes on https://app.betterself.io/demo later tonight)