fix(desktop): add color fallbacks for legacy webviews

apps/desktop/src/components/grid/DataGrid.vue

@@ -8183,35 +8183,68 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
 
 <style scoped>
 [data-grid-root] {
-  --data-grid-row-muted-bg: color-mix(in oklab, var(--muted) 30%, transparent);
-  --data-grid-row-new-bg: color-mix(in oklab, var(--primary) 5%, transparent);
-  --data-grid-row-deleted-bg: color-mix(in oklab, var(--destructive) 5%, transparent);
-  --data-grid-cell-active-bg: color-mix(in oklab, var(--primary) 15%, transparent);
-  --data-grid-cell-dirty-bg: color-mix(in oklab, oklch(79.5% 0.184 86.047) 10%, transparent);
-  --data-grid-cell-selected-bg: color-mix(in oklab, var(--primary) 25%, transparent);
-  --data-grid-cell-selected-dirty-bg: color-mix(
-    in oklab,
-    oklch(0.8 0.15 85) 30%,
-    color-mix(in oklab, var(--primary) 18%, transparent)
-  );
-  --data-grid-cell-selected-border: color-mix(in oklab, var(--primary) 70%, transparent);
-  --data-grid-cell-hover-bg: color-mix(in oklab, var(--accent) 50%, transparent);
+  --data-grid-row-muted-bg: rgb(248 248 248);
+  --data-grid-row-new-bg: rgb(243 243 243);
+  --data-grid-row-deleted-bg: rgb(255 244 244);
+  --data-grid-cell-active-bg: rgb(232 232 232);
+  --data-grid-cell-dirty-bg: rgb(255 248 230);
+  --data-grid-cell-selected-bg: rgb(226 226 226);
+  --data-grid-cell-selected-dirty-bg: rgb(244 229 186);
+  --data-grid-cell-selected-border: rgb(90 90 90);
+  --data-grid-cell-hover-bg: rgb(245 245 245);
   --data-grid-cell-search-bg: rgb(253 245 184);
   --data-grid-cell-current-search-bg: rgb(253 224 71 / 52%);
   --data-grid-cell-current-search-border: rgb(234 179 8 / 82%);
   --data-grid-row-number-default-bg: rgb(255 255 255);
-  --data-grid-row-number-new-bg: color-mix(in oklab, rgb(16 185 129) 15%, var(--background));
-  --data-grid-row-number-edited-bg: color-mix(in oklab, rgb(245 158 11) 15%, var(--background));
-  --data-grid-row-number-deleted-bg: color-mix(in oklab, var(--destructive) 15%, var(--background));
-  --data-grid-row-number-active-bg: color-mix(in oklab, var(--primary) 15%, var(--background));
-  --data-grid-row-number-selected-bg: color-mix(in oklab, var(--primary) 25%, var(--background));
+  --data-grid-row-number-new-bg: rgb(219 244 233);
+  --data-grid-row-number-edited-bg: rgb(253 241 219);
+  --data-grid-row-number-deleted-bg: rgb(255 244 244);
+  --data-grid-row-number-active-bg: rgb(232 232 232);
+  --data-grid-row-number-selected-bg: rgb(226 226 226);
 }
 
 :global(.dark) [data-grid-root] {
+  --data-grid-row-muted-bg: rgb(32 32 34);
+  --data-grid-row-new-bg: rgb(51 51 55);
+  --data-grid-row-deleted-bg: rgb(55 31 32);
+  --data-grid-cell-active-bg: rgb(64 64 64);
+  --data-grid-cell-dirty-bg: rgb(94 75 26);
+  --data-grid-cell-selected-bg: rgb(66 67 70);
+  --data-grid-cell-selected-dirty-bg: rgb(94 75 26);
+  --data-grid-cell-selected-border: rgb(170 170 175);
+  --data-grid-cell-hover-bg: rgb(46 47 51);
   --data-grid-cell-search-bg: rgb(72 57 8);
   --data-grid-cell-current-search-bg: rgb(116 87 0);
   --data-grid-cell-current-search-border: rgb(239 177 0);
   --data-grid-row-number-default-bg: rgb(35 37 42);
+  --data-grid-row-number-new-bg: rgb(33 45 40);
+  --data-grid-row-number-edited-bg: rgb(48 41 28);
+  --data-grid-row-number-deleted-bg: rgb(55 31 32);
+  --data-grid-row-number-active-bg: rgb(64 64 64);
+  --data-grid-row-number-selected-bg: rgb(66 67 70);
+}
+
+@supports (background: color-mix(in oklab, white 50%, transparent)) {
+  [data-grid-root] {
+    --data-grid-row-muted-bg: color-mix(in oklab, var(--muted) 30%, transparent);
+    --data-grid-row-new-bg: color-mix(in oklab, var(--primary) 5%, transparent);
+    --data-grid-row-deleted-bg: color-mix(in oklab, var(--destructive) 5%, transparent);
+    --data-grid-cell-active-bg: color-mix(in oklab, var(--primary) 15%, transparent);
+    --data-grid-cell-dirty-bg: color-mix(in oklab, rgb(240 177 0) 10%, transparent);
+    --data-grid-cell-selected-bg: color-mix(in oklab, var(--primary) 25%, transparent);
+    --data-grid-cell-selected-dirty-bg: color-mix(
+      in oklab,
+      rgb(234 181 50) 30%,
+      color-mix(in oklab, var(--primary) 18%, transparent)
+    );
+    --data-grid-cell-selected-border: color-mix(in oklab, var(--primary) 70%, transparent);
+    --data-grid-cell-hover-bg: color-mix(in oklab, var(--accent) 50%, transparent);
+    --data-grid-row-number-new-bg: color-mix(in oklab, rgb(16 185 129) 15%, var(--background));
+    --data-grid-row-number-edited-bg: color-mix(in oklab, rgb(245 158 11) 15%, var(--background));
+    --data-grid-row-number-deleted-bg: color-mix(in oklab, var(--destructive) 15%, var(--background));
+    --data-grid-row-number-active-bg: color-mix(in oklab, var(--primary) 15%, var(--background));
+    --data-grid-row-number-selected-bg: color-mix(in oklab, var(--primary) 25%, var(--background));
+  }
 }
 
 .data-grid-topbar {
@@ -8335,15 +8368,18 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
 }
 
 .ddl-code :deep(.ddl-kw) {
+  color: rgb(39 132 213);
   color: oklch(0.6 0.15 250);
   font-weight: 600;
 }
 
 .ddl-code :deep(.ddl-ident) {
+  color: rgb(58 168 91);
   color: oklch(0.65 0.15 150);
 }
 
 .ddl-code :deep(.ddl-str) {
+  color: rgb(213 111 44);
   color: oklch(0.65 0.15 50);
 }
 </style>

apps/desktop/src/components/mongo/JsonEditNode.vue

@@ -194,13 +194,16 @@ function confirmRemoveChild() {
   align-items: start;
   margin: 4px 0 4px 2ch;
   padding: 7px 8px;
+  border: 1px solid var(--border);
   border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
   border-left-width: 3px;
   border-radius: 8px;
+  background: var(--muted);
   background: color-mix(in oklab, var(--background) 76%, var(--muted));
 }
 
 .json-edit-row:hover {
+  background: var(--accent);
   background: color-mix(in oklab, var(--background) 58%, var(--muted));
 }
 
@@ -271,6 +274,7 @@ function confirmRemoveChild() {
 
 .json-edit-value:focus {
   border-color: var(--ring);
+  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.18);
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 28%, transparent);
 }
 

apps/desktop/src/components/sidebar/TreeItem.vue

@@ -3752,27 +3752,29 @@ function treeItemMenuItems(): ContextMenuItem[] {
 
 /* Unfocused: subtle gray */
 .tree-item-active {
-  background-color: var(--tree-connection-active-bg, oklch(0.94 0 0)) !important;
+  background-color: var(--tree-connection-active-bg, rgb(235 235 235)) !important;
 }
 :root.dark .tree-item-active {
-  background-color: var(--tree-connection-active-bg, oklch(0.26 0 0)) !important;
+  background-color: var(--tree-connection-active-bg, rgb(36 36 36)) !important;
 }
 
 /* Focused: soft blue */
 .tree-item-active:focus {
-  background-color: var(--tree-connection-active-focus-bg, oklch(0.91 0.03 250)) !important;
+  background-color: var(--tree-connection-active-focus-bg, rgb(211 227 245)) !important;
 }
 :root.dark .tree-item-active:focus {
-  background-color: var(--tree-connection-active-focus-bg, oklch(0.35 0.06 250)) !important;
+  background-color: var(--tree-connection-active-focus-bg, rgb(33 60 89)) !important;
 }
 
 /* Locate highlight: instant amber, then fade on removal */
 .tree-item-highlight {
+  background-color: rgb(253 225 167) !important;
   background-color: oklch(0.92 0.08 85) !important;
   transition: background-color 0.8s ease-out 0.6s;
 }
 
 :root.dark .tree-item-highlight {
+  background-color: rgb(110 67 0) !important;
   background-color: oklch(0.42 0.12 80) !important;
   transition: background-color 0.8s ease-out 0.6s;
 }

apps/desktop/src/composables/useCellDetailEditor.ts

@@ -16,6 +16,7 @@ import { bracketMatching } from "@codemirror/language";
 import {
   EDITOR_FONT_FAMILY_CSS_VAR,
   EDITOR_FONT_SIZE_CSS_VAR,
+  cellDetailActiveLineColor,
   loadEditorTheme,
   editorFontTheme,
 } from "@/lib/editorThemes";
@@ -196,7 +197,7 @@ export function useCellDetailEditor(options: UseCellDetailEditorOptions): UseCel
         highlightActiveLine(),
         EditorView.theme({
           ".cm-activeLine": {
-            backgroundColor: "color-mix(in oklch, var(--foreground) 4%, transparent)",
+            backgroundColor: cellDetailActiveLineColor(),
           },
         }),
         EditorState.allowMultipleSelections.of(true),

apps/desktop/src/lib/dataGridPaintTheme.ts

@@ -34,6 +34,24 @@ export const DATA_GRID_DARK_SEARCH_COLORS = {
   currentBorder: "rgb(239 177 0)",
 } as const;
 export const DATA_GRID_DARK_ROW_NUMBER_BG = "rgb(35 37 42)";
+const DATA_GRID_DARK_ROW_NUMBER_NEW_BG = "rgb(33 45 40)";
+const DATA_GRID_DARK_ROW_NUMBER_EDITED_BG = "rgb(48 41 28)";
+const DATA_GRID_DARK_ROW_NUMBER_DELETED_BG = "rgb(55 31 32)";
+const DATA_GRID_LIGHT_ROW_NUMBER_NEW_BG = "rgb(219 244 233)";
+const DATA_GRID_LIGHT_ROW_NUMBER_EDITED_BG = "rgb(253 241 219)";
+const DATA_GRID_LIGHT_ROW_NUMBER_DELETED_BG = "rgb(255 244 244)";
+const SUPPORTS_COLOR_MIX =
+  typeof CSS !== "undefined" &&
+  typeof CSS.supports === "function" &&
+  CSS.supports("color", "color-mix(in oklab, black 50%, white)");
+const SUPPORTS_OKLCH =
+  typeof CSS !== "undefined" &&
+  typeof CSS.supports === "function" &&
+  CSS.supports("color", "oklch(0.845 0.143 164.978)");
+
+function colorValue(fallback: string, preferred: string, supported: boolean): string {
+  return supported ? preferred : fallback;
+}
 
 export function cssVarColor(getVar: (name: string) => string, name: string, fallback: string): string {
   const value = getVar(name).trim();
@@ -64,39 +82,75 @@ export function resolveDataGridPaintTheme(options: {
   isDark: boolean;
 }): DataGridPaintTheme {
   const { getVar, isDark } = options;
-  const background = cssVarColor(getVar, "--background", isDark ? "oklch(0.19 0.004 285)" : "oklch(1 0 0)");
-  const foreground = cssVarColor(getVar, "--foreground", isDark ? "oklch(0.88 0.006 285)" : "oklch(0.145 0 0)");
-  const mutedForeground = cssVarColor(
-    getVar,
-    "--muted-foreground",
-    isDark ? "oklch(0.68 0.008 285)" : "oklch(0.556 0 0)",
+  const background = cssVarColor(getVar, "--background", isDark ? "rgb(19 20 22)" : "rgb(255 255 255)");
+  const foreground = cssVarColor(getVar, "--foreground", isDark ? "rgb(215 215 219)" : "rgb(10 10 10)");
+  const mutedForeground = cssVarColor(getVar, "--muted-foreground", isDark ? "rgb(151 152 157)" : "rgb(115 115 115)");
+  const primary = cssVarColor(getVar, "--primary", isDark ? "rgb(208 208 214)" : "rgb(23 23 23)");
+  const destructive = cssVarColor(getVar, "--destructive", isDark ? "rgb(243 98 95)" : "rgb(231 0 11)");
+  const accent = cssVarColor(getVar, "--accent", isDark ? "rgb(46 47 51)" : "rgb(245 245 245)");
+  const activeSurface = isDark
+    ? "rgb(64 64 64)"
+    : colorValue("rgb(232 232 232)", `color-mix(in oklab, ${primary} 10%, ${background})`, SUPPORTS_COLOR_MIX);
+  const rowMuted = colorValue(
+    isDark ? "rgb(32 32 34)" : "rgb(248 248 248)",
+    `color-mix(in oklab, ${cssVarColor(getVar, "--muted", isDark ? "rgb(42 42 45)" : "rgb(245 245 245)")} 30%, transparent)`,
+    SUPPORTS_COLOR_MIX,
+  );
+  const rowNew = colorValue(
+    isDark ? "rgb(51 51 55)" : "rgb(243 243 243)",
+    `color-mix(in oklab, ${primary} 5%, transparent)`,
+    SUPPORTS_COLOR_MIX,
+  );
+  const rowDeleted = colorValue(
+    isDark ? "rgb(55 31 32)" : "rgb(255 244 244)",
+    `color-mix(in oklab, ${destructive} 5%, transparent)`,
+    SUPPORTS_COLOR_MIX,
   );
-  const primary = cssVarColor(getVar, "--primary", isDark ? "oklch(0.86 0.008 285)" : "oklch(0.205 0 0)");
-  const muted = cssVarColor(getVar, "--muted", isDark ? "oklch(0.285 0.006 285)" : "oklch(0.97 0 0)");
-  const destructive = cssVarColor(getVar, "--destructive", "oklch(0.6 0.22 25)");
-  const accent = cssVarColor(getVar, "--accent", isDark ? "oklch(0.269 0 0)" : "oklch(0.97 0 0)");
-  const yellow500 = "oklch(0.795 0.184 86.047)";
-  const activeSurface = isDark ? "rgb(64 64 64)" : `color-mix(in oklab, ${primary} 10%, ${background})`;
-  const rowMuted = `color-mix(in oklab, ${muted} 30%, transparent)`;
-  const rowNew = `color-mix(in oklab, ${primary} 5%, transparent)`;
-  const rowDeleted = `color-mix(in oklab, ${destructive} 5%, transparent)`;
   const cellActive = activeSurface;
-  const cellDirty = `color-mix(in oklab, ${yellow500} 10%, transparent)`;
-  const cellSelected = `color-mix(in oklab, ${primary} 25%, transparent)`;
-  const cellSelectedDirty = `color-mix(in oklab, oklch(0.8 0.15 85) 30%, color-mix(in oklab, ${primary} 18%, transparent))`;
-  const cellSelectedBorder = `color-mix(in oklab, ${primary} 70%, transparent)`;
-  const cellHover = `color-mix(in oklab, ${accent} 50%, transparent)`;
+  const cellDirty = colorValue(
+    isDark ? "rgb(94 75 26)" : "rgb(255 248 230)",
+    `color-mix(in oklab, ${colorValue("rgb(240 177 0)", "oklch(0.795 0.184 86.047)", SUPPORTS_OKLCH)} 10%, transparent)`,
+    SUPPORTS_COLOR_MIX,
+  );
+  const cellSelected = colorValue(
+    isDark ? "rgb(66 67 70)" : "rgb(226 226 226)",
+    `color-mix(in oklab, ${primary} 25%, transparent)`,
+    SUPPORTS_COLOR_MIX,
+  );
+  const cellSelectedDirty = colorValue(
+    isDark ? "rgb(94 75 26)" : "rgb(244 229 186)",
+    `color-mix(in oklab, ${colorValue("rgb(234 181 50)", "oklch(0.8 0.15 85)", SUPPORTS_OKLCH)} 30%, color-mix(in oklab, ${primary} 18%, transparent))`,
+    SUPPORTS_COLOR_MIX,
+  );
+  const cellSelectedBorder = colorValue(
+    isDark ? "rgb(170 170 175)" : "rgb(90 90 90)",
+    `color-mix(in oklab, ${primary} 70%, transparent)`,
+    SUPPORTS_COLOR_MIX,
+  );
+  const cellHover = colorValue(accent, `color-mix(in oklab, ${accent} 50%, transparent)`, SUPPORTS_COLOR_MIX);
   const cellSearch = isDark ? DATA_GRID_DARK_SEARCH_COLORS.match : "rgb(253 245 184)";
   const cellCurrentSearch = isDark ? DATA_GRID_DARK_SEARCH_COLORS.current : "rgb(253 224 71 / 52%)";
   const cellCurrentSearchBorder = isDark ? DATA_GRID_DARK_SEARCH_COLORS.currentBorder : "rgb(234 179 8 / 82%)";
   const rowNumberDefault = isDark
     ? DATA_GRID_DARK_ROW_NUMBER_BG
     : paintToken(getVar, "--data-grid-row-number-default-bg", "rgb(255 255 255)");
-  const rowNumberNew = `color-mix(in oklab, rgb(16 185 129) 15%, ${background})`;
-  const rowNumberEdited = `color-mix(in oklab, rgb(245 158 11) 15%, ${background})`;
-  const rowNumberDeleted = `color-mix(in oklab, ${destructive} 15%, ${background})`;
+  const rowNumberNew = colorValue(
+    isDark ? DATA_GRID_DARK_ROW_NUMBER_NEW_BG : DATA_GRID_LIGHT_ROW_NUMBER_NEW_BG,
+    `color-mix(in oklab, rgb(16 185 129) 15%, ${background})`,
+    SUPPORTS_COLOR_MIX,
+  );
+  const rowNumberEdited = colorValue(
+    isDark ? DATA_GRID_DARK_ROW_NUMBER_EDITED_BG : DATA_GRID_LIGHT_ROW_NUMBER_EDITED_BG,
+    `color-mix(in oklab, rgb(245 158 11) 15%, ${background})`,
+    SUPPORTS_COLOR_MIX,
+  );
+  const rowNumberDeleted = colorValue(
+    isDark ? DATA_GRID_DARK_ROW_NUMBER_DELETED_BG : DATA_GRID_LIGHT_ROW_NUMBER_DELETED_BG,
+    `color-mix(in oklab, ${destructive} 15%, ${background})`,
+    SUPPORTS_COLOR_MIX,
+  );
   const rowNumberActive = activeSurface;
-  const rowNumberSelected = `color-mix(in oklab, ${primary} 25%, ${background})`;
+  const rowNumberSelected = cellSelected;
 
   return {
     background,
@@ -123,8 +177,16 @@ export function resolveDataGridPaintTheme(options: {
     rowNumberActive: paintToken(getVar, "--data-grid-row-number-active-bg", rowNumberActive),
     rowNumberSelected: paintToken(getVar, "--data-grid-row-number-selected-bg", rowNumberSelected),
     rowNumberTextClean: mutedForeground,
-    rowNumberTextNew: isDark ? "oklch(0.845 0.143 164.978)" : "oklch(0.508 0.118 165.612)",
-    rowNumberTextEdited: isDark ? "oklch(0.879 0.169 91.605)" : "oklch(0.555 0.163 48.998)",
+    rowNumberTextNew: colorValue(
+      isDark ? "rgb(94 233 181)" : "rgb(0 122 85)",
+      isDark ? "oklch(0.845 0.143 164.978)" : "oklch(0.508 0.118 165.612)",
+      SUPPORTS_OKLCH,
+    ),
+    rowNumberTextEdited: colorValue(
+      isDark ? "rgb(255 210 48)" : "rgb(187 77 0)",
+      isDark ? "oklch(0.879 0.169 91.605)" : "oklch(0.555 0.163 48.998)",
+      SUPPORTS_OKLCH,
+    ),
     rowNumberTextDeleted: destructive,
   };
 }

apps/desktop/src/lib/editorThemes.ts

@@ -8,6 +8,13 @@ type LucideIconNode = Array<[string, Record<string, string>]>;
 export const EDITOR_FONT_SIZE_CSS_VAR = "--dbx-editor-font-size";
 export const EDITOR_FONT_FAMILY_CSS_VAR = "--dbx-editor-font-family";
 
+const SUPPORTS_COLOR_MIX =
+  typeof CSS !== "undefined" &&
+  typeof CSS.supports === "function" &&
+  CSS.supports("color", "color-mix(in oklch, black 50%, white)");
+const SUPPORTS_OKLCH =
+  typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("color", "oklch(0.62 0.19 255)");
+
 const TABLE_ICON: LucideIconNode = [
   ["path", { d: "M12 3v18" }],
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }],
@@ -59,6 +66,18 @@ function lucideCompletionIconMask(iconNode: LucideIconNode) {
   };
 }
 
+function colorMixValue(fallback: string, preferred: string): string {
+  return SUPPORTS_COLOR_MIX ? preferred : fallback;
+}
+
+function oklchValue(fallback: string, preferred: string): string {
+  return SUPPORTS_OKLCH ? preferred : fallback;
+}
+
+export function cellDetailActiveLineColor(): string {
+  return colorMixValue("var(--accent)", "color-mix(in oklch, var(--foreground) 4%, transparent)");
+}
+
 /** Load a CodeMirror theme extension by theme name. */
 export function resolveEditorTheme(theme: EditorTheme, appAppearance: AppThemeAppearance): Exclude<EditorTheme, "app"> {
   if (theme === "app") return appAppearance === "dark" ? "one-dark" : "vscode-light";
@@ -164,7 +183,10 @@ export function buildSqlCompletionThemeRules(): CodeMirrorStyleSpec {
   return {
     ".cm-tooltip.cm-tooltip-autocomplete": {
       background: "var(--popover)",
-      border: "1px solid color-mix(in oklch, var(--border) 82%, var(--foreground) 18%)",
+      border: colorMixValue(
+        "1px solid var(--border)",
+        "1px solid color-mix(in oklch, var(--border) 82%, var(--foreground) 18%)",
+      ),
       borderRadius: "8px",
       boxShadow: "0 8px 18px rgb(0 0 0 / 0.14)",
       color: "var(--popover-foreground)",
@@ -178,7 +200,10 @@ export function buildSqlCompletionThemeRules(): CodeMirrorStyleSpec {
       maxHeight: "min(280px, calc(100vh - 32px))",
       minWidth: "min(280px, calc(100vw - 24px))",
       padding: "0 4px 0 !important",
-      scrollbarColor: "color-mix(in oklch, var(--muted-foreground) 44%, transparent) transparent",
+      scrollbarColor: colorMixValue(
+        "var(--muted-foreground) transparent",
+        "color-mix(in oklch, var(--muted-foreground) 44%, transparent) transparent",
+      ),
       scrollbarWidth: "thin",
     },
     ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {
@@ -195,9 +220,12 @@ export function buildSqlCompletionThemeRules(): CodeMirrorStyleSpec {
       transition: "background-color 90ms ease, color 90ms ease",
     },
     ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {
-      background: "color-mix(in oklch, var(--primary) 14%, var(--popover)) !important",
+      background: `${colorMixValue("var(--accent)", "color-mix(in oklch, var(--primary) 14%, var(--popover))")} !important`,
       color: "var(--popover-foreground) !important",
-      outline: "1px solid color-mix(in oklch, var(--primary) 22%, transparent)",
+      outline: colorMixValue(
+        "1px solid var(--border)",
+        "1px solid color-mix(in oklch, var(--primary) 22%, transparent)",
+      ),
     },
     ".cm-completionIcon": {
       alignItems: "center",
@@ -232,27 +260,42 @@ export function buildSqlCompletionThemeRules(): CodeMirrorStyleSpec {
       display: "none",
     },
     ".cm-completionIcon-table": {
-      color: "color-mix(in oklch, var(--primary) 92%, var(--popover-foreground))",
+      color: colorMixValue("var(--primary)", "color-mix(in oklch, var(--primary) 92%, var(--popover-foreground))"),
       ...lucideCompletionIconMask(TABLE_ICON),
     },
     ".cm-completionIcon-column": {
-      color: "color-mix(in oklch, var(--blue-500, #3b82f6) 92%, var(--popover-foreground))",
+      color: colorMixValue(
+        "var(--blue-500, #3b82f6)",
+        "color-mix(in oklch, var(--blue-500, #3b82f6) 92%, var(--popover-foreground))",
+      ),
       ...lucideCompletionIconMask(COLUMNS_ICON),
     },
     ".cm-completionIcon-keyword": {
-      color: "color-mix(in oklch, var(--orange-500, #f97316) 92%, var(--popover-foreground))",
+      color: colorMixValue(
+        "var(--orange-500, #f97316)",
+        "color-mix(in oklch, var(--orange-500, #f97316) 92%, var(--popover-foreground))",
+      ),
       ...lucideCompletionIconMask(KEYWORD_ICON),
     },
     ".cm-completionIcon-snippet": {
-      color: "color-mix(in oklch, var(--violet-500, #8b5cf6) 92%, var(--popover-foreground))",
+      color: colorMixValue(
+        "var(--violet-500, #8b5cf6)",
+        "color-mix(in oklch, var(--violet-500, #8b5cf6) 92%, var(--popover-foreground))",
+      ),
       ...lucideCompletionIconMask(SNIPPET_ICON),
     },
     ".cm-completionIcon-function": {
-      color: "color-mix(in oklch, var(--emerald-500, #10b981) 92%, var(--popover-foreground))",
+      color: colorMixValue(
+        "var(--emerald-500, #10b981)",
+        "color-mix(in oklch, var(--emerald-500, #10b981) 92%, var(--popover-foreground))",
+      ),
       ...lucideCompletionIconMask(FUNCTION_ICON),
     },
     ".cm-completionIcon-schema": {
-      color: "color-mix(in oklch, var(--amber-500, #f59e0b) 92%, var(--popover-foreground))",
+      color: colorMixValue(
+        "var(--amber-500, #f59e0b)",
+        "color-mix(in oklch, var(--amber-500, #f59e0b) 92%, var(--popover-foreground))",
+      ),
       ...lucideCompletionIconMask(SCHEMA_ICON),
     },
     ".cm-completionLabel": {
@@ -263,12 +306,15 @@ export function buildSqlCompletionThemeRules(): CodeMirrorStyleSpec {
       letterSpacing: "0",
     },
     ".cm-completionMatchedText": {
-      color: "oklch(0.62 0.19 255)",
+      color: oklchValue("rgb(29 132 245)", "oklch(0.62 0.19 255)"),
       fontWeight: "700",
       textDecoration: "none",
     },
     ".cm-completionDetail": {
-      color: "color-mix(in oklch, var(--popover-foreground) 68%, var(--popover))",
+      color: colorMixValue(
+        "var(--muted-foreground)",
+        "color-mix(in oklch, var(--popover-foreground) 68%, var(--popover))",
+      ),
       fontSize: `clamp(11px, calc(var(${EDITOR_FONT_SIZE_CSS_VAR}, 13px) - 1px), 13px)`,
       fontWeight: "500",
       fontStyle: "normal",

apps/desktop/src/styles/globals.css

@@ -95,72 +95,142 @@
 }
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
+  --background: rgb(255 255 255);
+  --foreground: rgb(10 10 10);
+  --card: rgb(255 255 255);
+  --card-foreground: rgb(10 10 10);
+  --popover: rgb(255 255 255);
+  --popover-foreground: rgb(10 10 10);
+  --primary: rgb(23 23 23);
+  --primary-foreground: rgb(250 250 250);
+  --secondary: rgb(245 245 245);
+  --secondary-foreground: rgb(23 23 23);
+  --muted: rgb(245 245 245);
+  --muted-foreground: rgb(115 115 115);
+  --accent: rgb(245 245 245);
+  --accent-foreground: rgb(23 23 23);
+  --destructive: rgb(231 0 11);
+  --border: rgb(229 229 229);
+  --input: rgb(229 229 229);
+  --ring: rgb(161 161 161);
+  --chart-1: rgb(212 212 212);
+  --chart-2: rgb(115 115 115);
+  --chart-3: rgb(82 82 82);
+  --chart-4: rgb(64 64 64);
+  --chart-5: rgb(38 38 38);
   --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar: rgb(250 250 250);
+  --sidebar-foreground: rgb(10 10 10);
+  --sidebar-primary: rgb(23 23 23);
+  --sidebar-primary-foreground: rgb(250 250 250);
+  --sidebar-accent: rgb(245 245 245);
+  --sidebar-accent-foreground: rgb(23 23 23);
+  --sidebar-border: rgb(229 229 229);
+  --sidebar-ring: rgb(161 161 161);
 }
 
 .dark {
-  --background: oklch(0.19 0.004 285);
-  --foreground: oklch(0.88 0.006 285);
-  --card: oklch(0.225 0.005 285);
-  --card-foreground: oklch(0.88 0.006 285);
-  --popover: oklch(0.235 0.005 285);
-  --popover-foreground: oklch(0.89 0.006 285);
-  --primary: oklch(0.86 0.008 285);
-  --primary-foreground: oklch(0.19 0.004 285);
-  --secondary: oklch(0.285 0.006 285);
-  --secondary-foreground: oklch(0.88 0.006 285);
-  --muted: oklch(0.285 0.006 285);
-  --muted-foreground: oklch(0.68 0.008 285);
-  --accent: oklch(0.305 0.008 285);
-  --accent-foreground: oklch(0.9 0.006 285);
-  --destructive: oklch(0.68 0.18 24);
-  --border: oklch(0.54 0.006 285 / 28%);
-  --input: oklch(0.54 0.006 285 / 34%);
-  --ring: oklch(0.62 0.008 285);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --sidebar: oklch(0.215 0.005 285);
-  --sidebar-foreground: oklch(0.86 0.006 285);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.94 0.006 285);
-  --sidebar-accent: oklch(0.295 0.006 285);
-  --sidebar-accent-foreground: oklch(0.9 0.006 285);
-  --sidebar-border: oklch(0.54 0.006 285 / 28%);
-  --sidebar-ring: oklch(0.62 0.008 285);
+  --background: rgb(19 20 22);
+  --foreground: rgb(215 215 219);
+  --card: rgb(27 27 30);
+  --card-foreground: rgb(215 215 219);
+  --popover: rgb(30 30 32);
+  --popover-foreground: rgb(221 221 226);
+  --primary: rgb(208 208 214);
+  --primary-foreground: rgb(19 20 22);
+  --secondary: rgb(42 42 45);
+  --secondary-foreground: rgb(215 215 219);
+  --muted: rgb(42 42 45);
+  --muted-foreground: rgb(151 152 157);
+  --accent: rgb(46 47 51);
+  --accent-foreground: rgb(221 221 226);
+  --destructive: rgb(243 98 95);
+  --border: rgb(110 110 114 / 0.28);
+  --input: rgb(110 110 114 / 0.34);
+  --ring: rgb(133 134 139);
+  --chart-1: rgb(212 212 212);
+  --chart-2: rgb(115 115 115);
+  --chart-3: rgb(82 82 82);
+  --chart-4: rgb(64 64 64);
+  --chart-5: rgb(38 38 38);
+  --sidebar: rgb(25 25 28);
+  --sidebar-foreground: rgb(208 208 213);
+  --sidebar-primary: rgb(20 71 230);
+  --sidebar-primary-foreground: rgb(234 235 239);
+  --sidebar-accent: rgb(44 44 48);
+  --sidebar-accent-foreground: rgb(221 221 226);
+  --sidebar-border: rgb(110 110 114 / 0.28);
+  --sidebar-ring: rgb(133 134 139);
+}
+
+@supports (color: oklch(1 0 0)) {
+  :root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+  }
+
+  .dark {
+    --background: oklch(0.19 0.004 285);
+    --foreground: oklch(0.88 0.006 285);
+    --card: oklch(0.225 0.005 285);
+    --card-foreground: oklch(0.88 0.006 285);
+    --popover: oklch(0.235 0.005 285);
+    --popover-foreground: oklch(0.89 0.006 285);
+    --primary: oklch(0.86 0.008 285);
+    --primary-foreground: oklch(0.19 0.004 285);
+    --secondary: oklch(0.285 0.006 285);
+    --secondary-foreground: oklch(0.88 0.006 285);
+    --muted: oklch(0.285 0.006 285);
+    --muted-foreground: oklch(0.68 0.008 285);
+    --accent: oklch(0.305 0.008 285);
+    --accent-foreground: oklch(0.9 0.006 285);
+    --destructive: oklch(0.68 0.18 24);
+    --border: oklch(0.54 0.006 285 / 28%);
+    --input: oklch(0.54 0.006 285 / 34%);
+    --ring: oklch(0.62 0.008 285);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.215 0.005 285);
+    --sidebar-foreground: oklch(0.86 0.006 285);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.94 0.006 285);
+    --sidebar-accent: oklch(0.295 0.006 285);
+    --sidebar-accent-foreground: oklch(0.9 0.006 285);
+    --sidebar-border: oklch(0.54 0.006 285 / 28%);
+    --sidebar-ring: oklch(0.62 0.008 285);
+  }
 }
 
 html.disable-transitions,
@@ -231,14 +301,17 @@ body.dbx-table-reference-dragging * {
   cursor: row-resize;
 }
 .splitpanes__splitter:hover {
+  background: rgb(39 132 213) !important;
   background: oklch(0.6 0.15 250) !important;
 }
 
 /* Panel resize handles */
 .app-panel-gutter {
+  background: rgb(243 243 243);
   background: oklch(0.965 0 0);
 }
 .dark .app-panel-gutter {
+  background: rgb(23 23 25);
   background: oklch(0.205 0.004 285);
 }
 .app-layout-classic .panel-resize-handle {
@@ -254,6 +327,7 @@ body.dbx-table-reference-dragging * {
 }
 .app-layout-classic .panel-resize-handle:hover,
 .app-layout-classic .panel-resize-handle:active {
+  background: rgb(39 132 213);
   background: oklch(0.6 0.15 250);
 }
 
@@ -280,12 +354,16 @@ body.dbx-table-reference-dragging * {
 .cn-menu-translucent {
   backdrop-filter: blur(16px) saturate(1.6) !important;
   -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
+  background-color: rgb(255 255 255 / 0.95) !important;
   background-color: oklch(1 0 0 / 0.95) !important;
   box-shadow: none !important;
+  border: 0.5px solid rgb(0 0 0 / 0.12) !important;
   border: 0.5px solid oklch(0 0 0 / 0.12) !important;
   --tw-ring-shadow: none !important;
 }
 .dark .cn-menu-translucent {
+  background-color: rgb(23 23 23 / 0.82) !important;
   background-color: oklch(0.205 0 0 / 0.82) !important;
+  border-color: rgb(255 255 255 / 0.1) !important;
   border-color: oklch(1 0 0 / 0.1) !important;
 }