fix(component): theme flickering (#5238)

Add color-scheme to html so that the web will use system scheme when scripts has not being loaded;
Use `(prefers-color-scheme: dark)` so that the css vars do not defer load based on `data-theme`, which is set by next-themes (which is deferred).

packages/frontend/component/src/theme/theme.css.ts

@@ -11,8 +11,12 @@ globalStyle('html', {
   vars: lightCssVariables,
 });
 
-globalStyle('html[data-theme="dark"]', {
-  vars: darkCssVariables,
+globalStyle('html', {
+  '@media': {
+    '(prefers-color-scheme: dark)': {
+      vars: darkCssVariables,
+    },
+  },
 });
 
 if (process.env.NODE_ENV === 'development') {