From 476f97d5e0824d85cb5a35de19bbeb8ea987c32c Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Wed, 4 Sep 2024 16:48:49 +0800
Subject: [PATCH] scrollbar: Opacity scrollbar when not hover on it. (#213)

https://github.com/user-attachments/assets/ea070e6f-3d4c-4a0d-b6da-be34e7dfc579
---
 crates/ui/src/scroll/scrollbar.rs | 4 ++--
 crates/ui/src/theme.rs            | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/crates/ui/src/scroll/scrollbar.rs b/crates/ui/src/scroll/scrollbar.rs
index a530c971..0a4771ab 100644
--- a/crates/ui/src/scroll/scrollbar.rs
+++ b/crates/ui/src/scroll/scrollbar.rs
@@ -1,6 +1,6 @@
 use std::{cell::Cell, rc::Rc};
 
-use crate::theme::ActiveTheme;
+use crate::theme::{ActiveTheme, Colorize};
 use gpui::{
     fill, point, px, relative, size, Bounds, ContentMask, Edges, Element, EntityId, Hitbox,
     IntoElement, MouseDownEvent, MouseMoveEvent, MouseUpEvent, PaintQuad, Pixels, Point, Position,
@@ -372,7 +372,7 @@ impl Element for Scrollbar {
                             (thumb_bg, cx.theme().scrollbar, cx.theme().border, px(1.))
                         } else {
                             (
-                                thumb_bg,
+                                thumb_bg.opacity(0.3),
                                 cx.theme().transparent,
                                 gpui::transparent_black(),
                                 THUMB_INSET,
diff --git a/crates/ui/src/theme.rs b/crates/ui/src/theme.rs
index f337c8a1..0e365cd2 100644
--- a/crates/ui/src/theme.rs
+++ b/crates/ui/src/theme.rs
@@ -196,8 +196,8 @@ impl Colors {
             input: hsl(240.0, 5.9, 90.0),
             ring: hsl(240.0, 5.9, 65.0),
             selection: hsl(211.0, 97.0, 85.0),
-            scrollbar: hsl(0., 0., 97.),
-            scrollbar_thumb: hsl(0., 0., 49.),
+            scrollbar: hsl(0., 0., 97.).opacity(0.7),
+            scrollbar_thumb: hsl(0., 0., 69.),
             panel: hsl(0.0, 0.0, 100.0),
             tab_bar: hsl(240.0, 4.8, 95.9),
             list: hsl(0.0, 0.0, 100.),
@@ -237,7 +237,7 @@ impl Colors {
             input: hsl(240.0, 3.7, 15.9),
             ring: hsl(240.0, 4.9, 83.9),
             selection: hsl(211.0, 97.0, 22.0),
-            scrollbar: hsl(240., 1., 15.),
+            scrollbar: hsl(240., 1., 15.).opacity(0.7),
             scrollbar_thumb: hsl(0., 0., 58.),
             panel: hsl(299.0, 2., 9.),
             tab_bar: hsl(299.0, 2., 9.),