Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-23 21:38:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(component): theme flickering (#5238)

Browse Source 
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).
This commit is contained in:
Peng Xiao
2023-12-08 10:12:20 +00:00
parent feed400462
commit 5979162a5c
2 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/component/src/theme/theme.css.ts
+6 -2
View File
@@ -11,8 +11,12 @@ globalStyle('html', {
vars: lightCssVariables, vars: lightCssVariables,
}); });
globalStyle('html[data-theme="dark"]', { globalStyle('html', {
vars: darkCssVariables, '@media': {
'(prefers-color-scheme: dark)': {
vars: darkCssVariables,
},
},
}); });
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
packages/frontend/core/.webpack/template.html
+1
View File
@@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="color-scheme" content="light dark" />
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1" content="width=device-width, initial-scale=1, maximum-scale=1"