From 5979162a5ceaab313e0dd86e8ea702eceebf0ce3 Mon Sep 17 00:00:00 2001 From: Peng Xiao Date: Fri, 8 Dec 2023 10:12:20 +0000 Subject: [PATCH] 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 | 8 ++++++-- packages/frontend/core/.webpack/template.html | 1 + 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/frontend/component/src/theme/theme.css.ts b/packages/frontend/component/src/theme/theme.css.ts index 24187dc84..c471d45a1 100644 --- 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') { diff --git a/packages/frontend/core/.webpack/template.html b/packages/frontend/core/.webpack/template.html index 4c0ee9501..0b8b6e471 100644 --- a/packages/frontend/core/.webpack/template.html +++ b/packages/frontend/core/.webpack/template.html @@ -2,6 +2,7 @@ +