From 37ea7e2c9a3d15b6de61972a2163a323572acd28 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sun, 15 Nov 2020 14:39:37 -0500
Subject: [PATCH] Add support for dark theme scrollbar colors (#1038)

---
 ext/bg/search.html        |  2 +-
 ext/fg/float.html         |  4 ++--
 ext/mixed/css/display.css | 30 ++++++++++++++++++++++++++++++
 3 files changed, 33 insertions(+), 3 deletions(-)
diff --git a/ext/bg/search.html b/ext/bg/search.html
index 063aae1e..4feec8d5 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -16,7 +16,7 @@
 </head>
 <body>
 
-<div class="content" id="content"><div class="content-body" id="content-body">
+<div class="content scrollbar" id="content"><div class="content-body" id="content-body">
 
     <span tabindex="-1" id="content-scroll-focus"></span>
 
diff --git a/ext/fg/float.html b/ext/fg/float.html
index 818bee32..69418472 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -16,7 +16,7 @@
 <body>
 
 <div class="content-outer">
-<div class="content" id="content"><div class="content-body" id="content-body">
+<div class="content scrollbar" id="content"><div class="content-body" id="content-body">
 
     <span tabindex="-1" id="content-scroll-focus"></span>
 
@@ -48,7 +48,7 @@
     </div>
 
 </div></div>
-<div class="content-sidebar" id="content-sidebar" hidden><div class="content-sidebar-inner">
+<div class="content-sidebar scrollbar" id="content-sidebar" hidden><div class="content-sidebar-inner">
     <div class="content-sidebar-top">
         <button class="sidebar-button danger" id="close-button" title="Close popup"><span class="sidebar-button-icon" data-icon="cross"></span></button>
         <button class="sidebar-button" disabled id="navigate-previous-button" title="Previous definition (Alt + B)"><span class="sidebar-button-icon" data-icon="left-chevron"></span></button>
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 5a8c0212..d4fb8b4c 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -85,6 +85,9 @@
     --sidebar-button-icon-color: #333333;
     --sidebar-button-disabled-icon-color: #888888;
     --sidebar-button-danger-icon-color: #ffffff;
+
+    --scrollbar-thumb-color: #c1c1c1;
+    --scrollbar-track-color: #f1f1f1;
 }
 :root[data-yomichan-theme=dark] {
     /* Colors */
@@ -127,6 +130,9 @@
     --sidebar-button-icon-color: #cccccc;
     --sidebar-button-disabled-icon-color: #777777;
     --sidebar-button-danger-icon-color: #ffffff;
+
+    --scrollbar-thumb-color: #444444;
+    --scrollbar-track-color: #2f2f2f;
 }
 
 
@@ -185,6 +191,30 @@ a {
 }
 
 
+/* Scrollbars */
+:root[data-yomichan-theme=dark] .scrollbar {
+    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+}
+:root[data-yomichan-theme=dark] .scrollbar::-webkit-scrollbar {
+    width: auto;
+}
+:root[data-yomichan-theme=dark] .scrollbar::-webkit-scrollbar-button {
+    height: 0;
+}
+:root[data-yomichan-theme=dark] .scrollbar::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb-color);
+}
+:root[data-yomichan-theme=dark] .scrollbar::-webkit-scrollbar-track {
+    background-color: var(--scrollbar-thumb-color);
+}
+:root[data-yomichan-theme=dark] .scrollbar::-webkit-scrollbar-track-piece {
+    background-color: var(--scrollbar-track-color);
+}
+:root[data-yomichan-theme=dark] .scrollbar::-webkit-scrollbar-corner {
+    background-color: var(--scrollbar-track-color);
+}
+
+
 /* Main layout */
 .content {
     width: 100%;
