Add ability to separately set background color for highlighted bracke…

…ts (#17566)

Closes #16380

Currently brackets are highlighted with
`editor.document_highlight.read_background`. This commit adds a separate
`editor.document_highlight.bracket_background` theme setting so bracket
highlights can be made more prominent without doing the same to other
highlights, making the display too busy.

(My own theme)


https://github.com/user-attachments/assets/29a8c05e-2f1a-4c16-9be8-a4b4cb143548

I set defaults for light and dark theme that I hope are sensible and not
too obnoxious, but noticeable so people can change it if they don't like
it.

Release Notes:

- Added `editor.document_highlight.bracket_background` field to the
theme to set background color of highlighted brackets.
- This will fall back to `editor.document_highlight.read_background`, if
not set.

<img width="355" alt="Screenshot 2024-09-08 at 8 46 57 AM"
src="https://github.com/user-attachments/assets/3270bb4d-19f5-4b34-8003-982377b2ceb6">
<img width="444" alt="Screenshot 2024-09-08 at 9 03 27 AM"
src="https://github.com/user-attachments/assets/3b12d84d-913c-4bde-9132-9b10f4a8d49b">

---------

Co-authored-by: Marshall Bowers <elliott.codes@gmail.com>

crates/editor/src/highlight_matching_bracket.rs

@@ -32,7 +32,7 @@ pub fn refresh_matching_bracket_highlights(editor: &mut Editor, cx: &mut ViewCon
                 opening_range.to_anchors(&snapshot.buffer_snapshot),
                 closing_range.to_anchors(&snapshot.buffer_snapshot),
             ],
-            |theme| theme.editor_document_highlight_read_background,
+            |theme| theme.editor_document_highlight_bracket_background,
             cx,
         )
     }

crates/theme/src/default_colors.rs

@@ -80,6 +80,7 @@ impl ThemeColors {
             editor_indent_guide_active: neutral().light_alpha().step_6(),
             editor_document_highlight_read_background: neutral().light_alpha().step_3(),
             editor_document_highlight_write_background: neutral().light_alpha().step_4(),
+            editor_document_highlight_bracket_background: green().light_alpha().step_5(),
             terminal_background: neutral().light().step_1(),
             terminal_foreground: black().light().step_12(),
             terminal_bright_foreground: black().light().step_11(),
@@ -179,6 +180,7 @@ impl ThemeColors {
             editor_indent_guide_active: neutral().dark_alpha().step_6(),
             editor_document_highlight_read_background: neutral().dark_alpha().step_4(),
             editor_document_highlight_write_background: neutral().dark_alpha().step_4(),
+            editor_document_highlight_bracket_background: green().dark_alpha().step_6(),
             terminal_background: neutral().dark().step_1(),
             terminal_ansi_background: neutral().dark().step_1(),
             terminal_foreground: white().dark().step_12(),

crates/theme/src/one_themes.rs

@@ -102,6 +102,7 @@ pub(crate) fn one_dark() -> Theme {
                     0.2,
                 ),
                 editor_document_highlight_write_background: gpui::red(),
+                editor_document_highlight_bracket_background: gpui::green(),
 
                 terminal_background: bg,
                 // todo("Use one colors for terminal")

crates/theme/src/schema.rs

@@ -413,6 +413,12 @@ pub struct ThemeColorsContent {
     #[serde(rename = "editor.document_highlight.write_background")]
     pub editor_document_highlight_write_background: Option<String>,
 
+    /// Highlighted brackets background color.
+    ///
+    /// Matching brackets in the cursor scope are highlighted with this background color.
+    #[serde(rename = "editor.document_highlight.bracket_background")]
+    pub editor_document_highlight_bracket_background: Option<String>,
+
     /// Terminal background color.
     #[serde(rename = "terminal.background")]
     pub terminal_background: Option<String>,
@@ -540,6 +546,10 @@ impl ThemeColorsContent {
             .border
             .as_ref()
             .and_then(|color| try_parse_color(color).ok());
+        let editor_document_highlight_read_background = self
+            .editor_document_highlight_read_background
+            .as_ref()
+            .and_then(|color| try_parse_color(color).ok());
         ThemeColorsRefinement {
             border,
             border_variant: self
@@ -784,14 +794,17 @@ impl ThemeColorsContent {
                 .editor_indent_guide_active
                 .as_ref()
                 .and_then(|color| try_parse_color(color).ok()),
-            editor_document_highlight_read_background: self
-                .editor_document_highlight_read_background
-                .as_ref()
-                .and_then(|color| try_parse_color(color).ok()),
+            editor_document_highlight_read_background,
             editor_document_highlight_write_background: self
                 .editor_document_highlight_write_background
                 .as_ref()
                 .and_then(|color| try_parse_color(color).ok()),
+            editor_document_highlight_bracket_background: self
+                .editor_document_highlight_bracket_background
+                .as_ref()
+                .and_then(|color| try_parse_color(color).ok())
+                // Fall back to `editor.document_highlight.read_background`, for backwards compatibility.
+                .or(editor_document_highlight_read_background),
             terminal_background: self
                 .terminal_background
                 .as_ref()

crates/theme/src/styles/colors.rs

@@ -171,6 +171,10 @@ pub struct ThemeColors {
     /// special attention. Usually a document highlight is visualized by changing
     /// the background color of its range.
     pub editor_document_highlight_write_background: Hsla,
+    /// Highlighted brackets background color.
+    ///
+    /// Matching brackets in the cursor scope are highlighted with this background color.
+    pub editor_document_highlight_bracket_background: Hsla,
 
     // ===
     // Terminal