Example of a theme switcher

[marlonmarcello]

Hi! 👋
I was wondering if there is an example of a project with a theme switcher.
I read through all the docs and I think I understand how the createTheme works but the examples only show this:

const { styled, css } = createStitches({
  theme: {
    colors: {
      gray100: 'hsl(206,22%,99%)',
      gray200: 'hsl(206,12%,97%)',
      // ...
    },
  },
  space: {},
  fonts: {},
});

const darkTheme = createTheme({
  colors: {
    gray100: 'hsl(206,8%,12%)',
    gray200: 'hsl(206,7%,14%)',
    // ...
  },
  space: {},
  fonts: {},
});

// and then the example goes on shows how to apply it
<div className={darkTheme}>
  <Box>Content nested in dark theme.</Box>
</div>

But for example how do I make it so my darkMode theme is used automatically if the user has prefers-color-scheme: dark? The example uses the theme on a div but how do I go about making it global by using the styled function?
What if I wanted to have a theme switcher and let the user pick a theme how does that work?

As an example, coming from styled-components all I had to do was pass the theme to the ThemeProvider.
I read the post about the differences between stitches and styled-components and in there it says In Stitches, you can define tokens in the config file and seamlessly consume and access directly in the Style Object. but it doesn't show how to change between the themes.

[lucastobrazil]

This might help - I've been working on a ColorModeProvider and general "pattern" for handling this with stitches.

Would love some feedback on it. I am building a design system that would be consumed by many different products, so was aiming for a portable way of providing the context / toggle functions "out of the box". it handles more than 2 modes

Please let me know what you think - or any ideas!

CodeSandbox example

[felipemaccari]

that is nice @lucastobrazil!
do you think that all of this still worth it instead of using another alternatives like styled-components?

[lucastobrazil]

I do - stitches has many benefits over styled-components. Near zero runtime, using css variables reduces runtime cost, variants API is super powerful too

[felipemaccari]

nice, i share the same thoughts with my recent studies about stitches!
thanks for sharing the job!

[marlonmarcello]

@lucastobrazil this is awesome, thanks so much!!!!

[lucastobrazil]

No worries - let me know how you go. Feedback welcomed!