Merge pull request #8762 from weseek/fix/145247-material-nord-active-line

fix: Editor theme active line (material, nord)

packages/editor/src/services/editor-theme/material.ts

@@ -35,6 +35,8 @@ const tooltipBackground = base01;
 const selection = base01;
 // Change color
 const cursor = base05;
+// Create New color
+const activeLineBackground = '#00000020';
 
 // / The editor theme styles for Material Dark.
 export const materialDarkTheme = EditorView.theme(
@@ -64,7 +66,8 @@ export const materialDarkTheme = EditorView.theme(
       backgroundColor: highlightBackground,
     },
 
-    '.cm-activeLine': { backgroundColor: highlightBackground },
+    // Customize
+    '.cm-activeLine': { backgroundColor: activeLineBackground },
     '.cm-selectionMatch': {
       backgroundColor: darkBackground,
       outline: `1px solid ${base_teal}`,
@@ -85,8 +88,9 @@ export const materialDarkTheme = EditorView.theme(
       color: base02,
     },
 
+    // Customize
     '.cm-activeLineGutter': {
-      backgroundColor: highlightBackground,
+      backgroundColor: activeLineBackground,
       color: base07,
     },
 

packages/editor/src/services/editor-theme/nord.ts

@@ -33,13 +33,15 @@ const base0F = '#b48ead'; // purple
 
 const invalid = '#d30102';
 const darkBackground = '#252a33';
-// Cutomize
+// Customize
 const highlightBackground = base02;
 const background = base00;
 const tooltipBackground = base01;
 const selection = base03;
-// Cutomize
+// Customize
 const cursor = base06;
+// Create New color
+const activeLineBackground = '#00000020';
 
 // / The editor theme styles for Nord.
 export const nordTheme = EditorView.theme(
@@ -70,7 +72,8 @@ export const nordTheme = EditorView.theme(
       color: base00,
     },
 
-    '.cm-activeLine': { backgroundColor: highlightBackground },
+    // Custom
+    '.cm-activeLine': { backgroundColor: activeLineBackground },
     '.cm-selectionMatch': {
       backgroundColor: base05,
       color: base01,
@@ -82,7 +85,7 @@ export const nordTheme = EditorView.theme(
     },
 
     '&.cm-focused .cm-matchingBracket': {
-      // Cutomize
+      // Customize
       backgroundColor: base02,
       color: base02,
     },
@@ -93,8 +96,9 @@ export const nordTheme = EditorView.theme(
       border: 'none',
     },
 
+    // Custom
     '.cm-activeLineGutter': {
-      backgroundColor: highlightBackground,
+      backgroundColor: activeLineBackground,
       color: base04,
     },