feat(src/theme): Scrollbar theme (#563)

Author: sorin-davidoi

src/theme/book.css

@@ -340,6 +340,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
   background-color: #fafafa;
   color: #364149;
 }
+.light .sidebar::-webkit-scrollbar {
+  background: #fafafa;
+}
+.light .sidebar::-webkit-scrollbar-thumb {
+  background: #364149;
+}
 .light .chapter li {
   color: #aaa;
 }
@@ -464,6 +470,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
 .light .icon-button i {
   margin: 0;
 }
+.light ::-webkit-scrollbar {
+  background: #fff;
+}
+.light ::-webkit-scrollbar-thumb {
+  background: #333;
+}
 .coal {
   color: #98a3ad;
   background-color: #141617;
@@ -494,6 +506,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
   background-color: #292c2f;
   color: #a1adb8;
 }
+.coal .sidebar::-webkit-scrollbar {
+  background: #292c2f;
+}
+.coal .sidebar::-webkit-scrollbar-thumb {
+  background: #a1adb8;
+}
 .coal .chapter li {
   color: #505254;
 }
@@ -618,6 +636,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
 .coal .icon-button i {
   margin: 0;
 }
+.coal ::-webkit-scrollbar {
+  background: #141617;
+}
+.coal ::-webkit-scrollbar-thumb {
+  background: #98a3ad;
+}
 .navy {
   color: #bcbdd0;
   background-color: #161923;
@@ -648,6 +672,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
   background-color: #282d3f;
   color: #c8c9db;
 }
+.navy .sidebar::-webkit-scrollbar {
+  background: #282d3f;
+}
+.navy .sidebar::-webkit-scrollbar-thumb {
+  background: #c8c9db;
+}
 .navy .chapter li {
   color: #505274;
 }
@@ -772,6 +802,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
 .navy .icon-button i {
   margin: 0;
 }
+.navy ::-webkit-scrollbar {
+  background: #161923;
+}
+.navy ::-webkit-scrollbar-thumb {
+  background: #bcbdd0;
+}
 .rust {
   color: #262625;
   background-color: #e1e1db;
@@ -802,6 +838,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
   background-color: #3b2e2a;
   color: #c8c9db;
 }
+.rust .sidebar::-webkit-scrollbar {
+  background: #3b2e2a;
+}
+.rust .sidebar::-webkit-scrollbar-thumb {
+  background: #c8c9db;
+}
 .rust .chapter li {
   color: #505254;
 }
@@ -926,6 +968,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
 .rust .icon-button i {
   margin: 0;
 }
+.rust ::-webkit-scrollbar {
+  background: #e1e1db;
+}
+.rust ::-webkit-scrollbar-thumb {
+  background: #262625;
+}
 .ayu {
   color: #c5c5c5;
   background-color: #0f1419;
@@ -956,6 +1004,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
   background-color: #14191f;
   color: #c8c9db;
 }
+.ayu .sidebar::-webkit-scrollbar {
+  background: #14191f;
+}
+.ayu .sidebar::-webkit-scrollbar-thumb {
+  background: #c8c9db;
+}
 .ayu .chapter li {
   color: #5c6773;
 }
@@ -1080,6 +1134,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
 .ayu .icon-button i {
   margin: 0;
 }
+.ayu ::-webkit-scrollbar {
+  background: #0f1419;
+}
+.ayu ::-webkit-scrollbar-thumb {
+  background: #c5c5c5;
+}
 @media only print {
   #sidebar,
   #menu-bar,

src/theme/book.js

@@ -279,6 +279,7 @@ function playpen_text(playpen) {
 })();
 
 (function themes() {
+    var html = document.querySelector('html');
     var themeToggleButton = document.getElementById('theme-toggle');
     var themePopup = document.getElementById('theme-list');
     var themeColorMetaTag = document.querySelector('meta[name="theme-color"]');
@@ -331,9 +332,15 @@ function playpen_text(playpen) {
             });
         }
 
+        var previousTheme;
+        try { previousTheme = localStorage.getItem('mdbook-theme'); } catch (e) { }
+        if (previousTheme === null || previousTheme === undefined) { previousTheme = 'light'; }
+
         try { localStorage.setItem('mdbook-theme', theme); } catch (e) { }
 
         document.body.className = theme;
+        html.classList.remove(previousTheme);
+        html.classList.add(theme);
     }
 
     // Set theme

src/theme/index.hbs

@@ -65,6 +65,7 @@
             try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { } 
             if (theme === null || theme === undefined) { theme = 'light'; }
             document.body.className = theme;
+            document.querySelector('html').className = theme;
         </script>
 
         <!-- Hide / unhide sidebar before it is displayed -->

src/theme/stylus/themes/base.styl

@@ -32,6 +32,14 @@
     .sidebar {
         background-color: $sidebar-bg
         color: $sidebar-fg
+
+        &::-webkit-scrollbar {
+            background: $sidebar-bg;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: $sidebar-fg;
+        }
     }
 
     .chapter li {
@@ -172,4 +180,12 @@
             margin: 0;
         }
     }
+
+    ::-webkit-scrollbar {
+        background: $bg;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: $fg;
+    }
 }