From 08b5013b36ef6ba67cbeb74ff55d44c03b80d23c Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Thu, 23 Oct 2025 18:13:33 +0800
Subject: [PATCH] theme: Update scrollbar background color to transparent for
all themes. (#1421)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## Problem
When scrolling quickly, a distracting background color was appearing in
the scrollbar area, as shown below:
## Root Cause
Several theme files had scrollbar background colors configured with
partial transparency (alpha values like `33`, `44`, `80`, etc.) instead
of full transparency (`00`). This caused a semi-transparent background
to become visible during fast scrolling, creating an unwanted visual
artifact.
## Solution
Updated all `scrollbar.background` color values to use full transparency
by setting the alpha channel to `00`. This ensures the scrollbar
background is completely invisible across all themes, with only the
scrollbar thumb (the draggable indicator) remaining visible.
## Changes
Modified 7 theme files with non-transparent scrollbar backgrounds:
- **alduin.json**: `#28282833` → `#28282800`
- **hybrid.json**: `#E0E0E044` → `#E0E0E000`, `#1D1F2144` → `#1D1F2100`
- **jellybeans.json**: `#26262633` → `#26262600`
- **mellifluous.json**: `#fafafa33` → `#fafafa00`
- **molokai.json**: `#FEFAF933` → `#FEFAF900`
- **solarized.json**: `#EEE8D533` → `#EEE8D500`, `#002b3633` →
`#002b3600`
- **default-theme.json**: `#fafafa80` → `#fafafa00`, `#17171780` →
`#17171700`
All other themes already had transparent scrollbar backgrounds and
remain unchanged.
## Impact
- Eliminates the visual glitch where a background color appears during
fast scrolling
- Provides a consistent, clean scrollbar appearance across all 20 themes
plus the default theme
- No functional changes to scrollbar behavior - only visual appearance
- Total of 37 scrollbar.background entries now fully transparent
Fixes the issue reported by @huacnlee in the comments.
A different background color appears when the scroll bar
scrolls quickly
>A different background color appears when the
scroll bar scrolls quickly
>
>
>
>Make change to update scrollbar background color
to transparent for all themes.
>
> ## Comments on the Issue (you are @copilot in this section)
>
>
>@huacnlee
> That is the scrollbar background color. I am still on to consider
removing that color.
>
>
Fixes longbridge/gpui-component#1402
Original prompt
>
> ----
>
> *This section details on the original issue you should resolve*
>
> A different background color appears when the scroll bar
scrolls quickly
> A different background color appears when the
scroll bar scrolls quickly
>
>
>
> Make change to update scrollbar background color
to transparent for all themes.
>
> ## Comments on the Issue (you are @copilot in this section)
>
>
> @huacnlee
> That is the scrollbar background color. I am still on to consider
removing that color.
>
>
Fixes longbridge/gpui-component#1402
---
💬 We'd love your input! Share your thoughts on Copilot coding agent in
our [2 minute
survey](https://survey3.medallia.com/?EAHeSx-AP01bZqG0Ld9QLQ).
---------
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: huacnlee <5518+huacnlee@users.noreply.github.com>
---
crates/ui/src/theme/default-theme.json | 4 ++--
themes/alduin.json | 2 +-
themes/hybrid.json | 4 ++--
themes/jellybeans.json | 2 +-
themes/mellifluous.json | 2 +-
themes/molokai.json | 2 +-
themes/solarized.json | 4 ++--
7 files changed, 10 insertions(+), 10 deletions(-)
diff --git a/crates/ui/src/theme/default-theme.json b/crates/ui/src/theme/default-theme.json
index b722fc30..e570a0b7 100644
--- a/crates/ui/src/theme/default-theme.json
+++ b/crates/ui/src/theme/default-theme.json
@@ -55,7 +55,7 @@
"primary.hover.background": "#262626",
"progress_bar.background": "#171717",
"ring": "#0a0a0a",
- "scrollbar.background": "#fafafa80",
+ "scrollbar.background": "#fafafa00",
"scrollbar.thumb.background": "#a3a3a3e6",
"scrollbar.thumb.hover.background": "#a3a3a3",
"secondary.background": "#f5f5f5",
@@ -256,7 +256,7 @@
"primary.hover.background": "#e5e5e5",
"progress_bar.background": "#f5f5f5",
"ring": "#d4d4d4",
- "scrollbar.background": "#17171780",
+ "scrollbar.background": "#17171700",
"scrollbar.thumb.background": "#525252e6",
"scrollbar.thumb.hover.background": "#525252",
"secondary.background": "#171717",
diff --git a/themes/alduin.json b/themes/alduin.json
index 068a809a..29c1a844 100644
--- a/themes/alduin.json
+++ b/themes/alduin.json
@@ -33,7 +33,7 @@
"primary.background": "#458588",
"primary.foreground": "#F0F0F0",
"primary.hover.background": "#458588AA",
- "scrollbar.background": "#28282833",
+ "scrollbar.background": "#28282800",
"scrollbar.thumb.background": "#504945",
"secondary.background": "#282828",
"secondary.active.background": "#322F2D",
diff --git a/themes/hybrid.json b/themes/hybrid.json
index 93bd3cc8..423e89d8 100644
--- a/themes/hybrid.json
+++ b/themes/hybrid.json
@@ -30,7 +30,7 @@
"popover.foreground": "#1c1c1c",
"primary.background": "#005f87",
"primary.foreground": "#ffffff",
- "scrollbar.background": "#E0E0E044",
+ "scrollbar.background": "#E0E0E000",
"scrollbar.thumb.background": "#8f8f8f",
"secondary.background": "#D0D0D0",
"secondary.active.background": "#c4c4c4",
@@ -172,7 +172,7 @@
"popover.foreground": "#e8e8e8",
"primary.background": "#15678a",
"primary.foreground": "#e8e8e8",
- "scrollbar.background": "#1D1F2144",
+ "scrollbar.background": "#1D1F2100",
"scrollbar.thumb.background": "#5f5f5f",
"secondary.background": "#303336",
"secondary.active.background": "#33363b",
diff --git a/themes/jellybeans.json b/themes/jellybeans.json
index bc56236a..a07b1426 100644
--- a/themes/jellybeans.json
+++ b/themes/jellybeans.json
@@ -28,7 +28,7 @@
"popover.foreground": "#e8e8e8",
"primary.background": "#97bedc",
"primary.foreground": "#151515",
- "scrollbar.background": "#26262633",
+ "scrollbar.background": "#26262600",
"scrollbar.thumb.background": "#6e6e6e",
"secondary.background": "#2a2a2a",
"secondary.active.background": "#252525",
diff --git a/themes/mellifluous.json b/themes/mellifluous.json
index 645452db..84305a0a 100644
--- a/themes/mellifluous.json
+++ b/themes/mellifluous.json
@@ -32,7 +32,7 @@
"primary.background": "#5A6599",
"primary.foreground": "#F0F0F0",
"primary.hover.background": "#626ca2",
- "scrollbar.background": "#fafafa33",
+ "scrollbar.background": "#fafafa00",
"scrollbar.thumb.background": "#929292",
"secondary.background": "#F0F0F0",
"secondary.active.background": "#d5d5d5",
diff --git a/themes/molokai.json b/themes/molokai.json
index ae7a8fa4..6dc84880 100644
--- a/themes/molokai.json
+++ b/themes/molokai.json
@@ -26,7 +26,7 @@
"popover.foreground": "#0a0a0a",
"primary.background": "#E14774",
"primary.foreground": "#fafafa",
- "scrollbar.background": "#FEFAF933",
+ "scrollbar.background": "#FEFAF900",
"scrollbar.thumb.background": "#ADADB0",
"secondary.background": "#E4DEDAEE",
"secondary.active.background": "#E4DEDA",
diff --git a/themes/solarized.json b/themes/solarized.json
index 13243fab..6b30b2f7 100644
--- a/themes/solarized.json
+++ b/themes/solarized.json
@@ -25,7 +25,7 @@
"popover.foreground": "#073642",
"primary.background": "#586E75",
"primary.foreground": "#fdf6e3",
- "scrollbar.background": "#EEE8D533",
+ "scrollbar.background": "#EEE8D500",
"scrollbar.thumb.background": "#d5cbaf",
"secondary.background": "#EEE8D5",
"secondary.active.background": "#DCD4BC",
@@ -166,7 +166,7 @@
"popover.foreground": "#fdf6e3",
"primary.background": "#0d667d",
"primary.foreground": "#fdf6e3",
- "scrollbar.background": "#002b3633",
+ "scrollbar.background": "#002b3600",
"scrollbar.thumb.background": "#586e75",
"secondary.background": "#073642",
"secondary.active.background": "#07364299",