Open yelouafi opened 7 years ago
I'm a little late to the party, but while Styled-Components are great, I'd opt on using javascript styles via jss
or glamor
. This way we could use base16
themes, which are js not css. So, we can reuse Redux DevTools themes. Another advantage is that a theme can be inverted to get both light and dark themes (see the demo).
Here's how we compose them with jss
styles via react-base16-styling
. Not sure how that can be done with styled-components as we have to mix css with javascript styles, unless we convert base16
themes to css.
Thanks for your feedback. The main reason I didn't consider style based solutions is because I use some css-only features (@font-face
, pseudo selectors). But theme-integration with redux devtools is an important thing for me.
From your links I can see that base16 themes
are just objects with props defining color schemes. I'm very new to styled-components but I think it's possible to integrate those themes
const Panel = styled.div`
backrground-color: ${p => p.theme.base00}
`
cc @mxstbr
Yes, very much so! We export a ThemeProvider
that accepts an object theme! This will work perfectly:
<ThemeProvider theme={solarized}>
<App />
</ThemeProvider>
Any component inside App
now has access to the theme like so: ${props => props.theme.base00}
!
See more info at https://github.com/styled-components/styled-components#theming!
Sounds great! We also can invert the theme before passing to ThemeProvider
.
Using @erikras' styled-components-theme
we can even extend our colour set with different manipulations.
BTW, @mxstbr is there any utilities to convert scss or less into styled-components' tagged templates? For example, I'd like to use it for react-select
replacing its scss
/ less
styles, but still keeping the ability to change the variables.
Sorry for off-top, I'm still investigating the solutions to implement theming for the extension.
No worries!
We (Jed is my boss) have been meaning to moving react-select
over to styled-components
for the past month, but have been too busy to do it. If you want to kick that off, that'd be amazing!
As far as Sass/Less utilities go, we're building polished
, which will be the Bourbon for styles in JavaScript. We're still early, so there isn't a lot there yet, but I'm working on this for the next weeks to get it to a first complete state!
We need this to release monitor's components in a npm package and make the them themables