Add main scrollbar dark mode support and improve scrollbar styles (#2021)

Author: clicktodev

assets/css/autocomplete.css

@@ -114,6 +114,7 @@
   white-space: normal;
   overflow-x: hidden;
   overscroll-behavior-y: contain;
+  scrollbar-width: thin;
 }
 
 .autocomplete-suggestions.previewing:has(.selected) {
@@ -234,26 +235,6 @@
   text-decoration: none !important;
 }
 
-/* Style the scrollbar track (the area behind the thumb) */
-.autocomplete-suggestions::-webkit-scrollbar {
-  width: 5px;
-  /* Set the width of the scrollbar */
-  border-radius: 7px;
-  /* Add rounded corners to the thumb */
-  flex-shrink: 0;
-}
-
-/* Style the scrollbar thumb (the draggable part) */
-.autocomplete-suggestions::-webkit-scrollbar-thumb {
-  background-color: var(--autocompleteScrollbarThumb);
-  border-radius: 7px;
-}
-
-/* Style the scrollbar track on hover */
-.autocomplete-suggestions::-webkit-scrollbar-track {
-  background-color: var(--autocompleteScrollbarTrack);
-}
-
 @media screen and (hover: none) {
   .autocomplete-preview-indicator {
     display: none !important;

assets/css/content/cheatsheet.css

@@ -114,11 +114,6 @@
   padding: var(--vertical-space) var(--horizontal-space);
 }
 
-.page-cheatmd .content-inner pre code::-webkit-scrollbar {
-  width: 0.4rem;
-  height: 0.6rem;
-}
-
 .page-cheatmd .content-inner .h2 pre {
   margin: 0;
 }

assets/css/content/code.css

@@ -27,24 +27,7 @@
   overflow-x: auto;
   white-space: inherit;
   padding: .5em 1em;
-}
-
-.content-inner pre code::-webkit-scrollbar {
-  width: .4rem;
-  height: .4rem;
-}
-
-.content-inner pre code::-webkit-scrollbar-thumb {
-  border-radius: .25rem;
-  background-color: var(--codeScrollThumb);
-}
-
-.content-inner pre code::-webkit-scrollbar-track {
-  background-color: var(--codeScrollBackground);
-}
-
-.content-inner pre code::-webkit-scrollbar-corner {
-  background-color: var(--codeScrollBackground);
+  scrollbar-width: thin;
 }
 
 .content-inner pre code.output {

assets/css/custom-props/theme-dark.css

@@ -78,8 +78,6 @@ body.dark {
   --sidebarHeader:               var(--gray700);
   --sidebarMuted:                var(--gray300);
   --sidebarHover:                var(--white);
-  --sidebarScrollbarThumb:       var(--coldGray);
-  --sidebarScrollbarTrack:       var(--sidebarBackground);
   --sidebarStaleVersion:         var(--orangeLight);
   --sidebarSubheadings:          var(--gray400);
   --sidebarItem:                 var(--gray200);
@@ -98,8 +96,10 @@ body.dark {
   --suggestionBorder:            var(--gray600);
   --autocompleteResults:         var(--gray200);
   --autocompleteResultsBold:     var(--gray100);
-  --autocompleteScrollbarThumb:   var(--gray600);
-  --autocompleteScrollbarTrack:   var(--gray850);
   --autocompleteLabelBack:       var(--gray600);
   --autocompleteLabelFont:       rgba(255, 255, 255, 0.8);
 }
+
+:root:has(body.dark) {
+  color-scheme: dark;
+}

assets/css/custom-props/theme-light.css

@@ -78,8 +78,6 @@
   --sidebarHeader:               var(--gray100);
   --sidebarMuted:                var(--gray800);
   --sidebarHover:                var(--black);
-  --sidebarScrollbarThumb:       var(--coldGrayLight);
-  --sidebarScrollbarTrack:       var(--sidebarBackground);
   --sidebarStaleVersion:         var(--orangeDark);
   --sidebarSubheadings:          var(--black);
   --sidebarItem:                 var(--black);
@@ -99,8 +97,6 @@
   --suggestionBorder:            var(--gray200);
   --autocompleteResults:         var(--gray600);
   --autocompleteResultsBold:     var(--gray800);
-  --autocompleteScrollbarThumb:   var(--gray200);
-  --autocompleteScrollbarTrack:   var(--gray50);
   --autocompleteLabelBack:       var(--gray100);
   --autocompleteLabelFont:       var(--gray600);
 }

assets/css/sidebar.css

@@ -8,7 +8,10 @@
   background-color: var(--sidebarBackground);
   color: var(--sidebarAccentMain);
   overflow: hidden;
-  scrollbar-color: var(--sidebarScrollbarThumb) var(--sidebarScrollbarTrack);
+
+  & .sidebar-tabpanel {
+    scrollbar-width: thin;
+  }
 }
 
 :root:not(.apple-os) .sidebar {
@@ -358,20 +361,6 @@
   border-color: var(--sidebarLanguageAccentBar);
 }
 
-.sidebar ::-webkit-scrollbar {
-  width: 14px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: var(--sidebarBackground);
-}
-
-.sidebar ::-webkit-scrollbar-thumb {
-  background-color: var(--sidebarScrollbarThumb);
-  border-radius: 10px;
-  border: 3px solid var(--sidebarBackground);
-}
-
 .sidebar-button {
   cursor: pointer;
   background-color: transparent;