root/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev.git synced 2026-01-29 00:35:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: ensure early CSS injection by preloading Verge config (#5690)

Browse Source 
* fix(theme): background css injection

* fix: ensure early CSS injection by preloading Verge config
This commit is contained in:
Sline
2025-12-01 21:45:01 +08:00
committed by GitHub
parent 9056e8a298
commit 008234988c
5 changed files with 21 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src-tauri/src/utils/resolve/window_script.rs
View File

@@ -72,12 +72,10 @@ pub const WINDOW_INITIAL_SCRIPT: &str = r##"
root.style.setProperty("--bg-color", bgColor);
root.style.setProperty("--text-color", textColor);
root.style.colorScheme = isDark ? "dark" : "light";
root.style.backgroundColor = bgColor;
root.style.color = textColor;
}
const paintBody = () => {
if (!document.body) return;
document.body.style.backgroundColor = bgColor;
document.body.style.color = textColor;
};
if (document.readyState === "loading") {
@@ -93,81 +91,7 @@ pub const WINDOW_INITIAL_SCRIPT: &str = r##"
return isDark;
};
const isDarkTheme = applyInitialTheme(initialTheme);
const getInitialOverlayColors = () => ({
bg: isDarkTheme ? initialColors.darkBg : initialColors.lightBg,
text: isDarkTheme ? "#ffffff" : "#333",
spinnerTrack: isDarkTheme ? "#3a3a3a" : "#e3e3e3",
spinnerTop: isDarkTheme ? "#0a84ff" : "#3498db",
});
function createOrUpdateLoadingOverlay() {
const colors = getInitialOverlayColors();
const existed = document.getElementById('initial-loading-overlay');
const applyOverlayColors = (element) => {
element.style.setProperty("--bg-color", colors.bg);
element.style.setProperty("--text-color", colors.text);
element.style.setProperty("--spinner-track", colors.spinnerTrack);
element.style.setProperty("--spinner-top", colors.spinnerTop);
};
if (existed) {
console.log('[Tauri] 复用已有加载指示器');
applyOverlayColors(existed);
return;
}
console.log('[Tauri] 创建加载指示器');
const loadingDiv = document.createElement('div');
loadingDiv.id = 'initial-loading-overlay';
loadingDiv.innerHTML = `
<div style="
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: var(--bg-color, ${colors.bg}); color: var(--text-color, ${colors.text});
display: flex; flex-direction: column; align-items: center;
justify-content: center; z-index: 9999;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
transition: opacity 0.3s ease;
">
<div style="margin-bottom: 20px;">
<div style="
width: 40px; height: 40px; border: 3px solid var(--spinner-track, ${colors.spinnerTrack});
border-top: 3px solid var(--spinner-top, ${colors.spinnerTop}); border-radius: 50%;
animation: spin 1s linear infinite;
"></div>
</div>
<div style="font-size: 14px; opacity: 0.7;">Loading Clash Verge...</div>
</div>
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
`;
applyOverlayColors(loadingDiv);
if (document.body) {
document.body.appendChild(loadingDiv);
} else {
document.addEventListener('DOMContentLoaded', () => {
if (document.body && !document.getElementById('initial-loading-overlay')) {
document.body.appendChild(loadingDiv);
}
});
}
}
createOrUpdateLoadingOverlay();
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', createOrUpdateLoadingOverlay);
} else {
createOrUpdateLoadingOverlay();
}
applyInitialTheme(initialTheme);
console.log('[Tauri] 窗口初始化脚本执行完成');
"##;