[PR #11857] fix(app): session scroll bar color #13960

Closed
opened 2026-02-16 18:18:47 -05:00 by yindo · 0 comments
Owner

Original Pull Request: https://github.com/anomalyco/opencode/pull/11857

State: closed
Merged: Yes


closes #11851

What does this PR do?

Fixes bad contrast of session scrollbar when using some dark mode themes

This was originally addressed in #10020 , however, got subsequently broken in https://github.com/anomalyco/opencode/commit/099ab929dbfcbe9e167e1afd46487e039e46b1c2

root cause

The file packages/ui/src/styles/utilities.css had global scrollbar styles at the top (lines 14-25) that set scrollbar colors to surface-float-base. These styles applied to every scrollbar on the page, overriding the session-scroller utility.

solution

I removed those global styles so session-scroller can control scrollbar colors without conflict.

How did you verify your code works?

manual testing

before:

OC-1 theme
image

Ayu theme
image

Dracula theme - looks ok, just for reference
image

(light mode scrollbar looks the same regardless of theme, style issue):

OC-1 light
image

Gruvbox light
image

after:

OC-1 theme
image

Ayu theme
image

Dracula theme - looked ok, jsut for reference

image

OC-1 light
image

Gruvbox light
image

**Original Pull Request:** https://github.com/anomalyco/opencode/pull/11857 **State:** closed **Merged:** Yes --- closes #11851 ### What does this PR do? Fixes bad contrast of session scrollbar when using some dark mode themes This was originally addressed in #10020 , however, got subsequently broken in https://github.com/anomalyco/opencode/commit/099ab929dbfcbe9e167e1afd46487e039e46b1c2 ### root cause The file packages/ui/src/styles/utilities.css had global scrollbar styles at the top (lines 14-25) that set scrollbar colors to surface-float-base. These styles applied to every scrollbar on the page, overriding the session-scroller utility. ### solution I removed those global styles so session-scroller can control scrollbar colors without conflict. ### How did you verify your code works? manual testing ### before: OC-1 theme <img width="105" height="124" alt="image" src="https://github.com/user-attachments/assets/75939a1f-3714-42ec-a31f-5814f4458efc" /> Ayu theme <img width="101" height="141" alt="image" src="https://github.com/user-attachments/assets/a29bc936-c574-45f2-8fd8-a00ed5065c24" /> Dracula theme - looks ok, just for reference <img width="75" height="113" alt="image" src="https://github.com/user-attachments/assets/6c5fdeaa-85e5-4985-afef-d0ee02c3737a" /> (light mode scrollbar looks the same regardless of theme, style issue): OC-1 light <img width="91" height="203" alt="image" src="https://github.com/user-attachments/assets/1bd110f1-44f6-45da-a8ba-f8c8d7e031cd" /> Gruvbox light <img width="108" height="221" alt="image" src="https://github.com/user-attachments/assets/81d83456-1cf6-436d-8a4b-b4f989875b55" /> ### after: OC-1 theme <img width="84" height="185" alt="image" src="https://github.com/user-attachments/assets/3798d738-fed7-49f8-8d93-cce297771d57" /> Ayu theme <img width="80" height="180" alt="image" src="https://github.com/user-attachments/assets/da7d9e14-71ee-4e24-a81a-ad1b4caa972f" /> Dracula theme - looked ok, jsut for reference <img width="95" height="169" alt="image" src="https://github.com/user-attachments/assets/dd027191-3d1a-44ce-8ea5-145d2d3dd842" /> OC-1 light <img width="99" height="190" alt="image" src="https://github.com/user-attachments/assets/acfa276c-af0d-446d-b45c-1129304a86d7" /> Gruvbox light <img width="63" height="182" alt="image" src="https://github.com/user-attachments/assets/9f7245b0-5d86-49de-a3a8-ca51ea6b1982" />
yindo added the pull-request label 2026-02-16 18:18:47 -05:00
yindo closed this issue 2026-02-16 18:18:47 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#13960