From e06d237eaef5871c94dbea0f18f09c4edb21af11 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 3 Dec 2021 16:32:24 +0800
Subject: [PATCH 1/2] Use the default scroll bar

And make the Chrome scroll bar on Windows support dark mode
---
 _includes/disqus.html              |  4 +--
 _sass/addon/commons.scss           | 39 ------------------------------
 _sass/colors/dark-typography.scss  |  8 ++++--
 _sass/colors/light-typography.scss |  2 --
 4 files changed, 8 insertions(+), 45 deletions(-)

diff --git a/_includes/disqus.html b/_includes/disqus.html
index c4746de..f4897c8 100644
--- a/_includes/disqus.html
+++ b/_includes/disqus.html
@@ -48,8 +48,8 @@
 
   const modeToggle = document.querySelector(".mode-toggle");
 
-  if (modeToggle !== null) {
-    modeToggle.addEventListener('click', reloadDisqus);
+  if (typeof modeToggle !== "undefined") {
+    /*  modeToggle.addEventListener('click', reloadDisqus); // not pretty for 'color-scheme'  */
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', reloadDisqus);
   }
 
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 072ef2b..f04d583 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -43,45 +43,6 @@ body {
   font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
 }
 
-/* --- Scrollbar --- */
-
-$scrollbar-size: 7px;
-
-::-webkit-scrollbar {
-  width: $scrollbar-size;
-  height: $scrollbar-size;
-}
-
-::-webkit-scrollbar-track {
-  @at-root body#{&} {
-    -webkit-box-shadow: inset 0 0 6px var(--scrollbar-track-bg);
-  }
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: var(--scrollbar-thumb-bg);
-  border-radius: calc(#{$scrollbar-size} / 2);
-}
-
-.highlight {
-  border-color: transparent;
-  transition: border-color 0.5s ease;
-
-  &:hover {
-    border-color: var(--scrollbar-thumb-bg);
-    transition: border-color 0.2s ease;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    /* add border to act as background-color */
-    border-right-style: inset;
-    border-right-width: calc(100vw + 100vh);
-    border-color: inherit;
-    background-color: var(--highlight-bg-color);
-  }
-
-}
-
 /* --- Typography --- */
 
 h1 {
diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
index 6b2fbd7..000cd8e 100644
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -8,8 +8,6 @@
   --mask-bg: rgb(68, 69, 70);
   --main-wrapper-bg: rgb(27, 27, 30);
   --main-border-color: rgb(44, 45, 45);
-  --scrollbar-track-bg: rgba(0, 0, 0, 0.3);
-  --scrollbar-thumb-bg: rgb(173 171 171 / 50%);
 
   /* Common color */
   --text-color: rgb(175, 176, 177);
@@ -142,4 +140,10 @@
 
   }
 
+  color-scheme: dark;
+
+  #disqus_thread {
+    color-scheme: none;
+  }
+
 } // dark-scheme
diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss
index 9f9b92d..e9679f4 100644
--- a/_sass/colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@@ -8,8 +8,6 @@
   --mask-bg: #c1c3c5;
   --main-wrapper-bg: white;
   --main-border-color: #f3f3f3;
-  --scrollbar-track-bg: rgba(0, 0, 0, 0.3);
-  --scrollbar-thumb-bg: rgba(0, 0, 0, 0.3);
 
   /* Common color */
   --text-color: #34343c;

From 902546cf4d10ac23ee33158db8cbf6e3d474921f Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 3 Dec 2021 16:33:12 +0800
Subject: [PATCH 2/2] Remove unused style for mode-toggle

---
 _sass/addon/commons.scss | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index f04d583..8ad4933 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -806,17 +806,8 @@ $sidebar-display: "sidebar-display";
     i {
       line-height: 1.75rem; // default line-height in body
       vertical-align: middle;
-    }
-
-    #mode-toggle-wrapper {
-      @extend %icon;
-
-      i {
-        @extend %sidebar-links;
-        @extend %cursor-pointer;
-        @extend %clickable-transition;
-      }
 
+      @extend %cursor-pointer;
     }
 
     .icon-border {
@@ -829,10 +820,6 @@ $sidebar-display: "sidebar-display";
       border-radius: 50%;
     }
 
-    #mode-toggle-wrapper:hover > i {
-      color: var(--sidebar-active-color);
-    }
-
   } // .sidebar-bottom
 
 } // #sidebar