From c9831d194977c21647028ad1f2c978a06c91e2c4 Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Tue, 17 Nov 2020 21:03:19 +0800
Subject: [PATCH] Customize scrollbar to fit the theme colors

## Issue
4727: Sidebar's transient scrollbar doesn't fit in the Dark Theme

## Approach
The 'webkit' API works on Chrome, but Firefox ignores it and uses it's own fancy scrollbar when 'webkit' is used (can't seem to change any properties). It's better than the current look, but still doesn't fit our theme, plus it makes the product look different on different browsers.

Firefox now supports the new 'scrollbar' API, so we can now tweak the scrollbar, but the API only provides limited attributes.

Don't wanna complicate things by using Javascript, so we'll use Firefox's limited attributes as the common denominator and just live with a plain, rectangle scroll bar BUT with better color to match the theme.
---
 CHANGELOG.md                      |  1 +
 ui/scss/all.scss                  |  1 +
 ui/scss/component/_scrollbar.scss | 31 +++++++++++++++++++++++++++++++
 ui/scss/themes/dark.scss          |  4 ++++
 ui/scss/themes/light.scss         |  4 ++++
 5 files changed, 41 insertions(+)
 create mode 100644 ui/scss/component/_scrollbar.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 56904d5ec..a46782aac 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Comment reactions ([#4895](https://github.com/lbryio/lbry-desktop/pull/4895))
 - Language search ([#4907](https://github.com/lbryio/lbry-desktop/pull/4907))
 - Content notifications ([#4981](https://github.com/lbryio/lbry-desktop/pull/4981))
+- Customize scrollbar to fit the dark theme _community pr!_ ([#5056](https://github.com/lbryio/lbry-desktop/pull/5056))
 
 ### Changed
 
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index 494ec6b41..2d4630de4 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -44,6 +44,7 @@
 @import 'component/progress';
 @import 'component/search';
 @import 'component/claim-search';
+@import 'component/scrollbar';
 @import 'component/section';
 @import 'component/share';
 @import 'component/snack-bar';
diff --git a/ui/scss/component/_scrollbar.scss b/ui/scss/component/_scrollbar.scss
new file mode 100644
index 000000000..aa7c2afbe
--- /dev/null
+++ b/ui/scss/component/_scrollbar.scss
@@ -0,0 +1,31 @@
+// ****************************************************************************
+// webkit
+// ****************************************************************************
+// Currently supported by Chrome/Edge/Safari.
+// Potentially deprecated in the future, but will most likely be
+// handled by 'scrollbar-xx' down below when that happens.
+
+*::-webkit-scrollbar {
+  width: 12px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--color-scrollbar-track-bg);
+}
+
+*::-webkit-scrollbar-thumb {
+  // Don't set 'border-radius' because Firefox's 'scrollbar-xx'
+  // standard currently doesn't support it. Stick with square
+  // scrollbar for all browsers.
+  background-color: var(--color-scrollbar-thumb-bg);
+}
+
+// ****************************************************************************
+// W3C::scrollbar
+// ****************************************************************************
+// The W3C future standard; currently supported by Firefox only.
+
+* {
+  scrollbar-width: auto;
+  scrollbar-color: var(--color-scrollbar-thumb-bg) var(--color-scrollbar-track-bg);
+}
diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss
index d17304cb4..7cf4c583f 100644
--- a/ui/scss/themes/dark.scss
+++ b/ui/scss/themes/dark.scss
@@ -132,4 +132,8 @@
   --color-ads-background: #475057;
   --color-ads-text: #111;
   --color-ads-link: var(--color-primary-alt);
+
+  // Scrollbar
+  --color-scrollbar-thumb-bg: rgba(255, 255, 255, 0.2);
+  --color-scrollbar-track-bg: transparent;
 }
diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss
index 09ceba6af..e8eb9dbb3 100644
--- a/ui/scss/themes/light.scss
+++ b/ui/scss/themes/light.scss
@@ -99,4 +99,8 @@
   // Ads
   --color-ads-background: #fae5ff;
   --color-ads-link: var(--color-link);
+
+  // Scrollbar
+  --color-scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
+  --color-scrollbar-track-bg: transparent;
 }