From 79ef52d4dac687d4bfb8f6cfb2220c68fe8fc92b Mon Sep 17 00:00:00 2001
From: Lois Wells <88904316+loiswells97@users.noreply.github.com>
Date: Mon, 9 Dec 2024 10:33:41 +0000
Subject: [PATCH] Fix dark mode selection highlighting (#1150)

- Fixed the selector specificity for selected text in the editor
- Toned down the match highlighting

### Before
![Screenshot 2024-12-05 at 14 31
10](https://github.com/user-attachments/assets/3a9fef84-8c1a-4884-a36e-9aae03fcf897)

### After
![Screenshot 2024-12-05 at 14 19
57](https://github.com/user-attachments/assets/c25aa412-8feb-4737-8295-05c7c2b6a8bd)
---
 CHANGELOG.md                         | 8 ++++++++
 src/assets/themes/editorDarkTheme.js | 7 +++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0ae5a7dca..05908fe2a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Fixed
+
+- Selected text background colour contrast in editor dark mode (#1150)
+
+### Changed
+
+- Toned down the match highlighting colour in editor dark mode (#1150)
+
 ## [0.28.11] - 2024-12-03
 
 ### Fixed
diff --git a/src/assets/themes/editorDarkTheme.js b/src/assets/themes/editorDarkTheme.js
index 04538e106..66ef7154e 100644
--- a/src/assets/themes/editorDarkTheme.js
+++ b/src/assets/themes/editorDarkTheme.js
@@ -17,8 +17,11 @@ export const editorDarkTheme = EditorView.theme(
       "background-color": "inherit",
       color: "inherit",
     },
-    "&.cm-focused .cm-selectionBackground, ::selection": {
-      background: "#144866",
+    "&.cm-focused.ͼ3 .cm-selectionLayer .cm-selectionBackground": {
+      backgroundColor: "#144866",
+    },
+    ".cm-selectionMatch": {
+      backgroundColor: "rgba(153, 255, 119, 0.2)",
     },
     "&.cm-focused .cm-cursor": {
       borderLeftColor: "white",