🐛 fix dark mode issue

src/assets/styles/global.scss

@@ -1,18 +1,22 @@
 @import "theme";
 
-body {
+:root {
+    --background-color: #ffffff;
+    --text-color: #000000;
+}
+
+[data-theme="dark"] {
+    --background-color: #121212;
+    --text-color: #ffffff;
+}
+
+#app {
     position: relative;
     transition: background-color 0.3s,
     color 0.3s;
     width: 100vw;
     height: 100vh;
-    @include useTheme {
-        background-color: getModeVar('bgColor') !important;
-        color: getModeVar('infoColor') !important;
-    }
-}
-
-#app {
+    overflow-x: hidden;
     @include useTheme {
         background-color: getModeVar('bgColor') !important;
         color: getModeVar('infoColor') !important;
@@ -35,3 +39,5 @@ body {
 #nprogress .peg {
     box-shadow: 0 0 10px cyan, 0 0 5px cyan !important;
 }
+
+

src/assets/styles/scroll-bar.scss

@@ -1,7 +1,7 @@
 
 ::-webkit-scrollbar {
-    width: 6px;
-    height: 8px;
+    width: 1px;
+    height: 1px;
 }
 
 ::-webkit-scrollbar-button {

src/assets/styles/theme.scss

@@ -1,16 +1,15 @@
 @import "colors.module";
 
 $modes: (
-        light: (
-                bgColor: #fff,
+        "light": (
+                bgColor: transparent,
                 infoColor: #000
         ),
-        dark: (
+        "dark": (
                 bgColor: #000,
                 infoColor: #fff
         )
 );
-
 $curMode: light;
 $curTheme: red;
 @mixin useTheme() {