Theming with Gouache and styled-components 💅🏾
In this tutorial, you’ll learn to use Gouache with styled-components to create awesome themes. We’ll show you a few ways to use the styled-components ThemeProvider with Gouache, from the basic usage to more advanced ones.
Basic usage
The easiest way to use Gouache with ThemeProvider is to pass the whole styles object to the theme props. This allows you to consume everything that is in the styles object to style your components.
Theme toggle
One other way to use ThemeProvider is to use only a part of your styles object to the theme props. In the example above, I’m sending everything that is in the darkTheme folder. If you have multiple themes (lightTheme , retro , etc.), this makes it easy to switch from one to the other. You’ll only have to change the currentTheme value and it will change all the styles in your app.
Already having a theme? No problem!
If you already using ThemeProvider with your own custom theme object, one way to add Gouache is like the following. gouache is now a key to your current theme and it’s easy to consume its different values.
Other ideas on how to use Gouache with ThemeProvider?
As you’ve seen, there are multiple ways to use Gouache with ThemeProvider .
Choose your favorite or create a new one that fits your needs. If so, feel free to add your solution in the comments below so we can add it to this article.
Don’t forget to follow us on Twitter and LinkedIn to get updates about our next blowing mind features that are coming 🤯
Thank you for your time and have a great day,
Gouache team
Gouache App:
https://gouache.app/
Gouache Documentation:
https://docs.gouache.app/
use-gouache hook:
https://github.com/Gouache-app/use-gouache
Twitter:
https://twitter.com/gouache
