Multiple Themes using a data attribute vs a class name

[jimmymorris]

Was doing some poking around and saw that the panda-base conditions handles light and dark mode via a classname, but it appears that throughout the documentation the code examples use data attributes.

// example code
const conditions = {
  pinkTheme: '[data-theme=pink] &',
  blueTheme: '[data-theme=blue] &'
};

// panda-base
const conditions = {
  dark: ' &.dark, .dark &',
  light: ' &.light, .light &',
}

I imagine you are suggested this methodology to avoid having to create an entry for each color mode like below:

const conditions: {
  pinkTheme: '[data-theme=pink] &',
  pinkDarkTheme: '[data-theme=pink-dark] &',
  blueTheme: '[data-theme=blue] &'
  blueDarkTheme: '[data-theme=blue-dark] &',
}

Wanted to see if you all saw an advantage over one or the other?

[anubra266]

@jimmymorris This is something left to you (your design system). It depends on what method your team decides on, the default panda preset is only configured for light and dark color modes. Which is independent of themes.

[jimmymorris]

Figured as much, thanks again for the swift reply

[astahmer]

related: https://panda-css.com/docs/guides/multiple-themes#multi-themes

[jimmymorris]

This was helpful and made sense to me. I just wasn't exactly sure if there was a best practice when it comes to handling via a data attribute or class names