fix(ui): prevent light flash on dark startup (#5637)

* fix(ui): prevent light flash on dark startup

* fix(window): apply initial dark/light theme to prevent white flash

* refactor(boot): optimize config fetch and theme fallback

* fix: system theme detection

* fix(window): remove black flash before loader by aligning initial paint with theme
This commit is contained in:
Sline
2025-11-28 15:15:17 +08:00
committed by GitHub
parent 34aa26813f
commit 683667f8ae
8 changed files with 500 additions and 44 deletions
+53 -7
View File
@@ -1,12 +1,19 @@
use tauri::WebviewWindow;
use dark_light::{Mode as SystemTheme, detect as detect_system_theme};
use tauri::utils::config::Color;
use tauri::{Theme, WebviewWindow};
use crate::{
config::Config,
core::handle,
utils::resolve::window_script::{INITIAL_LOADING_OVERLAY, WINDOW_INITIAL_SCRIPT},
utils::resolve::window_script::{INITIAL_LOADING_OVERLAY, build_window_initial_script},
};
use clash_verge_logging::{Type, logging_error};
const DARK_BACKGROUND_COLOR: Color = Color(46, 48, 61, 255); // #2E303D
const LIGHT_BACKGROUND_COLOR: Color = Color(245, 245, 245, 255); // #F5F5F5
const DARK_BACKGROUND_HEX: &str = "#2E303D";
const LIGHT_BACKGROUND_HEX: &str = "#F5F5F5";
// 定义默认窗口尺寸常量
const DEFAULT_WIDTH: f64 = 940.0;
const DEFAULT_HEIGHT: f64 = 700.0;
@@ -21,8 +28,37 @@ pub async fn build_new_window() -> Result<WebviewWindow, String> {
let config = Config::verge().await;
let latest = config.latest_arc();
let start_page = latest.start_page.as_deref().unwrap_or("/");
let initial_theme_mode = match latest.theme_mode.as_deref() {
Some("dark") => "dark",
Some("light") => "light",
_ => "system",
};
match tauri::WebviewWindowBuilder::new(
let resolved_theme = match initial_theme_mode {
"dark" => Some(Theme::Dark),
"light" => Some(Theme::Light),
_ => None,
};
let prefers_dark_background = match resolved_theme {
Some(Theme::Dark) => true,
Some(Theme::Light) => false,
_ => !matches!(detect_system_theme().ok(), Some(SystemTheme::Light)),
};
let background_color = if prefers_dark_background {
DARK_BACKGROUND_COLOR
} else {
LIGHT_BACKGROUND_COLOR
};
let initial_script = build_window_initial_script(
initial_theme_mode,
DARK_BACKGROUND_HEX,
LIGHT_BACKGROUND_HEX,
);
let mut builder = tauri::WebviewWindowBuilder::new(
app_handle,
"main", /* the unique window label */
tauri::WebviewUrl::App(start_page.into()),
@@ -34,11 +70,21 @@ pub async fn build_new_window() -> Result<WebviewWindow, String> {
.fullscreen(false)
.inner_size(DEFAULT_WIDTH, DEFAULT_HEIGHT)
.min_inner_size(MINIMAL_WIDTH, MINIMAL_HEIGHT)
.visible(true) // 立即显示窗口,避免用户等待
.initialization_script(WINDOW_INITIAL_SCRIPT)
.build()
{
.visible(false) // 等待主题色准备好后再展示,避免启动色差
.initialization_script(&initial_script);
if let Some(theme) = resolved_theme {
builder = builder.theme(Some(theme));
}
builder = builder.background_color(background_color);
match builder.build() {
Ok(window) => {
logging_error!(
Type::Window,
window.set_background_color(Some(background_color))
);
logging_error!(Type::Window, window.eval(INITIAL_LOADING_OVERLAY));
Ok(window)
}