Adjust system elements (e.g. scrollbar) along with the switch

Is your feature request related to a problem? Please describe.

When switching the color-mode on my website, I was surprised system elements (like the scroll-bar on windows) isn't adjusted as well. I now had to add my own CSS thinking that this would be nice to be handled by this plugin, as many users will most likely run into the same problem.

Describe the solution you'd like

Add the following CSS to the plugin (class names should be dynamically adjusted according to the prefix and suffix):

html {
  color-scheme: light dark;
}
html.dark {
  color-scheme: dark;
}
html.light {
  color-scheme: light;
}

Describe alternatives you've considered

Adding the CSS manually, but this needs to be done by almost every person using this extension, so I thought it could go in here to make it easier for everyone.

Additional context

I've just seen that this setting changes the appearance of scroll-bars on windows. A mac-person wouldn't notice this because the scrollbars are transparent there. This might also influence the appearance of other

I could also have added the keyword only to the definitions with a fixed scheme, but I don't think this would be very productive... I've also not tested this on a windows machine using the system-theme, but only by manually switching to light and dark mode, not system. For testing I just have a test-version of Windows, where I can't change the color theme.

nuxt-modules / color-mode