feat: add theme style toggle function

src/components/menu/SiderMenu.vue

@@ -1,12 +1,12 @@
 <template>
-  <a-layout-sider :class="['sider', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
-    <div class="logo">
+  <a-layout-sider :class="[theme, 'sider', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
+    <div :class="['logo', theme]">
       <router-link to="/dashboard/workplace">
         <img src="static/img/vue-antd-logo.png">
         <h1>Vue Antd Admin</h1>
       </router-link>
     </div>
-    <i-menu :collapsed="collapsed" :menuData="menuData" @select="onSelect"/>
+    <i-menu :theme="theme" :collapsed="collapsed" :menuData="menuData" @select="onSelect"/>
   </a-layout-sider>
 </template>
 
@@ -30,6 +30,11 @@ export default {
     menuData: {
       type: Array,
       required: true
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark'
     }
   },
   computed: {
@@ -46,11 +51,23 @@ export default {
 </script>
 
 <style lang="less" scoped>
+  .dark{
+    background-color: #002140;
+  }
+  .light{
+    background-color: #fff;
+  }
   .shadow{
     box-shadow: 2px 0 6px rgba(0,21,41,.35);
   }
   .sider{
     z-index: 10;
+    &.light{
+      background-color: #fff;
+    }
+    &.dark{
+      background-color: #001529;
+    }
     .logo{
       height: 64px;
       position: relative;
@@ -58,8 +75,19 @@ export default {
       padding-left: 24px;
       -webkit-transition: all .3s;
       transition: all .3s;
-      background: #002140;
       overflow: hidden;
+      &.light{
+        background-color: #fff;
+        h1{
+          color: #1890ff;
+        }
+      }
+      &.dark{
+        background-color: #002140;
+        h1{
+          color: #fff;
+        }
+      }
       h1{
         color: #fff;
         font-size: 20px;