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).
2026-02-08 10:33:44 +00:00 · 2023-12-08 10:12:20 +00:00
parent feed400462
commit 5979162a5c
2 changed files with 7 additions and 2 deletions
--- a/packages/frontend/component/src/theme/theme.css.ts
+++ b/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') {
--- a/packages/frontend/core/.webpack/template.html
+++ b/packages/frontend/core/.webpack/template.html
@@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
+    <meta name="color-scheme" content="light dark" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"