style(ui): Adjust the dark theme color from warm to cool colors

- Update the CSS custom properties in theme.css to adjust the main color from warm brown (oklch 65 hue) to cool blue (oklch 260 hue)
- Rename and update the dark theme variable of the SqlEditor component, replacing the warm code editor theme with a cool AI style theme
- Ensure visual consistency and improve modernity and readability in dark mode

Author: codeErrorSleep

src/components/business/Editor/SqlEditor.tsx

@@ -23,40 +23,40 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 
-const warmDarkEditorOverrides = EditorView.theme(
+const aiDarkEditorOverrides = EditorView.theme(
   {
     "&": {
-      backgroundColor: "#2e2a26",
-      color: "#f0ebe3",
+      backgroundColor: "#1f2128",
+      color: "#e6eaf2",
     },
     ".cm-content": {
-      caretColor: "#f0ebe3",
+      caretColor: "#e6eaf2",
     },
     ".cm-gutters": {
-      backgroundColor: "#34302b",
-      color: "#b9afa3",
-      borderRight: "1px solid #5f5851",
+      backgroundColor: "#242730",
+      color: "#aab2c0",
+      borderRight: "1px solid #353944",
     },
     ".cm-activeLine": {
-      backgroundColor: "rgba(221, 202, 180, 0.10)",
+      backgroundColor: "rgba(255, 255, 255, 0.04)",
     },
     ".cm-activeLineGutter": {
-      backgroundColor: "rgba(221, 202, 180, 0.12)",
+      backgroundColor: "rgba(255, 255, 255, 0.04)",
     },
     ".cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection": {
-      backgroundColor: "rgba(221, 202, 180, 0.24)",
+      backgroundColor: "rgba(140, 170, 255, 0.25)",
     },
     ".cm-cursor, .cm-dropCursor": {
-      borderLeftColor: "#f0ebe3",
+      borderLeftColor: "#e6eaf2",
     },
     ".cm-tooltip": {
-      backgroundColor: "#3a342e",
-      color: "#f0ebe3",
-      border: "1px solid #6b6359",
+      backgroundColor: "#2a2f3a",
+      color: "#e6eaf2",
+      border: "1px solid #3b4250",
     },
     ".cm-tooltip-autocomplete ul li[aria-selected]": {
-      backgroundColor: "rgba(221, 202, 180, 0.18)",
-      color: "#fff8ef",
+      backgroundColor: "rgba(140, 170, 255, 0.20)",
+      color: "#f2f5fb",
     },
   },
   { dark: true },
@@ -342,7 +342,7 @@ export function SqlEditor({
   // Theme
   const editorTheme = useMemo(() => {
     const isDark = theme === "dark" || (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
-    return isDark ? [oneDark, warmDarkEditorOverrides] : [];
+    return isDark ? [oneDark, aiDarkEditorOverrides] : [];
   }, [theme]);
 
   return (

src/styles/theme.css

@@ -42,42 +42,42 @@
 }
 
 .dark {
-  --background: oklch(0.2 0.006 65);
-  --foreground: oklch(0.95 0.01 80);
-  --card: oklch(0.24 0.007 65);
+  --background: oklch(0.18 0.003 260);
+  --foreground: oklch(0.94 0.004 260);
+  --card: oklch(0.22 0.003 260);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.26 0.007 65);
+  --popover: oklch(0.24 0.003 260);
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.985 0 0);
   --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.3 0.007 65);
+  --secondary: oklch(0.27 0.003 260);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.29 0.006 65);
-  --muted-foreground: oklch(0.78 0.01 70);
-  --accent: oklch(0.32 0.008 65);
+  --muted: oklch(0.25 0.003 260);
+  --muted-foreground: oklch(0.72 0.004 260);
+  --accent: oklch(0.29 0.004 260);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.396 0.141 25.723);
   --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.36 0.006 65);
-  --input: oklch(0.31 0.006 65);
-  --input-background: oklch(0.27 0.006 65);
-  --switch-background: oklch(0.4 0.006 65);
-  --ring: oklch(0.62 0.02 75);
+  --border: oklch(0.33 0.003 260);
+  --input: oklch(0.28 0.003 260);
+  --input-background: oklch(0.23 0.003 260);
+  --switch-background: oklch(0.38 0.003 260);
+  --ring: oklch(0.6 0.02 255);
   --font-weight-medium: 500;
   --font-weight-normal: 400;
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.22 0.006 65);
+  --sidebar: oklch(0.2 0.003 260);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.3 0.007 65);
+  --sidebar-accent: oklch(0.27 0.003 260);
   --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.35 0.006 65);
-  --sidebar-ring: oklch(0.6 0.02 75);
+  --sidebar-border: oklch(0.32 0.003 260);
+  --sidebar-ring: oklch(0.58 0.02 255);
 }
 
 @theme inline {