rsgltzyd/testing-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(ThemeModeProvider): 修复主题快照同步与首屏闪烁问题

Browse Source 
抽取 themeSnapshot 工具模块，异步恢复与跨窗同步时写回 snapshot；HTML 内联脚本与 useLayoutEffect 消除 dark 类首帧闪烁；避免 storage 恢复覆盖用户操作及 setState 嵌套更新。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
雨霖铃
2026-06-19 00:45:52 +08:00
parent 8f9ff27034
commit f0292acbb7
8 changed files with 302 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/entrypoints/popup/index.html
+13
View File
@@ -5,6 +5,19 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testing Tools - 标签页</title>
<meta name="manifest.type" content="browser_action" />
<script>
(function () {
try {
var raw = localStorage.getItem('snapshot/app/themeMode');
var mode = raw ? JSON.parse(raw) : 'system';
if (mode !== 'light' && mode !== 'dark' && mode !== 'system') mode = 'system';
var isDark =
mode === 'dark' ||
(mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
if (isDark) document.documentElement.classList.add('dark');
} catch (_error) {}
})();
</script>
<style>
/* Force initial popup size before React hydration */
html, body {
src/entrypoints/popup/main.tsx
+3
View File
@@ -1,8 +1,11 @@
import ReactDOM from 'react-dom/client';
import { applyThemeFromSnapshot } from '@/utils/themeSnapshot';
import AppRoot from '@/providers/AppRoot';
import '@/index.css';
import App from './App.tsx';
applyThemeFromSnapshot();
ReactDOM.createRoot(document.getElementById('root')!).render(
<AppRoot>
<App />
src/entrypoints/sidepanel/index.html
+13
View File
@@ -4,6 +4,19 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testing Tools - Side Panel</title>
<script>
(function () {
try {
var raw = localStorage.getItem('snapshot/app/themeMode');
var mode = raw ? JSON.parse(raw) : 'system';
if (mode !== 'light' && mode !== 'dark' && mode !== 'system') mode = 'system';
var isDark =
mode === 'dark' ||
(mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
if (isDark) document.documentElement.classList.add('dark');
} catch (_error) {}
})();
</script>
</head>
<body>
<div id="root"></div>
src/entrypoints/sidepanel/main.tsx
+3
View File
@@ -1,8 +1,11 @@
import ReactDOM from 'react-dom/client';
import { applyThemeFromSnapshot } from '@/utils/themeSnapshot';
import AppRoot from '@/providers/AppRoot';
import '@/index.css';
import App from './App.tsx';
applyThemeFromSnapshot();
ReactDOM.createRoot(document.getElementById('root')!).render(
<AppRoot>
<App />