fix theme system

components/ask-ai/uploader.tsx

@@ -21,7 +21,6 @@ import { useQueryClient } from "@tanstack/react-query";
 import { ProjectWithCommits } from "@/actions/projects";
 import { toast } from "sonner";
 import Loading from "../loading";
-// todo: implement the uploader component
 
 export const Uploader = ({
   medias,

components/code/index.tsx

@@ -15,8 +15,6 @@ import { cn } from "@/lib/utils";
 import Loading from "../loading";
 import { ProjectWithCommits } from "@/actions/projects";
 
-// todo: while no theme setted but in dark mode, the dark theme is not setted correctly.
-
 export function AppEditorCode() {
   const queryClient = useQueryClient();
   const { repoId } = useParams<{ repoId: string }>();

components/code/monaco-editor.tsx

@@ -107,6 +107,17 @@ export function AppEditorMonacoEditor({
     };
   }, []);
 
+  const themeEditor = useMemo(() => {
+    const isSystemDark =
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const effectiveTheme =
+      theme === "system" ? (isSystemDark ? "dark" : "light") : theme;
+    return effectiveTheme === "dark" ? "Night" : "NightLight";
+  }, [theme]);
+
+  console.log("++ THEME ++", theme);
+
   return (
     <SandpackStack className="h-full!">
       <FileTabs />
@@ -115,7 +126,7 @@ export function AppEditorMonacoEditor({
           width="100%"
           height="100%"
           language={language}
-          theme={theme === "dark" ? "Night" : "NightLight"}
+          theme={themeEditor}
           key={sandpack.activeFile}
           options={{
             fontSize: 14,