dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

theme: Update scrollbar background color to transparent for all themes. (#1421)

Browse source 
## Problem

When scrolling quickly, a distracting background color was appearing in
the scrollbar area, as shown below:

<img
src="https://github.com/user-attachments/assets/c9ebe200-a6b2-47ca-992d-ceaa5ed3db04">

## 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.





<issue_title>A different background color appears when the scroll bar
scrolls quickly</issue_title>
&gt;<issue_description>A different background color appears when the
scroll bar scrolls quickly
&gt; 
&gt;<img
src="https://github.com/user-attachments/assets/c9ebe200-a6b2-47ca-992d-ceaa5ed3db04"></issue_description>
&gt; 
&gt;<agent_instructions>Make change to update scrollbar background color
to transparent for all themes.</agent_instructions>
&gt; 
&gt; ## Comments on the Issue (you are @copilot in this section)
&gt; 
&gt;<comments>
&gt;<comment_new><author>@huacnlee</author>
&gt; That is the scrollbar background color. I am still on to consider
removing that color.</comment_new>
&gt;</comments>
&gt;

Fixes longbridge/gpui-component#1402

<!-- START COPILOT CODING AGENT SUFFIX -->



<details>

<summary>Original prompt</summary>

> 
> ----
> 
> *This section details on the original issue you should resolve*
> 
> <issue_title>A different background color appears when the scroll bar
scrolls quickly</issue_title>
> <issue_description>A different background color appears when the
scroll bar scrolls quickly
> 
> <img width="1338" height="387" alt="Image"
src="https://github.com/user-attachments/assets/c9ebe200-a6b2-47ca-992d-ceaa5ed3db04"
/></issue_description>
> 
> <agent_instructions>Make change to update scrollbar background color
to transparent for all themes.</agent_instructions>
> 
> ## Comments on the Issue (you are @copilot in this section)
> 
> <comments>
> <comment_new><author>@huacnlee</author><body>
> That is the scrollbar background color. I am still on to consider
removing that color.</body></comment_new>
> </comments>
> 


</details>

Fixes longbridge/gpui-component#1402

<!-- START COPILOT CODING AGENT TIPS -->
---

💬 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>
This commit is contained in:
Copilot 2025-10-23 18:13:33 +08:00 committed by GitHub
parent 6dd857a7f7
commit 08b5013b36
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
crates/ui/src/theme/default-theme.json
View file

@ -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",

2
themes/alduin.json
View file

@ -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",

4
themes/hybrid.json
View file

@ -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",

2
themes/jellybeans.json
View file

@ -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",

2
themes/mellifluous.json
View file

@ -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",

2
themes/molokai.json
View file

@ -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",

4
themes/solarized.json
View file

@ -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",