init

src/contexts/DarkModeContext.tsx

@@ -0,0 +1,46 @@
+import {
+	ReactNode,
+	createContext,
+	useContext,
+	useEffect,
+	useState,
+} from 'react'
+
+import { useApp } from './AppContext'
+
+type DarkModeContextType = {
+	isDarkMode: boolean
+}
+
+const DarkModeContext = createContext<DarkModeContextType | undefined>(
+	undefined,
+)
+
+export function DarkModeProvider({ children }: { children: ReactNode }) {
+	const [isDarkMode, setIsDarkMode] = useState(false)
+	const app = useApp()
+
+	useEffect(() => {
+		const handleDarkMode = () => {
+			setIsDarkMode(document.body.classList.contains('theme-dark'))
+		}
+		handleDarkMode()
+		app.workspace.on('css-change', handleDarkMode)
+		return () => app.workspace.off('css-change', handleDarkMode)
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [])
+
+	return (
+		<DarkModeContext.Provider value={{ isDarkMode }}>
+			{children}
+		</DarkModeContext.Provider>
+	)
+}
+
+export function useDarkModeContext() {
+	const context = useContext(DarkModeContext)
+	if (context === undefined) {
+		throw new Error('useDarkModeContext must be used within a DarkModeProvider')
+	}
+	return context
+}