fix: improve CodeMirror dark mode theme detection and system theme support

nullcoder · Claude · nullcoder · commit a908a974c33e · 2025-06-07T22:59:34.000-07:00
- 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 <claude@ghostpaste.dev>
diff --git a/components/ui/code-editor.tsx b/components/ui/code-editor.tsx
@@ -296,6 +296,20 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
       });
     }, [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;
