主题icon修改

src/layout/components/Navbar.vue

@@ -4,9 +4,10 @@
 
     <div class="right-menu">
       <!-- 主题切换 -->
-      <div class="themeBox" style="font-size:12px; margin-right:20px; cursor: pointer;">
-        <span @click="changetheme('dark')">深色主题</span>
-        <span @click="changetheme('light')">浅色主题</span>
+      <div class="themeBox" style="font-size:12px; margin-right:20px; cursor: pointer; padding: 21px 10px 10px 10px;" @click="changetheme">
+        <!-- <span @click="changetheme('dark')">深色主题</span>
+        <span @click="changetheme('light')">浅色主题</span> -->
+        <span class="theme-btn" />
       </div>
       <div style="font-size: 18px; color: #1C1C1C; margin-right: 30px; cursor: pointer;" class="iconfont icon-jieyueche-ding" />
       <!-- 消息中心 -->
@@ -94,7 +95,8 @@ export default {
       Avatar: Avatar,
       defaultImg: 'this.src="' + require('@/assets/images/avatar.png') + '"',
       msgList: [],
-      themeValue: localStorage.getItem('themeValue') ? localStorage.getItem('themeValue') : 'dark'
+      isTheme: false,
+      themeValue: localStorage.getItem('themeValue') ? localStorage.getItem('themeValue') : 'light'
     }
   },
 
@@ -126,7 +128,7 @@ export default {
   created() {
     this.getMsgList()
     if (!localStorage.getItem('themeValue')) {
-      this.changetheme('dark')
+      this.changetheme('light')
     }
   },
   methods: {
@@ -211,7 +213,14 @@ export default {
     handleClose(done) {
       done()
     },
-    changetheme(theme) {
+    changetheme() {
+      this.isTheme = !this.isTheme
+      let theme = ''
+      if (this.isTheme) {
+        theme = 'light'
+      } else {
+        theme = 'dark'
+      }
       window.document.documentElement.setAttribute('data-theme', theme)
       localStorage.setItem('themeValue', theme)
     }
@@ -315,4 +324,11 @@ export default {
     }
   }
 }
+.theme-btn{
+  display: block;
+  width: 20px;
+  height: 20px;
+  background: url("~@/assets/images/icon/theme.png") no-repeat;
+  background-size: 100% 100%;
+}
 </style>