[BUG] - prefers-color-scheme:dark is not working if I use darkMode:media and not selector or class

[pkyeck]

HeroUI Version

2.6.13

Describe the bug

I think with the darkMode: 'media' config you should render the color variables for the defaultTheme in :root and the other theme using a prefers-color-scheme media-query and not just the theme-name as selector.

Right now, if I have

const config: Config = {
  content: [],
  theme: {},
  darkMode: 'media',
  plugins: [
    heroui({
      defaultTheme: 'light',
      themes: {
        light: {         
          colors: {},
        },
        dark: {         
          colors: {},
        },
      },
    }),
  ],
};

The default theme variables are generated like this:

:root,.light,[data-theme="light"] {
  color-scheme: light;
  --heroui-background: 0 0% 100%;
  --heroui-foreground: 225 66.67% 1.18%;
  /* ... */
}

But the dark mode only like this:

.dark,[data-theme="dark"] {
  color-scheme: dark;
  --heroui-background: 240 12.5% 6.27%;
  --heroui-foreground: 225 100% 99.22%;
  /* ... */
}

This way, dark mode is not rendered if the user "prefers" dark 😔

I think generating it like this would make more sense b/c the user would get the right theme without the need to install extra libs and run JS...

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --heroui-background: 240 12.5% 6.27%;
  --heroui-foreground: 225 100% 99.22%;
  /* ... */
}

@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]):not(.dark):not([data-theme="dark"]) {
    color-scheme: dark;
    --heroui-background: 240 12.5% 6.27%;
    --heroui-foreground: 225 100% 99.22%;
    /* ... */
  }
}

Or something similar...

What do you think?

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

see above

Expected behavior

Get dark mode if I prefer "dark"

Screenshots or Videos

No response

Operating System Version

all

Browser

Chrome

[linear]

ENG-1919 [BUG] - prefers-color-scheme:dark is not working if I use darkMode:media and not selector or class