feat: 增强 Markdown 代码块高亮和表格样式

src/web/shared/hooks/use-theme-preference.ts

@@ -1,8 +1,10 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 export type EffectiveTheme = "dark" | "light";
 export type ThemePreference = "dark" | "light" | "system";
 
+const PREFERENCE_CHANGE_EVENT = "theme-preference-change";
+
 export const THEME_PREFERENCE_STORAGE_KEY = "theme.preference";
 export const THEME_MEDIA_QUERY = "(prefers-color-scheme: dark)";
 
@@ -44,10 +46,19 @@ export function useThemePreference() {
     return () => mediaQueryList.removeEventListener("change", handleChange);
   }, []);
 
-  const setPreference = (nextPreference: ThemePreference) => {
+  useEffect(() => {
+    const handleStorageEvent = (event: CustomEvent) => {
+      const next = parseThemePreference(event.detail);
+      setPreferenceState((prev) => (prev !== next ? next : prev));
+    };
+    window.addEventListener(PREFERENCE_CHANGE_EVENT, handleStorageEvent as EventListener);
+    return () => window.removeEventListener(PREFERENCE_CHANGE_EVENT, handleStorageEvent as EventListener);
+  }, []);
+
+  const setPreference = useCallback((nextPreference: ThemePreference) => {
     setPreferenceState(nextPreference);
     writeThemePreference(nextPreference);
-  };
+  }, []);
 
   return { effectiveTheme, preference, setPreference };
 }
@@ -58,4 +69,9 @@ export function writeThemePreference(preference: ThemePreference, storage: Stora
   } catch {
     // 存储不可用时仅使用当前内存状态，避免阻断 Dashboard 渲染。
   }
+  try {
+    window.dispatchEvent(new CustomEvent(PREFERENCE_CHANGE_EVENT, { detail: preference }));
+  } catch {
+    // jsdom 等环境可能不支持 CustomEvent
+  }
 }