Force a colour theme through ThemeProvider

Is 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

[sampoder]

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:

<ThemeProvider
  theme={{
    ...theme,
    colors: { ...theme.colors, modes: {} }
  }}
>

[mryechkin]

@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 👍