Using Charka-ui and Panda CSS dark mode

[cjazinski]

Is there any way to use the data-theme attribute for dark mode instead of the class. I've noticed that Charka-ui uses the following attributes on the html tag data-theme="dark" style="--chakra-ui-color-mode: dark; color-scheme: dark;" however panda is using the class="dark" instead. We have a mixture of both so when a page reload is happening the values for chakra are getting updated but the panda one is not; Forcing the user to have to go and re-toggle the color mode to apply the dark theme. I've run across this https://panda-css.com/docs/guides/multiple-themes#multi-themes thinking I could just add [data-theme=dark] & but not having any luck.

One solution I did find - but I'm not sure if this is the right way of doing things it so add something like this to the HTML head element

    <script>
      const theme = localStorage.getItem('chakra-ui-color-mode') || 'light';
      document.documentElement.classList.add(theme);
    </script>

[segunadebayo]

You can configure the dark mode condition to match that of Chakra's

import { defineConfig } from "@pandacss/dev";

export const config = defineConfig({
  theme: { extend: {} },
  conditions: {
    extend: {
      "dark": "[data-theme=dark] &",
    }
  },
});

Here's a playground link: https://play.panda-css.com/CPK0Eqa-IR