mount css variable on body instead of :root

[observerw]

Hi there, I've been recently using this preset, it helps me a lot. I encountered a little problem: I was trying to use some CSS variables from another CSS file to define the theme:

presetTheme<Theme>({
  theme: {
    dark: {
      colors: {
        text: 'css(var(--neutral-5))'
      }
    }
  }
})

The CSS variable --neutral-5 is defined on body, not html. However, this preset mounts CSS variables on :root i.e. html, so it cannot use those variables on body. So I would suggest mounting all --un-preset-theme-xxx on body instead of :root to avoid potential problems. In that way, no matter whether those external CSS variables are mounted on :root or on body, this preset can always handle them properly.

I'm not sure if this problem is just for me or it's a general problem, so I opened this issue to ask your opinion.

[Dunqing]

Thanks for the feedback!

It looks like we can add new options to customize the light theme selector, what do you think?

[observerw]

Thanks for the feedback!

It looks like we can add new options to customize the light theme selector, what do you think?

That would be great 😄

[Dunqing]

I will finish it later, if you are interested you can always take it and you are welcome to ask me any questions about this preset.

[Dunqing]

It now supports selectors option.