diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 4c671c49..67282f33 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -28,7 +28,7 @@
       }
     ],
     "security": {
-      "csp": "default-src 'self' 'unsafe-inline' 'unsafe-eval' ipc: http://ipc.localhost tauri:; connect-src 'self' ipc: http://ipc.localhost tauri: https: http: ws: wss:; img-src 'self' asset: http://asset.localhost https: http: data: blob:; media-src 'self' asset: http://asset.localhost https: http: data: blob:;",
+      "csp": "default-src 'self' 'unsafe-inline' 'unsafe-eval' ipc: http://ipc.localhost tauri:; style-src 'self' 'unsafe-inline' asset: http://asset.localhost https://asset.localhost tauri: blob:; style-src-elem 'self' 'unsafe-inline' asset: http://asset.localhost https://asset.localhost tauri: blob:; font-src 'self' data: asset: http://asset.localhost https://asset.localhost; connect-src 'self' ipc: http://ipc.localhost tauri: https: http: ws: wss:; img-src 'self' asset: http://asset.localhost https: http: data: blob:; media-src 'self' asset: http://asset.localhost https: http: data: blob:;",
       "assetProtocol": {
         "enable": true,
         "scope": [
diff --git a/src/hooks/useThemeScheduler.ts b/src/hooks/useThemeScheduler.ts
index b93374e4..0287bd4f 100644
--- a/src/hooks/useThemeScheduler.ts
+++ b/src/hooks/useThemeScheduler.ts
@@ -1,18 +1,34 @@
 import { useEffect, useState } from 'react';
 import { useThemeStore, getScheduledTheme } from '../store/themeStore';
 
+/**
+ * Effective theme id for `data-theme` — scheduler-aware when enabled.
+ * Derived synchronously from the store so `App.tsx` never paints a stale id
+ * (the previous useState+mirror lag could leave `data-theme` on Mocha for a
+ * commit cycle in production React).
+ */
 export function useThemeScheduler(): string {
-  const state = useThemeStore();
-  const [effectiveTheme, setEffectiveTheme] = useState(() => getScheduledTheme(state));
+  const enableScheduler = useThemeStore(s => s.enableThemeScheduler);
+  const theme = useThemeStore(s => s.theme);
+  const themeDay = useThemeStore(s => s.themeDay);
+  const themeNight = useThemeStore(s => s.themeNight);
+  const timeDayStart = useThemeStore(s => s.timeDayStart);
+  const timeNightStart = useThemeStore(s => s.timeNightStart);
+  const [tick, setTick] = useState(0);
 
   useEffect(() => {
-    setEffectiveTheme(getScheduledTheme(useThemeStore.getState()));
-    if (!state.enableThemeScheduler) return;
-    const id = setInterval(() => {
-      setEffectiveTheme(getScheduledTheme(useThemeStore.getState()));
-    }, 60_000);
+    if (!enableScheduler) return;
+    const id = setInterval(() => setTick(n => n + 1), 60_000);
     return () => clearInterval(id);
-  }, [state.enableThemeScheduler, state.theme, state.themeDay, state.themeNight, state.timeDayStart, state.timeNightStart]);
+  }, [enableScheduler, themeDay, themeNight, timeDayStart, timeNightStart]);
 
-  return effectiveTheme;
+  void tick;
+  return getScheduledTheme({
+    enableThemeScheduler: enableScheduler,
+    theme,
+    themeDay,
+    themeNight,
+    timeDayStart,
+    timeNightStart,
+  });
 }