feat: reverse scrollbar thumb color in dark mode

KawaiiZapic · Mar 27, 2024 · 2225d46 · 2225d46
1 parent d5d33f3
commit 2225d46
Showing 1 changed file with 27 additions and 17 deletions.
diff --git a/src/style/header.css b/src/style/header.css
@@ -57,23 +57,6 @@ body {
   pointer-events: initial;
 }
 
-@media (width >= 1024px) {
-  body ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-}
-
-body ::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
-  background: 0 0;
-}
-
-body ::-webkit-scrollbar-thumb {
-  background: rgb(0 0 0 / 20%);
-}
-
 #matecho-app-bar {
   height: 4em;
 }
@@ -154,3 +137,30 @@ body ::-webkit-scrollbar-thumb {
     transform: translateX(0);
   }
 }
+
+@media (width >= 1024px) {
+  body ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+}
+
+body ::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  background: 0 0;
+}
+
+body ::-webkit-scrollbar-thumb {
+  background: rgb(0 0 0 / 20%);
+}
+
+@media (prefers-color-scheme: dark) {
+  .mdui-theme-auto body ::-webkit-scrollbar-thumb {
+    background: rgb(255 255 255 / 20%);
+  }
+}
+
+.mdui-theme-dark body ::-webkit-scrollbar-thumb {
+  background: rgb(255 255 255 / 20%);
+}