fix(editor): improve selection contrast on active lines (#2852)

Author: bajrangCoder

src/cm/themes/catppuccin.js

@@ -113,7 +113,8 @@ function createConfig(name, caption, palette) {
 		cursor: palette.rosewater,
 		dropdownBackground: palette.mantle,
 		dropdownBorder: palette.overlay0,
-		activeLine: palette.surface0,
+		// Keep this translucent: CodeMirror draws selections behind line backgrounds.
+		activeLine: `${palette.surface0}40`,
 		lineNumber: palette.subtext0,
 		lineNumberActive: palette.mauve,
 		matchingBracket: `${palette.surface2}47`,

src/cm/themes/tokyoNight.js

@@ -11,7 +11,8 @@ export const config = {
 	cursor: "#c0caf5",
 	dropdownBackground: "#1a1b26",
 	dropdownBorder: "#414868",
-	activeLine: "#24283b",
+	// Keep this translucent: CodeMirror draws selections behind line backgrounds.
+	activeLine: "#6a83ce20",
 	lineNumber: "#414868",
 	lineNumberActive: "#a9b1d6",
 	matchingBracket: "#24283b",

src/cm/themes/tomorrowNight.js

@@ -12,7 +12,8 @@ export const config = {
 	cursor: "#AEAFAD",
 	dropdownBackground: "#1D1F21",
 	dropdownBorder: "#4B4E55",
-	activeLine: "#282A2E",
+	// Keep this translucent: CodeMirror draws selections behind line backgrounds.
+	activeLine: "#75778920",
 	lineNumber: "#4B4E55",
 	lineNumberActive: "#C5C8C6",
 	matchingBracket: "#282A2E",

src/cm/themes/tomorrowNightBright.js

@@ -12,7 +12,8 @@ export const config = {
 	cursor: "#9F9F9F",
 	dropdownBackground: "#000000",
 	dropdownBorder: "#343434",
-	activeLine: "#2A2A2A",
+	// Keep this translucent: CodeMirror draws selections behind line backgrounds.
+	activeLine: "#D2D2D233",
 	lineNumber: "#343434",
 	lineNumberActive: "#DEDEDE",
 	matchingBracket: "#2A2A2A",

src/cm/themes/vscodeDark.js

@@ -12,7 +12,8 @@ export const config = {
 	cursor: "#c6c6c6",
 	dropdownBackground: "#202020",
 	dropdownBorder: "#454545",
-	activeLine: "#282828",
+	// Keep this translucent: CodeMirror draws selections behind line backgrounds.
+	activeLine: "#67676720",
 	lineNumber: "#6e7681",
 	lineNumberActive: "#cccccc",
 	matchingBracket: "#add6ff26",

tests/unit/editorThemes.test.js

@@ -61,4 +61,16 @@ describe("built-in editor themes", () => {
 			).not.toThrow();
 		}
 	});
+
+	it("keeps active-line backgrounds translucent so selections remain visible", () => {
+		for (const { id } of getThemes()) {
+			const activeLine = getThemeConfig(id).activeLine;
+			if (!activeLine) continue;
+
+			expect(activeLine, `${id} active line`).toMatch(/^#[\da-f]{8}$/i);
+			expect(Number.parseInt(activeLine.slice(-2), 16), `${id} active line`).toBeLessThan(
+				255,
+			);
+		}
+	});
 });