diff --git a/apps/desktop/src/lib/__tests__/editorThemes.spec.ts b/apps/desktop/src/lib/__tests__/editorThemes.spec.ts index 2bf94bb2c0..731336511e 100644 --- a/apps/desktop/src/lib/__tests__/editorThemes.spec.ts +++ b/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(); diff --git a/apps/desktop/src/lib/editor/editorThemes.ts b/apps/desktop/src/lib/editor/editorThemes.ts index ddc1c7961a..1bf68ef369 100644 --- a/apps/desktop/src/lib/editor/editorThemes.ts +++ b/apps/desktop/src/lib/editor/editorThemes.ts @@ -68,12 +68,20 @@ const customThemeColors = { invalid: "#f38ba8", // 无效字符 }; +export function resolveCustomThemeBackgrounds(colors?: Pick, 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) {