Is there a recommended way to set up theming with Griffel?

[AkimaLunar]

Is there a recommended way to set up theming with Griffel?

Wondering what your thoughts are on dynamic theming (e.g. dark / light) with Griffel.

[layershifter]

Hey,

We decided to not build anything into Griffel itself for styling to avoid restrictions and limitations. I think that the best approach for styling nowadays is CSS variables (and it's what we picked for Fluent UI React v9 aka @fluentui/react-components) and it's what I can recommend for moving forward.

I made an example on CodeSandbox that could be useful (https://codesandbox.io/s/xenodochial-star-ob7oxt?file=/src/App.tsx). There are three pieces:

• define themes (lightTheme, darkTheme)
• a Proxy for tokens: you can enumerate tokens manually, but it's will be really boring process

  const tokens = {
    foreground: 'var(--foreground)',
    background: 'var(--background)',
    // etc.
  }

• insertion of CSS variables: in the prototype variables are defined on body, but they could be also defined on an element to be scoped

This approach is not restricted to Griffel and can used with other CSS in JS libraries.

[AkimaLunar]

Gotcha! Makes sense 👍 I ended up implementing something very similar with CSS vars, but using a Provider to dynamically swap themes. Although @media (prefers-color-scheme: dark) is pretty sweet!

[layershifter]

@AkimaLunar would you mind to share your solution or update existing CodeSandbox to match it? 🐱