Skip to content

Commit 14ac7b7

Browse files
LarryZhu-devLarryZhu-dev
committed
perf: 优化主题影响范围
1 parent d2e5f48 commit 14ac7b7

3 files changed

Lines changed: 90 additions & 2 deletions

File tree

‎src/renderer/hooks/useTheme.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,10 @@ function setTheme(theme: ThemeName = currentTheme.value) {
173173

174174
const html = document.documentElement;
175175

176+
// 清除启动脚本设置的内联样式，避免覆盖主题类中的 CSS 变量
177+
html.style.removeProperty("--primary-color");
178+
html.style.removeProperty("background");
179+
176180
// 移除所有以 theme- 开头的类名
177181
const allClasses = Array.from(html.classList);
178182
const themeClasses = allClasses.filter((className) => className.startsWith("theme-"));

‎src/renderer/index.html‎

Lines changed: 59 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,82 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>milkup</title>
6+
<script>
7+
// 在 DOM 渲染前立即应用主题背景色，避免启动时闪白/闪黑
8+
;(function () {
9+
var theme = localStorage.getItem('theme-name') || 'normal'
10+
var bgMap = {
11+
normal: '#ffffff',
12+
'normal-dark': '#3b4252',
13+
crepe: '#fafbfc',
14+
'crepe-dark': '#161b22',
15+
frame: '#fbfbf2',
16+
'frame-dark': '#383838',
17+
}
18+
var bg = bgMap[theme]
19+
if (!bg) {
20+
try {
21+
var customs = JSON.parse(localStorage.getItem('custom-themes') || '[]')
22+
for (var i = 0; i < customs.length; i++) {
23+
if (customs[i].name === theme && customs[i].data && customs[i].data.appCssProperties) {
24+
bg = customs[i].data.appCssProperties['--background-color-1']
25+
break
26+
}
27+
}
28+
} catch (e) {}
29+
}
30+
var primaryMap = {
31+
normal: '#5e81ac',
32+
'normal-dark': '#88c0d0',
33+
crepe: '#0366d6',
34+
'crepe-dark': '#58a6ff',
35+
frame: '#4d8077',
36+
'frame-dark': '#e3a76f',
37+
}
38+
var primary = primaryMap[theme]
39+
if (!primary) {
40+
try {
41+
var c = customs || JSON.parse(localStorage.getItem('custom-themes') || '[]')
42+
for (var j = 0; j < c.length; j++) {
43+
if (c[j].name === theme && c[j].data && c[j].data.appCssProperties) {
44+
primary = c[j].data.appCssProperties['--primary-color']
45+
break
46+
}
47+
}
48+
} catch (e) {}
49+
}
50+
document.documentElement.style.background = bg || '#ffffff'
51+
document.documentElement.style.setProperty('--primary-color', primary || '#5e81ac')
52+
document.documentElement.classList.add('theme-' + theme)
53+
})()
54+
</script>
655
</head>
756
<style>
857
.welcome {
958
width: calc(100vw - 36px);
1059
height: calc(100vh - 36px);
1160
}
12-
.welcome > img {
61+
.welcome > svg {
1362
width: 31%;
1463
height: 31%;
1564
position: absolute;
1665
top: 50%;
1766
left: 50%;
1867
transform: translate(-50%, -50%);
1968
display: block;
69+
color: var(--primary-color);
2070
}
2171
</style>
2272
<body>
2373
<div id="app">
24-
<div class="welcome"><img src="/logo.svg" alt="" /></div>
74+
<div class="welcome">
75+
<svg viewBox="13.5 11.5 11 15" fill="none" xmlns="http://www.w3.org/2000/svg">
76+
<path d="M21.5 13.5V14.6492C21.5 14.8763 21.5773 15.0966 21.7191 15.2739L23.2809 17.2261C23.4227 17.4034 23.5 17.6237 23.5 17.8508V24.5C23.5 25.0523 23.0523 25.5 22.5 25.5H15.5C14.9477 25.5 14.5 25.0523 14.5 24.5V17.8508C14.5 17.6237 14.5773 17.4034 14.7191 17.2261L16.2809 15.2739C16.4227 15.0966 16.5 14.8763 16.5 14.6492V13.5C16.5 12.9477 16.9477 12.5 17.5 12.5H20.5C21.0523 12.5 21.5 12.9477 21.5 13.5Z" stroke="currentColor"/>
77+
<path d="M23.5 23.4834C23.5 24.2376 23.5 24.1423 23.5 24.5711C23.5 25.5 23.5 25 23.5 25.5C21.8842 25.5 17.0138 25.5 14.5 25.5C14.5 24.5711 14.5 24.0373 14.5 23.4834C13.0908 23.4834 16.0959 23.4834 14.5 23.4834C15.4949 23.4834 16.0857 22.3957 18.7928 23.4834C21.5 24.5711 23.5 23.4834 23.5 23.4834Z" fill="currentColor"/>
78+
<path d="M16.5 14.5H21.5" stroke="currentColor"/>
79+
<path d="M20.5373 21.9992C20.476 22.0031 20.4146 21.9931 20.3572 21.9701C20.2998 21.947 20.2477 21.9114 20.2043 21.8655C20.1609 21.8195 20.1272 21.7644 20.1055 21.7037C20.0838 21.643 20.0745 21.5782 20.0783 21.5134V20.0107L19.3898 20.9321C19.3449 20.9889 19.2888 21.0347 19.2253 21.066C19.1619 21.0974 19.0927 21.1137 19.0226 21.1137C18.9526 21.1137 18.8834 21.0974 18.8199 21.066C18.7565 21.0347 18.7003 20.9889 18.6555 20.9321L17.9188 19.9139V21.4659C17.9224 21.5305 17.9131 21.5953 17.8913 21.6559C17.8695 21.7165 17.8358 21.7715 17.7925 21.8173C17.7491 21.8632 17.697 21.8987 17.6397 21.9217C17.5823 21.9447 17.521 21.9546 17.4598 21.9508C17.3985 21.9546 17.3372 21.9447 17.2799 21.9217C17.2225 21.8987 17.1705 21.8632 17.1271 21.8173C17.0837 21.7715 17.05 21.7165 17.0283 21.6559C17.0065 21.5953 16.9971 21.5305 17.0008 21.4659V18.4591C17.0032 18.3596 17.0357 18.2636 17.0936 18.185C17.1515 18.1065 17.2316 18.0496 17.3223 18.0226C17.4109 17.994 17.5053 17.9925 17.5947 18.0183C17.684 18.0441 17.7646 18.0961 17.8271 18.1683L19.0224 19.8171L20.1699 18.2651C20.2277 18.1862 20.3082 18.1293 20.3993 18.103C20.4903 18.0767 20.587 18.0825 20.6747 18.1194C20.7654 18.1464 20.8456 18.2033 20.9034 18.2818C20.9613 18.3604 20.9938 18.4564 20.9963 18.5559V21.4659C21.0046 21.5339 20.9989 21.603 20.9794 21.6684C20.96 21.7338 20.9273 21.794 20.8836 21.8448C20.8399 21.8955 20.7863 21.9356 20.7265 21.9623C20.6667 21.9889 20.6022 22.0015 20.5373 21.9992Z" fill="currentColor"/>
80+
</svg>
81+
</div>
2582
</div>
2683
<script type="module" src="/main.ts"></script>
2784
</body>

‎src/renderer/theme-editor.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,33 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>主题编辑器页面 - Milkup</title>
77
<link rel="icon" type="image/x-icon" href="./favicon.ico">
8+
<script>
9+
;(function () {
10+
var theme = localStorage.getItem('theme-name') || 'normal'
11+
var bgMap = {
12+
normal: '#ffffff',
13+
'normal-dark': '#3b4252',
14+
crepe: '#fafbfc',
15+
'crepe-dark': '#161b22',
16+
frame: '#fbfbf2',
17+
'frame-dark': '#383838',
18+
}
19+
var bg = bgMap[theme]
20+
if (!bg) {
21+
try {
22+
var customs = JSON.parse(localStorage.getItem('custom-themes') || '[]')
23+
for (var i = 0; i < customs.length; i++) {
24+
if (customs[i].name === theme && customs[i].data && customs[i].data.appCssProperties) {
25+
bg = customs[i].data.appCssProperties['--background-color-1']
26+
break
27+
}
28+
}
29+
} catch (e) {}
30+
}
31+
document.documentElement.style.background = bg || '#ffffff'
32+
document.documentElement.classList.add('theme-' + theme)
33+
})()
34+
</script>
835
</head>
936
<body>
1037
<div id="theme-editor-app"></div>

0 commit comments

Comments
 (0)