fix: honor dark mode for monaco editor

web/components/templates/hql/hqlPage.tsx

@@ -28,12 +28,14 @@ import {
 import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
 import { useHeliconeAgent } from "../agent/HeliconeAgentContext";
 import { EmptyStateCard } from "@/components/shared/helicone/EmptyStateCard";
+import { useTheme } from "next-themes";
 
 function HQLPage() {
   const organization = useOrg();
   const { data: hasAccessToHQL, isLoading: isLoadingFeatureFlag } =
     useFeatureFlag("hql", organization?.currentOrg?.id ?? "");
   const { setNotification } = useNotification();
+  const { theme: currentTheme } = useTheme();
 
   const monaco = useMonaco();
   const clickhouseSchemas = useClickhouseSchemas();
@@ -141,6 +143,39 @@ function HQLPage() {
     }
   }, [savedQueryDetails]);
 
+  // Keep Monaco theme in sync with app theme
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mono = (window as any).monaco;
+    if (!mono || !mono.editor) return;
+
+    // Define transparent background themes once (idempotent)
+    try {
+      mono.editor.defineTheme("custom-dark", {
+        base: "vs-dark",
+        inherit: true,
+        rules: [],
+        colors: {
+          "editor.background": "#00000000",
+        },
+      });
+      mono.editor.defineTheme("custom-light", {
+        base: "vs",
+        inherit: true,
+        rules: [],
+        colors: {
+          "editor.background": "#00000000",
+        },
+      });
+    } catch (e) {
+      // themes may already be defined; ignore
+    }
+
+    mono.editor.setTheme(
+      currentTheme === "dark" ? "custom-dark" : "custom-light",
+    );
+  }, [currentTheme]);
+
   // Setup autocompletion
   useEffect(() => {
     if (!monaco || !clickhouseSchemas.data) return;
@@ -314,6 +349,7 @@ function HQLPage() {
               <Editor
                 defaultLanguage="sql"
                 defaultValue={currentQuery.sql}
+                theme={currentTheme === "dark" ? "vs-dark" : "vs"}
                 options={{
                   minimap: {
                     enabled: true,
@@ -333,6 +369,12 @@ function HQLPage() {
                   const model = editor.getModel();
                   if (!model) return;
 
+                  // Define and apply transparent background themes
+                  // Apply the custom theme immediately
+                  monaco.editor.setTheme(
+                    currentTheme === "dark" ? "custom-dark" : "custom-light",
+                  );
+
                   // Regex to match forbidden write statements (case-insensitive, at start of line ignoring whitespace)
                   const forbidden =
                     /\b(insert|update|delete|drop|alter|create|truncate|replace)\b/i;