gpui-component/themes/alduin.json
Copilot 08b5013b36
theme: Update scrollbar background color to transparent for all themes. (#1421)
## 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>
2025-10-23 18:13:33 +08:00

150 lines
4.3 KiB
JSON

{
"$schema": "https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json",
"name": "Alduin",
"author": "AlessandroYorba",
"url": "https://github.com/AlessandroYorba/Alduin",
"themes": [
{
"name": "Alduin",
"mode": "dark",
"colors": {
"accent.background": "#322F2D",
"accent.foreground": "#ebdbb2",
"background": "#1C1C1C",
"border": "#3a3a3a",
"danger.background": "#cc241d",
"danger.active.background": "#cc241d",
"danger.hover.background": "#fb4934",
"foreground": "#9E9E9E",
"input.border": "#504945",
"link.active.foreground": "#83a598",
"link.foreground": "#83a598",
"link.hover.foreground": "#83a598",
"list.active.background": "#26262622",
"list.active.border": "#9E9E9E",
"list.even.background": "#262626",
"list.head.background": "#1C1C1C",
"muted.background": "#3c3836",
"muted.foreground": "#878787",
"panel.background": "#282828",
"popover.background": "#141414",
"popover.foreground": "#ebdbb2",
"primary.active.background": "#45858899",
"primary.background": "#458588",
"primary.foreground": "#F0F0F0",
"primary.hover.background": "#458588AA",
"scrollbar.background": "#28282800",
"scrollbar.thumb.background": "#504945",
"secondary.background": "#282828",
"secondary.active.background": "#322F2D",
"secondary.foreground": "#9E9E9E",
"secondary.hover.background": "#26262699",
"tab.active.background": "#1C1C1C",
"tab.active.foreground": "#ebdbb2",
"tab.background": "#14141400",
"tab.foreground": "#848382",
"tab_bar.background": "#141414",
"table.row.border": "#50494570",
"title_bar.background": "#262626",
"title_bar.border": "#3a3a3a",
"ring": "#9E9E9E",
"base.blue": "#87afaf",
"base.cyan": "#878787",
"base.green": "#7a875f",
"base.magenta": "#af8787",
"base.magenta.light": "#af878788",
"base.red": "#8b5f61",
"base.yellow": "#9d906c"
},
"highlight": {
"editor.foreground": "#DDDDDD",
"editor.background": "#000000",
"editor.active_line.background": "#131313",
"editor.line_number": "#8F8F8F",
"editor.active_line_number": "#DDDDDD",
"conflict": "#8b5f61",
"created": "#87afaf",
"error": "#8b5f61",
"hidden": "#9E9E9E",
"hint": "#af8787",
"info": "#878787",
"modified": "#B0A878",
"predictive": "#5D5945",
"syntax": {
"attribute": {
"color": "#be9a52"
},
"boolean": {
"color": "#E1D797"
},
"comment": {
"color": "#9E9E9E"
},
"comment.doc": {
"color": "#9E9E9E"
},
"constant": {
"color": "#E1D797"
},
"constructor": {
"color": "#b5af9a"
},
"embedded": {
"color": "#CACCCA"
},
"function": {
"color": "#E1D797"
},
"keyword": {
"color": "#E19773"
},
"link_text": {
"color": "#A86D3B",
"font_style": "normal"
},
"link_uri": {
"color": "#6F6D66",
"font_style": "italic"
},
"number": {
"color": "#E19773"
},
"string": {
"color": "#76BA53"
},
"string.escape": {
"color": "#76BA53"
},
"string.regex": {
"color": "#76BA53"
},
"string.special": {
"color": "#E1D797"
},
"string.special.symbol": {
"color": "#E1D797"
},
"tag": {
"color": "#b5af9a"
},
"text.literal": {
"color": "#E1D797"
},
"title": {
"color": "#A76D3B",
"font_weight": 600
},
"type": {
"color": "#A86D3B"
},
"property": {
"color": "#CACCCA"
},
"variable.special": {
"color": "#E19773"
}
}
}
}
]
}