fix(editor): apply custom background to gutters

Closes #850

apps/desktop/src/lib/__tests__/editorThemes.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { buildSqlCompletionThemeRules, resolveEditorTheme } from "@/lib/editor/editorThemes";
+import { buildSqlCompletionThemeRules, resolveCustomThemeBackgrounds, resolveEditorTheme } from "@/lib/editor/editorThemes";
 import type { AppThemePalette } from "@/lib/app/appTheme";
 import type { EditorTheme } from "@/stores/settingsStore";
 
@@ -44,6 +44,33 @@ describe("resolveEditorTheme", () => {
   });
 });
 
+describe("custom editor theme backgrounds", () => {
+  it("uses an explicit dark background for the editor and gutter", () => {
+    expect(resolveCustomThemeBackgrounds({ background: "#10131a" }, true)).toEqual({
+      background: "#10131a",
+      gutterBackground: "#10131a",
+    });
+  });
+
+  it("uses an explicit light background for the editor and gutter", () => {
+    expect(resolveCustomThemeBackgrounds({ background: "#f5f3ee" }, false)).toEqual({
+      background: "#f5f3ee",
+      gutterBackground: "#f5f3ee",
+    });
+  });
+
+  it("keeps the existing custom defaults when background is omitted", () => {
+    expect(resolveCustomThemeBackgrounds(undefined, true)).toEqual({
+      background: "#1e1e2e",
+      gutterBackground: "#181825",
+    });
+    expect(resolveCustomThemeBackgrounds(undefined, false)).toEqual({
+      background: "#fafafa",
+      gutterBackground: "#181825",
+    });
+  });
+});
+
 describe("SQL completion theme", () => {
   it("uses the configurable medium radius for the popup container", () => {
     const rules = buildSqlCompletionThemeRules();

apps/desktop/src/lib/editor/editorThemes.ts

@@ -68,12 +68,20 @@ const customThemeColors = {
   invalid: "#f38ba8", // 无效字符
 };
 
+export function resolveCustomThemeBackgrounds(colors?: Pick<CustomThemeColors, "background">, isDark: boolean = true): { background: string; gutterBackground: string } {
+  return {
+    background: colors?.background ?? (isDark ? "#1e1e2e" : "#fafafa"),
+    gutterBackground: colors?.background ?? customThemeColors.gutterBackground,
+  };
+}
+
 /** 创建自定义 CodeMirror 主题 */
 function createCustomTheme(EditorView: typeof import("@codemirror/view").EditorView, colors?: CustomThemeColors, isDark: boolean = true): Extension {
   // 根据系统主题设置默认背景色和前景色
-  const defaultColors = isDark ? { background: "#1e1e2e", foreground: "#cdd6f4" } : { background: "#fafafa", foreground: "#242424" };
+  const backgrounds = resolveCustomThemeBackgrounds(colors, isDark);
+  const defaultColors = { background: backgrounds.background, foreground: isDark ? "#cdd6f4" : "#242424" };
 
-  const c = { ...defaultColors, ...customThemeColors, ...colors };
+  const c = { ...defaultColors, ...customThemeColors, ...colors, gutterBackground: backgrounds.gutterBackground };
 
   // 映射用户自定义属性名到 CodeMirror 内部属性名
   if (colors) {