Force a colour theme through ThemeProvider
See original GitHub issueIs your feature request related to a problem? Please describe.
When using a theme from a package, in my case often @hackclub/theme, the packaged theme often has a light and dark mode. This is great when you want both light and dark mode, but sometimes you only want one of the two. As the config happens in the theme file, you have to use extend theme to remove a dark mode. Which can clutter the code base.
Describe the solution you’d like
I would like to be able to do:
<ThemeProvider theme={theme} forceColorMode="dark">
Describe alternatives you’ve considered
As mentioned above you can extended the theme, or use the react hook to set the colour mode. Neither is perfect. Another option would to export multiple themes from the package.
Additional context
View https://github.com/hackclub/theme/blob/main/packages/theme/src/index.ts
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (4 by maintainers)
Top GitHub Comments
Hey @hasparus! That’s a smart approach! Though, I’d still prefer a prop as it would simplify it more (and be a bit more understandable) but I’m going to switch over to using this for now, thanks so much!
This is what I ended up using to force a light mode:
@hasparus +1 to that. IMO the approach above is simple, and is easy to understand what’s going on. No need to clutter the provider with additional props. This belongs in userland, as you said 👍