From 5fe3b1912e1413d1b84ce0b4d820da4ebfd858e1 Mon Sep 17 00:00:00 2001 From: Thanan Traiongthawon <95660+nullcoder@users.noreply.github.com> Date: Sat, 7 Jun 2025 22:57:58 -0700 Subject: [PATCH 1/4] fix: improve CodeMirror dark mode theme detection and system theme support MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Use resolvedTheme from next-themes for better theme resolution - Add fallback to system preference detection during initialization - Add dedicated effect to handle initial theme resolution - Remove duplicate theme update logic - Fix theme switching when system mode changes This ensures the code editor properly matches the system dark mode and responds correctly to theme changes. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- components/ui/code-editor.tsx | 30 ++++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/components/ui/code-editor.tsx b/components/ui/code-editor.tsx index dc820f1..c0c732a 100644 --- a/components/ui/code-editor.tsx +++ b/components/ui/code-editor.tsx @@ -113,7 +113,7 @@ export const CodeEditor = forwardRef( ) { const containerRef = useRef(null); const viewRef = useRef(null); - const { theme: systemTheme } = useTheme(); + const { resolvedTheme } = useTheme(); // Store the onChange callback in a ref to avoid stale closures const onChangeRef = useRef(onChange); @@ -139,8 +139,8 @@ export const CodeEditor = forwardRef( [] ); - // Determine the active theme - const activeTheme = themeOverride || systemTheme || "light"; + // Determine the active theme - use resolvedTheme which handles system theme properly + const activeTheme = themeOverride || resolvedTheme || "light"; // Get language extension const getLanguageExtension = useCallback((lang: string) => { @@ -215,11 +215,19 @@ export const CodeEditor = forwardRef( // Debounced onChange for performance let changeTimeout: ReturnType; + // Determine theme for initialization - prefer resolved theme but fallback to system preference + const initTheme = + resolvedTheme || + (typeof window !== "undefined" && + window.matchMedia("(prefers-color-scheme: dark)").matches + ? "dark" + : "light"); + // Create extensions with compartments const extensions = [ ...baseExtensions, languageCompartment.of(getLanguageExtension(language)), - themeCompartment.of(getThemeExtension(activeTheme)), + themeCompartment.of(getThemeExtension(initTheme)), readOnlyCompartment.of(EditorState.readOnly.of(readOnly)), lineNumbersCompartment.of( showLineNumbers ? [lineNumbers(), foldGutter()] : [] @@ -288,6 +296,20 @@ export const CodeEditor = forwardRef( }); }, [activeTheme, getThemeExtension]); + // Handle initial theme resolution when resolvedTheme becomes available + useEffect(() => { + if (!viewRef.current || !resolvedTheme) return; + + // Only update if we're not using a theme override + if (!themeOverride) { + viewRef.current.dispatch({ + effects: themeCompartment.reconfigure( + getThemeExtension(resolvedTheme) + ), + }); + } + }, [resolvedTheme, themeOverride, getThemeExtension]); + // Update read-only state useEffect(() => { if (!viewRef.current) return; From b6699e803109a436639ec4cdb85a11eae0c12879 Mon Sep 17 00:00:00 2001 From: Thanan Traiongthawon <95660+nullcoder@users.noreply.github.com> Date: Sat, 7 Jun 2025 22:58:59 -0700 Subject: [PATCH 2/4] fix: resolve CodeMirror theme switching issue MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove duplicate theme update effect that was interfering with proper theme switching. Now the editor correctly responds to manual theme changes while still supporting system theme detection. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- components/ui/code-editor.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/components/ui/code-editor.tsx b/components/ui/code-editor.tsx index c0c732a..af10b44 100644 --- a/components/ui/code-editor.tsx +++ b/components/ui/code-editor.tsx @@ -296,20 +296,6 @@ export const CodeEditor = forwardRef( }); }, [activeTheme, getThemeExtension]); - // Handle initial theme resolution when resolvedTheme becomes available - useEffect(() => { - if (!viewRef.current || !resolvedTheme) return; - - // Only update if we're not using a theme override - if (!themeOverride) { - viewRef.current.dispatch({ - effects: themeCompartment.reconfigure( - getThemeExtension(resolvedTheme) - ), - }); - } - }, [resolvedTheme, themeOverride, getThemeExtension]); - // Update read-only state useEffect(() => { if (!viewRef.current) return; From a908a974c33eac40818225ca424f32d48ff3237c Mon Sep 17 00:00:00 2001 From: Thanan Traiongthawon <95660+nullcoder@users.noreply.github.com> Date: Sat, 7 Jun 2025 22:57:58 -0700 Subject: [PATCH 3/4] fix: improve CodeMirror dark mode theme detection and system theme support MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Use resolvedTheme from next-themes for better theme resolution - Add fallback to system preference detection during initialization - Add dedicated effect to handle initial theme resolution - Remove duplicate theme update logic - Fix theme switching when system mode changes This ensures the code editor properly matches the system dark mode and responds correctly to theme changes. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- components/ui/code-editor.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/components/ui/code-editor.tsx b/components/ui/code-editor.tsx index af10b44..c0c732a 100644 --- a/components/ui/code-editor.tsx +++ b/components/ui/code-editor.tsx @@ -296,6 +296,20 @@ export const CodeEditor = forwardRef( }); }, [activeTheme, getThemeExtension]); + // Handle initial theme resolution when resolvedTheme becomes available + useEffect(() => { + if (!viewRef.current || !resolvedTheme) return; + + // Only update if we're not using a theme override + if (!themeOverride) { + viewRef.current.dispatch({ + effects: themeCompartment.reconfigure( + getThemeExtension(resolvedTheme) + ), + }); + } + }, [resolvedTheme, themeOverride, getThemeExtension]); + // Update read-only state useEffect(() => { if (!viewRef.current) return; From 19cd94d28ea3791fea20e1abf489cb96dbb6296c Mon Sep 17 00:00:00 2001 From: Thanan Traiongthawon <95660+nullcoder@users.noreply.github.com> Date: Sat, 7 Jun 2025 22:58:59 -0700 Subject: [PATCH 4/4] fix: resolve CodeMirror theme switching issue MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove duplicate theme update effect that was interfering with proper theme switching. Now the editor correctly responds to manual theme changes while still supporting system theme detection. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- components/ui/code-editor.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/components/ui/code-editor.tsx b/components/ui/code-editor.tsx index c0c732a..af10b44 100644 --- a/components/ui/code-editor.tsx +++ b/components/ui/code-editor.tsx @@ -296,20 +296,6 @@ export const CodeEditor = forwardRef( }); }, [activeTheme, getThemeExtension]); - // Handle initial theme resolution when resolvedTheme becomes available - useEffect(() => { - if (!viewRef.current || !resolvedTheme) return; - - // Only update if we're not using a theme override - if (!themeOverride) { - viewRef.current.dispatch({ - effects: themeCompartment.reconfigure( - getThemeExtension(resolvedTheme) - ), - }); - } - }, [resolvedTheme, themeOverride, getThemeExtension]); - // Update read-only state useEffect(() => { if (!viewRef.current) return;