perf: eliminate theme switch lag by suppressing CSS transitions

Disable all CSS transitions/animations during theme toggle so color
changes apply instantly instead of animating over 150ms. Also cache
Tauri window module import and set color-scheme for native UI elements.
This commit is contained in:
t8y2
2026-05-13 16:04:35 +08:00
parent 70becfd74f
commit b4d1f4b04e
6 changed files with 63 additions and 18 deletions
+26 -6
View File
@@ -16,6 +16,7 @@ const isDark = computed(() => resolveAppThemeAppearance(themeMode.value, systemP
let mediaQuery: MediaQueryList | null = null;
let isListeningForSystemTheme = false;
let cachedTauriWindow: typeof import("@tauri-apps/api/window") | null = null;
function readSystemPrefersDark() {
if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
@@ -35,15 +36,34 @@ function setupSystemThemeListener() {
}
function applyTheme() {
if (typeof document !== "undefined") {
document.documentElement.classList.toggle("dark", isDark.value);
}
if (typeof document === "undefined") return;
const doc = document.documentElement;
const dark = isDark.value;
doc.classList.add("disable-transitions");
doc.classList.toggle("dark", dark);
doc.style.colorScheme = dark ? "dark" : "light";
// force reflow so the class toggle takes effect before re-enabling transitions
doc.offsetHeight; // eslint-disable-line @typescript-eslint/no-unused-expressions
requestAnimationFrame(() => doc.classList.remove("disable-transitions"));
if (!isTauriRuntime()) return;
import("@tauri-apps/api/window").then(({ getCurrentWindow }) => {
getCurrentWindow()
if (cachedTauriWindow) {
cachedTauriWindow
.getCurrentWindow()
.setTheme(getTauriThemeForMode(themeMode.value))
.catch(() => {});
});
} else {
import("@tauri-apps/api/window").then((mod) => {
cachedTauriWindow = mod;
mod
.getCurrentWindow()
.setTheme(getTauriThemeForMode(themeMode.value))
.catch(() => {});
});
}
}
function setThemeMode(mode: AppThemeMode) {