Style scrollbars with theme colors (#3588)

Marshall Bowers created

This PR updates the styling of scrollbars in the editor to use the theme
colors.

Release Notes:

- N/A

Change summary

crates/editor2/src/element.rs                 | 22 ++++----
crates/theme2/src/themes/andromeda.rs         | 10 +++
crates/theme2/src/themes/ayu.rs               | 15 +++++
crates/theme2/src/themes/gruvbox.rs           | 30 +++++++++++
crates/theme2/src/themes/night_owl.rs         |  7 ++
crates/theme2/src/themes/noctis.rs            | 55 +++++++++++++++++++++
crates/theme2/src/themes/nord.rs              |  5 +
crates/theme2/src/themes/palenight.rs         | 15 +++++
crates/theme2/src/themes/rose_pine.rs         | 15 +++++
crates/theme2/src/themes/synthwave_84.rs      |  5 +
crates/theme_importer/src/theme_printer.rs    | 14 +++++
crates/theme_importer/src/vscode/converter.rs | 18 ++++++
crates/theme_importer/src/vscode/theme.rs     | 28 ++++++++++
13 files changed, 228 insertions(+), 11 deletions(-)

Detailed changes

crates/editor2/src/element.rs 🔗

@@ -1276,9 +1276,9 @@ impl EditorElement {
             cx.paint_quad(
                 track_bounds,
                 Corners::default(),
-                gpui::blue(),        // todo!("style.track.background_color")
-                Edges::default(),    // todo!("style.track.border")
-                transparent_black(), // todo!("style.track.border")
+                cx.theme().colors().scrollbar_track_background,
+                Edges::default(), // todo!("style.track.border")
+                cx.theme().colors().scrollbar_track_border,
             );
             let scrollbar_settings = EditorSettings::get_global(cx).scrollbar;
             if layout.is_singleton && scrollbar_settings.selections {
@@ -1302,14 +1302,14 @@ impl EditorElement {
                     cx.paint_quad(
                         bounds,
                         Corners::default(),
-                        gpui::yellow(), // todo!("theme.editor.scrollbar")
+                        cx.theme().colors().scrollbar_thumb_background,
                         Edges {
                             top: Pixels::ZERO,
                             right: px(1.),
                             bottom: Pixels::ZERO,
                             left: px(1.),
                         },
-                        gpui::green(), // todo!("style.thumb.border.color")
+                        cx.theme().colors().scrollbar_thumb_border,
                     );
                 }
             }
@@ -1338,9 +1338,9 @@ impl EditorElement {
                     let bounds = Bounds::from_corners(point(left, start_y), point(right, end_y));
 
                     let color = match hunk.status() {
-                        DiffHunkStatus::Added => gpui::green(), // todo!("use the right color")
-                        DiffHunkStatus::Modified => gpui::yellow(), // todo!("use the right color")
-                        DiffHunkStatus::Removed => gpui::red(), // todo!("use the right color")
+                        DiffHunkStatus::Added => cx.theme().status().created,
+                        DiffHunkStatus::Modified => cx.theme().status().modified,
+                        DiffHunkStatus::Removed => cx.theme().status().deleted,
                     };
                     cx.paint_quad(
                         bounds,
@@ -1352,7 +1352,7 @@ impl EditorElement {
                             bottom: Pixels::ZERO,
                             left: px(1.),
                         },
-                        gpui::green(), // todo!("style.thumb.border.color")
+                        cx.theme().colors().scrollbar_thumb_border,
                     );
                 }
             }
@@ -1360,14 +1360,14 @@ impl EditorElement {
             cx.paint_quad(
                 thumb_bounds,
                 Corners::default(),
-                gpui::black(), // todo!("style.thumb.background_color")
+                cx.theme().colors().scrollbar_thumb_background,
                 Edges {
                     top: Pixels::ZERO,
                     right: px(1.),
                     bottom: Pixels::ZERO,
                     left: px(1.),
                 },
-                gpui::green(), // todo!("style.thumb.border.color")
+                cx.theme().colors().scrollbar_thumb_border,
             );
         }
 

crates/theme2/src/themes/andromeda.rs 🔗

@@ -41,6 +41,11 @@ pub fn andromeda() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x23262eff).into()),
                         tab_inactive_background: Some(rgba(0x23262eff).into()),
                         tab_active_background: Some(rgba(0x23262eff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x3a3f4c77).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x3a3f4caa).into()),
+                        scrollbar_thumb_border: Some(rgba(0x3a3f4c77).into()),
+                        scrollbar_track_background: Some(rgba(0x23262eff).into()),
+                        scrollbar_track_border: Some(rgba(0x23262eff).into()),
                         editor_background: Some(rgba(0x23262eff).into()),
                         editor_gutter_background: Some(rgba(0x23262eff).into()),
                         editor_line_number: Some(rgba(0x746f77ff).into()),
@@ -249,6 +254,11 @@ pub fn andromeda() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x23262eff).into()),
                         tab_inactive_background: Some(rgba(0x23262eff).into()),
                         tab_active_background: Some(rgba(0x262a33ff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x3a3f4c77).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x3a3f4caa).into()),
+                        scrollbar_thumb_border: Some(rgba(0x3a3f4c77).into()),
+                        scrollbar_track_background: Some(rgba(0x23262eff).into()),
+                        scrollbar_track_border: Some(rgba(0x23262eff).into()),
                         editor_background: Some(rgba(0x262a33ff).into()),
                         editor_gutter_background: Some(rgba(0x262a33ff).into()),
                         editor_line_number: Some(rgba(0x746f77ff).into()),

crates/theme2/src/themes/ayu.rs 🔗

@@ -40,6 +40,11 @@ pub fn ayu() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0xf8f9faff).into()),
                         tab_inactive_background: Some(rgba(0xf8f9faff).into()),
                         tab_active_background: Some(rgba(0xf8f9faff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x8a919966).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x8a919999).into()),
+                        scrollbar_thumb_border: Some(rgba(0x8a919966).into()),
+                        scrollbar_track_background: Some(rgba(0x6b7d8f00).into()),
+                        scrollbar_track_border: Some(rgba(0x6b7d8f00).into()),
                         editor_background: Some(rgba(0xf8f9faff).into()),
                         editor_gutter_background: Some(rgba(0xf8f9faff).into()),
                         editor_line_number: Some(rgba(0x8a919966).into()),
@@ -340,6 +345,11 @@ pub fn ayu() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x1f2430ff).into()),
                         tab_inactive_background: Some(rgba(0x1f2430ff).into()),
                         tab_active_background: Some(rgba(0x1f2430ff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x707a8c66).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x707a8c99).into()),
+                        scrollbar_thumb_border: Some(rgba(0x707a8c66).into()),
+                        scrollbar_track_background: Some(rgba(0x171b2400).into()),
+                        scrollbar_track_border: Some(rgba(0x171b2400).into()),
                         editor_background: Some(rgba(0x1f2430ff).into()),
                         editor_gutter_background: Some(rgba(0x1f2430ff).into()),
                         editor_line_number: Some(rgba(0x8a919966).into()),
@@ -640,6 +650,11 @@ pub fn ayu() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x0b0e14ff).into()),
                         tab_inactive_background: Some(rgba(0x0b0e14ff).into()),
                         tab_active_background: Some(rgba(0x0b0e14ff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x565b6666).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x565b6699).into()),
+                        scrollbar_thumb_border: Some(rgba(0x565b6666).into()),
+                        scrollbar_track_background: Some(rgba(0x1e232b00).into()),
+                        scrollbar_track_border: Some(rgba(0x1e232b00).into()),
                         editor_background: Some(rgba(0x0b0e14ff).into()),
                         editor_gutter_background: Some(rgba(0x0b0e14ff).into()),
                         editor_line_number: Some(rgba(0x6c738099).into()),

crates/theme2/src/themes/gruvbox.rs 🔗

@@ -40,6 +40,11 @@ pub fn gruvbox() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x1d2021ff).into()),
                         tab_inactive_background: Some(rgba(0x1d2021ff).into()),
                         tab_active_background: Some(rgba(0x32302fff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x50494599).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x665c54ff).into()),
+                        scrollbar_thumb_border: Some(rgba(0x50494599).into()),
+                        scrollbar_track_background: Some(rgba(0x1d2021ff).into()),
+                        scrollbar_track_border: Some(rgba(0x1d2021ff).into()),
                         editor_background: Some(rgba(0x1d2021ff).into()),
                         editor_gutter_background: Some(rgba(0x1d2021ff).into()),
                         editor_line_number: Some(rgba(0x665c54ff).into()),
@@ -326,6 +331,11 @@ pub fn gruvbox() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x282828ff).into()),
                         tab_inactive_background: Some(rgba(0x282828ff).into()),
                         tab_active_background: Some(rgba(0x3c3836ff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x50494599).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x665c54ff).into()),
+                        scrollbar_thumb_border: Some(rgba(0x50494599).into()),
+                        scrollbar_track_background: Some(rgba(0x282828ff).into()),
+                        scrollbar_track_border: Some(rgba(0x282828ff).into()),
                         editor_background: Some(rgba(0x282828ff).into()),
                         editor_gutter_background: Some(rgba(0x282828ff).into()),
                         editor_line_number: Some(rgba(0x665c54ff).into()),
@@ -612,6 +622,11 @@ pub fn gruvbox() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x32302fff).into()),
                         tab_inactive_background: Some(rgba(0x32302fff).into()),
                         tab_active_background: Some(rgba(0x504945ff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x50494599).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x665c54ff).into()),
+                        scrollbar_thumb_border: Some(rgba(0x50494599).into()),
+                        scrollbar_track_background: Some(rgba(0x32302fff).into()),
+                        scrollbar_track_border: Some(rgba(0x32302fff).into()),
                         editor_background: Some(rgba(0x32302fff).into()),
                         editor_gutter_background: Some(rgba(0x32302fff).into()),
                         editor_line_number: Some(rgba(0x665c54ff).into()),
@@ -898,6 +913,11 @@ pub fn gruvbox() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0xf9f5d7ff).into()),
                         tab_inactive_background: Some(rgba(0xf9f5d7ff).into()),
                         tab_active_background: Some(rgba(0xf2e5bcff).into()),
+                        scrollbar_thumb_background: Some(rgba(0xd5c4a199).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0xbdae93ff).into()),
+                        scrollbar_thumb_border: Some(rgba(0xd5c4a199).into()),
+                        scrollbar_track_background: Some(rgba(0xf9f5d7ff).into()),
+                        scrollbar_track_border: Some(rgba(0xf9f5d7ff).into()),
                         editor_background: Some(rgba(0xf9f5d7ff).into()),
                         editor_gutter_background: Some(rgba(0xf9f5d7ff).into()),
                         editor_line_number: Some(rgba(0xbdae93ff).into()),
@@ -1184,6 +1204,11 @@ pub fn gruvbox() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0xfbf1c7ff).into()),
                         tab_inactive_background: Some(rgba(0xfbf1c7ff).into()),
                         tab_active_background: Some(rgba(0xebdbb2ff).into()),
+                        scrollbar_thumb_background: Some(rgba(0xd5c4a199).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0xbdae93ff).into()),
+                        scrollbar_thumb_border: Some(rgba(0xd5c4a199).into()),
+                        scrollbar_track_background: Some(rgba(0xfbf1c7ff).into()),
+                        scrollbar_track_border: Some(rgba(0xfbf1c7ff).into()),
                         editor_background: Some(rgba(0xfbf1c7ff).into()),
                         editor_gutter_background: Some(rgba(0xfbf1c7ff).into()),
                         editor_line_number: Some(rgba(0xbdae93ff).into()),
@@ -1470,6 +1495,11 @@ pub fn gruvbox() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0xf2e5bcff).into()),
                         tab_inactive_background: Some(rgba(0xf2e5bcff).into()),
                         tab_active_background: Some(rgba(0xd5c4a1ff).into()),
+                        scrollbar_thumb_background: Some(rgba(0xd5c4a199).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0xbdae93ff).into()),
+                        scrollbar_thumb_border: Some(rgba(0xd5c4a199).into()),
+                        scrollbar_track_background: Some(rgba(0xf2e5bcff).into()),
+                        scrollbar_track_border: Some(rgba(0xf2e5bcff).into()),
                         editor_background: Some(rgba(0xf2e5bcff).into()),
                         editor_gutter_background: Some(rgba(0xf2e5bcff).into()),
                         editor_line_number: Some(rgba(0xbdae93ff).into()),

crates/theme2/src/themes/night_owl.rs 🔗

@@ -41,6 +41,11 @@ pub fn night_owl() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x011627ff).into()),
                         tab_inactive_background: Some(rgba(0x01111dff).into()),
                         tab_active_background: Some(rgba(0x0b2942ff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x084d8180).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x084d8180).into()),
+                        scrollbar_thumb_border: Some(rgba(0x084d8180).into()),
+                        scrollbar_track_background: Some(rgba(0x010b14ff).into()),
+                        scrollbar_track_border: Some(rgba(0x010b14ff).into()),
                         editor_background: Some(rgba(0x011627ff).into()),
                         editor_gutter_background: Some(rgba(0x011627ff).into()),
                         editor_line_number: Some(rgba(0x4b6479ff).into()),
@@ -298,6 +303,8 @@ pub fn night_owl() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0xf0f0f0ff).into()),
                         tab_inactive_background: Some(rgba(0xf0f0f0ff).into()),
                         tab_active_background: Some(rgba(0xf6f6f6ff).into()),
+                        scrollbar_track_background: Some(rgba(0xccccccff).into()),
+                        scrollbar_track_border: Some(rgba(0xccccccff).into()),
                         editor_background: Some(rgba(0xfbfbfbff).into()),
                         editor_gutter_background: Some(rgba(0xfbfbfbff).into()),
                         editor_line_number: Some(rgba(0x90a7b2ff).into()),

crates/theme2/src/themes/noctis.rs 🔗

@@ -41,6 +41,11 @@ pub fn noctis() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x09334eff).into()),
                         tab_inactive_background: Some(rgba(0x09334eff).into()),
                         tab_active_background: Some(rgba(0x07273bff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x008ee633).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x008ee655).into()),
+                        scrollbar_thumb_border: Some(rgba(0x008ee633).into()),
+                        scrollbar_track_background: Some(rgba(0x00000044).into()),
+                        scrollbar_track_border: Some(rgba(0x00000044).into()),
                         editor_background: Some(rgba(0x07273bff).into()),
                         editor_gutter_background: Some(rgba(0x07273bff).into()),
                         editor_line_number: Some(rgba(0x4d6c80ff).into()),
@@ -312,6 +317,11 @@ pub fn noctis() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x413036ff).into()),
                         tab_inactive_background: Some(rgba(0x413036ff).into()),
                         tab_active_background: Some(rgba(0x322a2dff).into()),
+                        scrollbar_thumb_background: Some(rgba(0xeb609133).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0xeb609144).into()),
+                        scrollbar_thumb_border: Some(rgba(0xeb609133).into()),
+                        scrollbar_track_background: Some(rgba(0x00000044).into()),
+                        scrollbar_track_border: Some(rgba(0x00000044).into()),
                         editor_background: Some(rgba(0x322a2dff).into()),
                         editor_gutter_background: Some(rgba(0x322a2dff).into()),
                         editor_line_number: Some(rgba(0x715b63ff).into()),
@@ -583,6 +593,11 @@ pub fn noctis() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0xcaedf2ff).into()),
                         tab_inactive_background: Some(rgba(0xcaedf2ff).into()),
                         tab_active_background: Some(rgba(0xf4f6f6ff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x6a90955b).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x0099ad62).into()),
+                        scrollbar_thumb_border: Some(rgba(0x6a90955b).into()),
+                        scrollbar_track_background: Some(rgba(0x00000055).into()),
+                        scrollbar_track_border: Some(rgba(0x00000055).into()),
                         editor_background: Some(rgba(0xf4f6f6ff).into()),
                         editor_gutter_background: Some(rgba(0xf4f6f6ff).into()),
                         editor_line_number: Some(rgba(0xa0abacff).into()),
@@ -854,6 +869,11 @@ pub fn noctis() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0xe2dff6ff).into()),
                         tab_inactive_background: Some(rgba(0xe2dff6ff).into()),
                         tab_active_background: Some(rgba(0xf2f1f8ff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x6a90955b).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x7060eb62).into()),
+                        scrollbar_thumb_border: Some(rgba(0x6a90955b).into()),
+                        scrollbar_track_background: Some(rgba(0x00000055).into()),
+                        scrollbar_track_border: Some(rgba(0x00000055).into()),
                         editor_background: Some(rgba(0xf2f1f8ff).into()),
                         editor_gutter_background: Some(rgba(0xf2f1f8ff).into()),
                         editor_line_number: Some(rgba(0x9d9ab1ff).into()),
@@ -1125,6 +1145,11 @@ pub fn noctis() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0xf0e9d6ff).into()),
                         tab_inactive_background: Some(rgba(0xf0e9d6ff).into()),
                         tab_active_background: Some(rgba(0xfef8ecff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x6a90955b).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x0099ad62).into()),
+                        scrollbar_thumb_border: Some(rgba(0x6a90955b).into()),
+                        scrollbar_track_background: Some(rgba(0x00000055).into()),
+                        scrollbar_track_border: Some(rgba(0x00000055).into()),
                         editor_background: Some(rgba(0xfef8ecff).into()),
                         editor_gutter_background: Some(rgba(0xfef8ecff).into()),
                         editor_line_number: Some(rgba(0xa0abacff).into()),
@@ -1396,6 +1421,11 @@ pub fn noctis() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x24333dff).into()),
                         tab_inactive_background: Some(rgba(0x202e37ff).into()),
                         tab_active_background: Some(rgba(0x1b2932ff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x3f7fa633).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x3f7fa655).into()),
+                        scrollbar_thumb_border: Some(rgba(0x3f7fa633).into()),
+                        scrollbar_track_background: Some(rgba(0x00000044).into()),
+                        scrollbar_track_border: Some(rgba(0x00000044).into()),
                         editor_background: Some(rgba(0x1b2932ff).into()),
                         editor_gutter_background: Some(rgba(0x1b2932ff).into()),
                         editor_line_number: Some(rgba(0x5d6e79ff).into()),
@@ -1667,6 +1697,11 @@ pub fn noctis() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x062e32ff).into()),
                         tab_inactive_background: Some(rgba(0x062e32ff).into()),
                         tab_active_background: Some(rgba(0x052529ff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x6a90955b).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x169fb162).into()),
+                        scrollbar_thumb_border: Some(rgba(0x6a90955b).into()),
+                        scrollbar_track_background: Some(rgba(0x00000044).into()),
+                        scrollbar_track_border: Some(rgba(0x00000044).into()),
                         editor_background: Some(rgba(0x052529ff).into()),
                         editor_gutter_background: Some(rgba(0x052529ff).into()),
                         editor_line_number: Some(rgba(0x4e6b6eff).into()),
@@ -1938,6 +1973,11 @@ pub fn noctis() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x062e32ff).into()),
                         tab_inactive_background: Some(rgba(0x062e32ff).into()),
                         tab_active_background: Some(rgba(0x031417ff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x6a90955b).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x169fb162).into()),
+                        scrollbar_thumb_border: Some(rgba(0x6a90955b).into()),
+                        scrollbar_track_background: Some(rgba(0x00000044).into()),
+                        scrollbar_track_border: Some(rgba(0x00000044).into()),
                         editor_background: Some(rgba(0x031417ff).into()),
                         editor_gutter_background: Some(rgba(0x031417ff).into()),
                         editor_line_number: Some(rgba(0x4e6b6eff).into()),
@@ -2209,6 +2249,11 @@ pub fn noctis() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x062e32ff).into()),
                         tab_inactive_background: Some(rgba(0x062e32ff).into()),
                         tab_active_background: Some(rgba(0x031417ff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x6a90955b).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x169fb162).into()),
+                        scrollbar_thumb_border: Some(rgba(0x6a90955b).into()),
+                        scrollbar_track_background: Some(rgba(0x00000044).into()),
+                        scrollbar_track_border: Some(rgba(0x00000044).into()),
                         editor_background: Some(rgba(0x031417ff).into()),
                         editor_gutter_background: Some(rgba(0x031417ff).into()),
                         editor_line_number: Some(rgba(0x4e6b6eff).into()),
@@ -2480,6 +2525,11 @@ pub fn noctis() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x2f2c49ff).into()),
                         tab_inactive_background: Some(rgba(0x2f2c49ff).into()),
                         tab_active_background: Some(rgba(0x292640ff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x7060eb33).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x7060eb55).into()),
+                        scrollbar_thumb_border: Some(rgba(0x7060eb33).into()),
+                        scrollbar_track_background: Some(rgba(0x00000044).into()),
+                        scrollbar_track_border: Some(rgba(0x00000044).into()),
                         editor_background: Some(rgba(0x292640ff).into()),
                         editor_gutter_background: Some(rgba(0x292640ff).into()),
                         editor_line_number: Some(rgba(0x5c5973ff).into()),
@@ -2751,6 +2801,11 @@ pub fn noctis() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x3d2e4dff).into()),
                         tab_inactive_background: Some(rgba(0x3d2e4dff).into()),
                         tab_active_background: Some(rgba(0x30243dff).into()),
+                        scrollbar_thumb_background: Some(rgba(0xa660eb33).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0xa660eb55).into()),
+                        scrollbar_thumb_border: Some(rgba(0xa660eb33).into()),
+                        scrollbar_track_background: Some(rgba(0x00000044).into()),
+                        scrollbar_track_border: Some(rgba(0x00000044).into()),
                         editor_background: Some(rgba(0x30243dff).into()),
                         editor_gutter_background: Some(rgba(0x30243dff).into()),
                         editor_line_number: Some(rgba(0x665973ff).into()),

crates/theme2/src/themes/nord.rs 🔗

@@ -40,6 +40,11 @@ pub fn nord() -> UserThemeFamily {
                     tab_bar_background: Some(rgba(0x2e3440ff).into()),
                     tab_inactive_background: Some(rgba(0x2e3440ff).into()),
                     tab_active_background: Some(rgba(0x3b4252ff).into()),
+                    scrollbar_thumb_background: Some(rgba(0x434c5e99).into()),
+                    scrollbar_thumb_hover_background: Some(rgba(0x434c5eaa).into()),
+                    scrollbar_thumb_border: Some(rgba(0x434c5e99).into()),
+                    scrollbar_track_background: Some(rgba(0x00000066).into()),
+                    scrollbar_track_border: Some(rgba(0x00000066).into()),
                     editor_background: Some(rgba(0x2e3440ff).into()),
                     editor_gutter_background: Some(rgba(0x2e3440ff).into()),
                     editor_line_number: Some(rgba(0x4c566aff).into()),

crates/theme2/src/themes/palenight.rs 🔗

@@ -41,6 +41,11 @@ pub fn palenight() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x31364aff).into()),
                         tab_inactive_background: Some(rgba(0x31364aff).into()),
                         tab_active_background: Some(rgba(0x292d3eff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x694ca466).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x694ca4cc).into()),
+                        scrollbar_thumb_border: Some(rgba(0x694ca466).into()),
+                        scrollbar_track_background: Some(rgba(0x292d3e00).into()),
+                        scrollbar_track_border: Some(rgba(0x292d3e00).into()),
                         editor_background: Some(rgba(0x292d3eff).into()),
                         editor_gutter_background: Some(rgba(0x292d3eff).into()),
                         editor_line_number: Some(rgba(0x4c5374ff).into()),
@@ -321,6 +326,11 @@ pub fn palenight() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x31364aff).into()),
                         tab_inactive_background: Some(rgba(0x31364aff).into()),
                         tab_active_background: Some(rgba(0x292d3eff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x694ca466).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x694ca4cc).into()),
+                        scrollbar_thumb_border: Some(rgba(0x694ca466).into()),
+                        scrollbar_track_background: Some(rgba(0x292d3e00).into()),
+                        scrollbar_track_border: Some(rgba(0x292d3e00).into()),
                         editor_background: Some(rgba(0x292d3eff).into()),
                         editor_gutter_background: Some(rgba(0x292d3eff).into()),
                         editor_line_number: Some(rgba(0x4c5374ff).into()),
@@ -601,6 +611,11 @@ pub fn palenight() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x31364aff).into()),
                         tab_inactive_background: Some(rgba(0x31364aff).into()),
                         tab_active_background: Some(rgba(0x25293aff).into()),
+                        scrollbar_thumb_background: Some(rgba(0x694ca466).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x694ca4cc).into()),
+                        scrollbar_thumb_border: Some(rgba(0x694ca466).into()),
+                        scrollbar_track_background: Some(rgba(0x292d3e00).into()),
+                        scrollbar_track_border: Some(rgba(0x292d3e00).into()),
                         editor_background: Some(rgba(0x292d3eff).into()),
                         editor_gutter_background: Some(rgba(0x292d3eff).into()),
                         editor_line_number: Some(rgba(0x4c5374ff).into()),

crates/theme2/src/themes/rose_pine.rs 🔗

@@ -41,6 +41,11 @@ pub fn rose_pine() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x00000000).into()),
                         tab_inactive_background: Some(rgba(0x00000000).into()),
                         tab_active_background: Some(rgba(0x6e6a861a).into()),
+                        scrollbar_thumb_background: Some(rgba(0x6e6a8633).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x6e6a8666).into()),
+                        scrollbar_thumb_border: Some(rgba(0x6e6a8633).into()),
+                        scrollbar_track_background: Some(rgba(0x1f1d2e4d).into()),
+                        scrollbar_track_border: Some(rgba(0x1f1d2e4d).into()),
                         editor_background: Some(rgba(0x191724ff).into()),
                         editor_gutter_background: Some(rgba(0x191724ff).into()),
                         editor_line_number: Some(rgba(0x908caaff).into()),
@@ -294,6 +299,11 @@ pub fn rose_pine() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x00000000).into()),
                         tab_inactive_background: Some(rgba(0x00000000).into()),
                         tab_active_background: Some(rgba(0x817c9c14).into()),
+                        scrollbar_thumb_background: Some(rgba(0x817c9c26).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x817c9c4d).into()),
+                        scrollbar_thumb_border: Some(rgba(0x817c9c26).into()),
+                        scrollbar_track_background: Some(rgba(0x2a273f4d).into()),
+                        scrollbar_track_border: Some(rgba(0x2a273f4d).into()),
                         editor_background: Some(rgba(0x232136ff).into()),
                         editor_gutter_background: Some(rgba(0x232136ff).into()),
                         editor_line_number: Some(rgba(0x908caaff).into()),
@@ -547,6 +557,11 @@ pub fn rose_pine() -> UserThemeFamily {
                         tab_bar_background: Some(rgba(0x00000000).into()),
                         tab_inactive_background: Some(rgba(0x00000000).into()),
                         tab_active_background: Some(rgba(0x6e6a860d).into()),
+                        scrollbar_thumb_background: Some(rgba(0x6e6a8614).into()),
+                        scrollbar_thumb_hover_background: Some(rgba(0x6e6a8626).into()),
+                        scrollbar_thumb_border: Some(rgba(0x6e6a8614).into()),
+                        scrollbar_track_background: Some(rgba(0xfffaf34d).into()),
+                        scrollbar_track_border: Some(rgba(0xfffaf34d).into()),
                         editor_background: Some(rgba(0xfaf4edff).into()),
                         editor_gutter_background: Some(rgba(0xfaf4edff).into()),
                         editor_line_number: Some(rgba(0x797593ff).into()),

crates/theme2/src/themes/synthwave_84.rs 🔗

@@ -33,6 +33,11 @@ pub fn synthwave_84() -> UserThemeFamily {
                     toolbar_background: Some(rgba(0x262335ff).into()),
                     tab_bar_background: Some(rgba(0x241b2fff).into()),
                     tab_inactive_background: Some(rgba(0x262335ff).into()),
+                    scrollbar_thumb_background: Some(rgba(0x9d8bca30).into()),
+                    scrollbar_thumb_hover_background: Some(rgba(0x9d8bca50).into()),
+                    scrollbar_thumb_border: Some(rgba(0x9d8bca30).into()),
+                    scrollbar_track_background: Some(rgba(0x2a2139ff).into()),
+                    scrollbar_track_border: Some(rgba(0x2a2139ff).into()),
                     editor_background: Some(rgba(0x262335ff).into()),
                     editor_gutter_background: Some(rgba(0x262335ff).into()),
                     editor_line_number: Some(rgba(0xffffff73).into()),

crates/theme_importer/src/theme_printer.rs 🔗

@@ -187,6 +187,20 @@ impl<'a> Debug for ThemeColorsRefinementPrinter<'a> {
             ("tab_bar_background", self.0.tab_bar_background),
             ("tab_inactive_background", self.0.tab_inactive_background),
             ("tab_active_background", self.0.tab_active_background),
+            (
+                "scrollbar_thumb_background",
+                self.0.scrollbar_thumb_background,
+            ),
+            (
+                "scrollbar_thumb_hover_background",
+                self.0.scrollbar_thumb_hover_background,
+            ),
+            ("scrollbar_thumb_border", self.0.scrollbar_thumb_border),
+            (
+                "scrollbar_track_background",
+                self.0.scrollbar_track_background,
+            ),
+            ("scrollbar_track_border", self.0.scrollbar_track_border),
             ("editor_background", self.0.editor_background),
             ("editor_gutter_background", self.0.editor_gutter_background),
             (

crates/theme_importer/src/vscode/converter.rs 🔗

@@ -127,6 +127,16 @@ impl VsCodeThemeConverter {
             .as_ref()
             .traverse(|color| try_parse_color(&color))?;
 
+        let vscode_scrollbar_shadow = vscode_colors
+            .scrollbar_shadow
+            .as_ref()
+            .traverse(|color| try_parse_color(&color))?;
+
+        let vscode_scrollbar_slider_background = vscode_colors
+            .scrollbar_slider_background
+            .as_ref()
+            .traverse(|color| try_parse_color(&color))?;
+
         Ok(ThemeColorsRefinement {
             border: vscode_colors
                 .panel_border
@@ -234,6 +244,14 @@ impl VsCodeThemeConverter {
                 .editor_foreground
                 .as_ref()
                 .traverse(|color| try_parse_color(&color))?,
+            scrollbar_track_background: vscode_scrollbar_shadow,
+            scrollbar_track_border: vscode_scrollbar_shadow,
+            scrollbar_thumb_background: vscode_scrollbar_slider_background,
+            scrollbar_thumb_border: vscode_scrollbar_slider_background,
+            scrollbar_thumb_hover_background: vscode_colors
+                .scrollbar_slider_hover_background
+                .as_ref()
+                .traverse(|color| try_parse_color(&color))?,
             terminal_background: vscode_colors
                 .terminal_background
                 .as_ref()

crates/theme_importer/src/vscode/theme.rs 🔗

@@ -1130,6 +1130,34 @@ pub struct VsCodeColors {
     )]
     pub panel_title_inactive_foreground: Option<String>,
 
+    #[serde(
+        default,
+        rename = "scrollbar.shadow",
+        deserialize_with = "empty_string_as_none"
+    )]
+    pub scrollbar_shadow: Option<String>,
+
+    #[serde(
+        default,
+        rename = "scrollbarSlider.background",
+        deserialize_with = "empty_string_as_none"
+    )]
+    pub scrollbar_slider_background: Option<String>,
+
+    #[serde(
+        default,
+        rename = "scrollbarSlider.activeBackground",
+        deserialize_with = "empty_string_as_none"
+    )]
+    pub scrollbar_slider_active_background: Option<String>,
+
+    #[serde(
+        default,
+        rename = "scrollbarSlider.hoverBackground",
+        deserialize_with = "empty_string_as_none"
+    )]
+    pub scrollbar_slider_hover_background: Option<String>,
+
     #[serde(
         default,
         rename = "statusBar.background",