✨ add dark mode

src/assets/styles/colors.module.scss

@@ -0,0 +1,48 @@
+$red: #F5222D;
+$orange: #FA541C;
+$yellow: #FAAD14;
+$cyan: #13C2C2;
+$green: #52C41A;
+$blue: #2F54EB;
+$purple: #722ED1;
+
+
+$colors: (
+        "red": (
+                primary: $red,
+                info: $red,
+        ),
+        "orange": (
+                primary: $orange,
+                info: $orange,
+        ),
+        "yellow": (
+                primary: $yellow,
+                info: $yellow,
+        ),
+        "cyan": (
+                primary: $cyan,
+                info: $cyan,
+        ),
+        "green": (
+                primary: $green,
+                info: $green,
+        ),
+        "blue": (
+                primary: $blue,
+                info: $blue,
+        ),
+        "purple": (
+                primary: $purple,
+                info: $purple,
+        )
+);
+:export {
+    red: $red;
+    orange: $orange;
+    yellow: $yellow;
+    cyan: $cyan;
+    green: $green;
+    blue: $blue;
+    purple: $purple;
+}

src/assets/styles/scroll-bar.scss

@@ -1,22 +1,19 @@
-
+@import "theme";
 ::-webkit-scrollbar {
     width: 6px;
     height: 8px;
 }
 
-
 ::-webkit-scrollbar-button {
     display: none;
 }
 
-
 ::-webkit-scrollbar-thumb {
     background: rgba(144, 147, 153, 0.3);
     cursor: pointer;
     border-radius: 4px;
 }
 
-
 ::-webkit-scrollbar-corner {
     display: none;
 }
@@ -24,3 +21,13 @@
 ::-webkit-resizer {
     display: none;
 }
+
+body {
+    position: relative;
+    transition: background-color 0.3s,
+    color 0.3s;
+    @include useTheme {
+        background-color: getModeVar('bgColor');
+        color: getModeVar('infoColor');
+    }
+}

src/assets/styles/theme.scss

@@ -0,0 +1,36 @@
+@import "colors.module";
+
+$modes: (
+        light: (
+                bgColor: #fff,
+                infoColor: #000
+        ),
+        dark: (
+                bgColor: #000,
+                infoColor: #fff
+        )
+);
+
+$curMode: light;
+$curTheme: red;
+@mixin useTheme() {
+    @each $key1, $value1 in $modes {
+        $curMode: $key1 !global;
+        @each $key2, $value2 in $colors {
+            $curTheme: $key2 !global;
+            html[data-dark='#{$key1}'][data-theme='#{$key2}'] & {
+                @content;
+            }
+        }
+    }
+}
+
+@function getModeVar($key) {
+    $modeMap: map-get($modes, $curMode);
+    @return map-get($modeMap, $key);
+}
+
+@function getColor($key) {
+    $themeMap: map-get($colors, $curTheme);
+    @return map-get($themeMap, $key);
+}