🏍 页面切换，侧边栏，控制栏

src/assets/scss/style.scss

@@ -0,0 +1,14 @@
+// svg
+.zy-svg{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  svg{
+    width: 24px;
+    height: 24px;
+    stroke-width: 1;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    fill: none;
+  }
+}

src/assets/scss/theme.scss

@@ -0,0 +1,16 @@
+:root{
+  // light
+  --l-c: #823aa0;
+  --l-fontc: #808695;
+  --l-bgc: #ffffff;
+  --l-bgc-two: #f2f6f9;
+  --l-c-hover: #823aa022;
+  --l-c-active: #823aa099;
+  --l-bdc: #823aa033;
+  --l-bsc: #8e8da2;
+}
+
+@import './theme/light.scss';
+@import './theme/dark.scss';
+
+@import './style.scss';

src/assets/scss/theme/light.scss

@@ -0,0 +1,35 @@
+.theme-light{
+  background-color: var(--l-bgc);
+  .home{
+    .body{
+      background-color: var(--l-bgc-two);
+    }
+  }
+  .aside{
+    .zy-svg{
+      svg{
+        stroke: var(--l-c);
+      }
+      &:hover{
+        background-color: var(--l-c-hover);
+      }
+      &.active{
+        svg{
+          stroke: var(--l-c);
+          stroke-width: 2;
+          fill: var(--l-c-hover);
+        }
+      }
+    }
+  }
+  .frame{
+    span{
+      &.min{
+        background-color: #ffbe2a;
+      }
+      &.close{
+        background-color: #ff5f56;
+      }
+    }
+  }
+}