thzxx
3cecb0f9eb
- fix: useCodeMirror onChange闭包过期导致编辑器内容丢失同步(P0) - feat: 全部组件添加displayName(React DevTools调试支持) - feat: 全部组件添加ARIA属性(WCAG无障碍支持) - fix: App异步操作添加try-catch错误边界 - fix: tabStore空catch块添加错误日志 - fix: sidebarStore Set→string[](Zustand可序列化) - fix: useDragDrop readFile错误处理+空文件修复 - fix: useSettings/useTheme load()添加错误处理 - fix: useTheme toggleDarkMode引用优化 - chore: 版本号升级至0.1.1
30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import { useEffect, useRef } from 'react'
|
|
import { useEditorStore } from '../stores/editorStore'
|
|
import { settingsRepository } from '../db/settingsRepository'
|
|
|
|
export function useTheme() {
|
|
const darkMode = useEditorStore(s => s.darkMode)
|
|
const setDarkMode = useEditorStore(s => s.setDarkMode)
|
|
const isInitialized = useRef(false)
|
|
|
|
// B-05: 从 IndexedDB 加载主题设置
|
|
useEffect(() => {
|
|
settingsRepository.load().then(settings => {
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
setDarkMode(settings.darkMode !== undefined ? settings.darkMode : prefersDark)
|
|
isInitialized.current = true
|
|
}).catch(err => console.error('Failed to load theme settings:', err))
|
|
}, [setDarkMode])
|
|
|
|
// B-05: 首次加载完成后才保存主题设置
|
|
useEffect(() => {
|
|
if (!isInitialized.current) return
|
|
document.documentElement.classList.toggle('dark', darkMode)
|
|
settingsRepository.save({ darkMode })
|
|
}, [darkMode])
|
|
|
|
const toggleDarkMode = useEditorStore(s => s.toggleDarkMode)
|
|
|
|
return { darkMode, toggleDarkMode }
|
|
}
|