From 80822fd74222cdbfcaf608d7e02e940c2a0ff516 Mon Sep 17 00:00:00 2001
From: cucadmuh <49571317+cucadmuh@users.noreply.github.com>
Date: Fri, 12 Jun 2026 03:13:18 +0300
Subject: [PATCH] fix(themes): apply Theme Store themes in production release
 builds (#1070)

Release CSP blocked runtime <style> injection for community themes; add
explicit style-src/style-src-elem and font-src. Derive the effective theme
synchronously in useThemeScheduler so data-theme updates on the same commit.
---
 src-tauri/tauri.conf.json      |  2 +-
 src/hooks/useThemeScheduler.ts | 34 +++++++++++++++++++++++++---------
 2 files changed, 26 insertions(+), 10 deletions(-)

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,
+  });
 }