fix: let "follow system" theme auto-update by delegating to Tauri's native theme tracking

Pass "system" to set_window_theme instead of explicitly detecting dark/light,
so Tauri uses window.set_theme(None) and the WebView's prefers-color-scheme
media query stays in sync with the real OS theme.
This commit is contained in:
Jason
2026-02-28 14:50:51 +08:00
parent d5e4e8d133
commit fd836ce70d
+4 -20
View File
@@ -113,33 +113,17 @@ export function ThemeProvider({
}
};
// Determine current effective theme
// When "system", pass "system" so Tauri uses None (follows OS theme natively).
// This keeps the WebView's prefers-color-scheme in sync with the real OS theme,
// allowing effect #3's media query listener to fire on system theme changes.
if (theme === "system") {
const isDark =
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches;
updateNativeTheme(isDark ? "dark" : "light");
updateNativeTheme("system");
} else {
updateNativeTheme(theme);
}
// Listen to system theme changes for native window when in "system" mode
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
const handleChange = () => {
if (theme === "system" && !isCancelled) {
updateNativeTheme(mediaQuery.matches ? "dark" : "light");
}
};
if (theme === "system") {
mediaQuery.addEventListener("change", handleChange);
}
return () => {
isCancelled = true;
if (theme === "system") {
mediaQuery.removeEventListener("change", handleChange);
}
};
}, [theme]);