新增：《月里嫦娥》皮肤

publish/changeLog.md

@@ -1,5 +1,6 @@
 ### 新增
 
+- 中秋佳节，祝大家中秋快乐🥮~~新增个性皮肤**《月里嫦娥》**，时间仓促，皮肤还不是很完善，可以试试喜不喜欢~😉
 - 新增 MAC 版本退出快捷键支持
 - 新增点击播放器中的歌曲标题可以复制标题的功能（遇到好听的歌曲方便分享）
 

src/renderer/App.vue

@@ -225,6 +225,8 @@ body {
   display: flex;
   height: 100%;
   overflow: hidden;
+  background: @color-theme-bgimg center center no-repeat;
+  background-size: auto 100%;
 }
 
 #left {
@@ -235,6 +237,8 @@ body {
   flex: auto;
   display: flex;
   flex-flow: column nowrap;
+  transition: background-color @transition-theme;
+  background-color: @color-theme_2;
 }
 #toolbar, #player {
   flex: none;
@@ -243,5 +247,14 @@ body {
   flex: auto;
   height: 0;
 }
+
+each(@themes, {
+  #container.@{value} {
+    background-image: ~'@{color-@{value}-theme-bgimg}';
+    #right {
+      background-color: ~'@{color-@{value}-theme_2}';
+    }
+  }
+})
 </style>
 

src/renderer/assets/styles/index.less

@@ -36,11 +36,11 @@ table {
   }
   tbody {
     tr {
-      border-top: 1px solid #e0e0e0;
+      border-top: 1px solid @color-theme_2-line;
       // border-top: 1px solid rgba(0, 0, 0, 0.12);
       transition: background-color 0.2s ease;
       &:hover {
-        background-color: #eee;
+        background-color: @color-theme_2-hover;
       }
       &:first-child {
         border-top: none;
@@ -172,5 +172,15 @@ each(@themes, {
         background-color: ~'@{color-@{value}-scrollbar-thumb-hover}';
       }
     }
+    table {
+      tbody {
+        tr {
+          border-top-color: ~'@{color-@{value}-theme_2-line}';
+          &:hover {
+            background-color: ~'@{color-@{value}-theme_2-hover}';
+          }
+        }
+      }
+    }
   }
 })

src/renderer/assets/styles/variables.less

@@ -1,21 +1,25 @@
 @import './colors.less';
 
-@themes: green, yellow, blue, red, purple, orange, grey;
+@themes: green, yellow, blue, red, purple, orange, grey, midAutumn;
 
 
 // Colors
 // @color-theme: #03a678;
 @color-theme: #4daf7c;
+@color-theme-bgimg: none;
 @color-theme-hover: fadeout(lighten(@color-theme, 10%), 30%);
 @color-theme-active: fadeout(darken(@color-theme, 20%), 60%);
 @color-theme-font: #fff;
 @color-theme-font-label: lighten(@color-theme, 35%);
 
-@color-theme_2: #fff;
+@color-theme_2: rgba(255, 255, 255, .9);
+@color-theme_2-background_2: #fff;
 @color-theme_2-hover: fadeout(lighten(@color-theme, 10%), 70%);
 @color-theme_2-active: fadeout(darken(@color-theme, 5%), 70%);
 @color-theme_2-font: darken(@color-theme_2, 70%);
-@color-theme_2-font-label: lighten(@color-theme, 40%);
+@color-theme_2-font-label: fadeout(@color-theme_2-font, 50%);
+@color-theme_2-line: lighten(@color-theme, 35%);
+@color-theme-sidebar: @color-theme;
 @color-btn: fadeout(darken(@color-theme, 5%), 15%);
 @color-btn-background: fadeout(lighten(@color-theme, 35%), 70%);
 
@@ -41,6 +45,7 @@
 @color-player-status-text: lighten(@color-theme_2-font, 10%);
 
 @color-tab-btn-background: fadeout(lighten(@color-theme, 10%), 80%);
+@color-tab-btn-background-hover: @color-theme_2-hover;
 @color-tab-border-top: fadeout(lighten(@color-theme, 5%), 50%);
 @color-tab-border-bottom: lighten(@color-theme, 5%);
 
@@ -50,15 +55,19 @@
 
 
 @color-green-theme: #4daf7c;
+@color-green-theme-bgimg: none;
 @color-green-theme-hover: fadeout(lighten(@color-green-theme, 10%), 30%);
 @color-green-theme-active: fadeout(darken(@color-green-theme, 20%), 60%);
 @color-green-theme-font: #fff;
 @color-green-theme-font-label: lighten(@color-green-theme, 35%);
 @color-green-theme_2: #fff;
+@color-green-theme_2-background_2: #fff;
 @color-green-theme_2-hover: fadeout(lighten(@color-green-theme, 10%), 70%);
 @color-green-theme_2-active: fadeout(darken(@color-green-theme, 5%), 70%);
 @color-green-theme_2-font: darken(@color-green-theme_2, 70%);
-@color-green-theme_2-font-label: lighten(@color-green-theme, 40%);
+@color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 50%);
+@color-green-theme_2-line: lighten(@color-green-theme, 35%);
+@color-green-theme-sidebar: @color-green-theme;
 @color-green-btn: fadeout(darken(@color-green-theme, 5%), 15%);
 @color-green-btn-background: fadeout(lighten(@color-green-theme, 35%), 70%);
 @color-green-pagination-background: fadeout(lighten(@color-green-theme, 45%), 30%);
@@ -77,20 +86,25 @@
 @color-green-player-progress-bar2: lighten(@color-green-theme, 12%);
 @color-green-player-status-text: lighten(@color-green-theme_2-font, 10%);
 @color-green-tab-btn-background: fadeout(lighten(@color-green-theme, 10%), 80%);
+@color-green-tab-btn-background-hover: @color-green-theme_2-hover;
 @color-green-tab-border-top: fadeout(lighten(@color-green-theme, 5%), 50%);
 @color-green-tab-border-bottom: lighten(@color-green-theme, 5%);
 
 
 @color-yellow-theme: #f2d35b;
+@color-yellow-theme-bgimg: none;
 @color-yellow-theme-hover: fadeout(lighten(@color-yellow-theme, 10%), 30%);
 @color-yellow-theme-active: fadeout(darken(@color-yellow-theme, 20%), 60%);
 @color-yellow-theme-font: #fff;
 @color-yellow-theme-font-label: lighten(@color-yellow-theme, 35%);
 @color-yellow-theme_2: #fff;
+@color-yellow-theme_2-background_2: #fff;
 @color-yellow-theme_2-hover: fadeout(lighten(@color-yellow-theme, 10%), 70%);
 @color-yellow-theme_2-active: fadeout(darken(@color-yellow-theme, 5%), 70%);
 @color-yellow-theme_2-font: darken(@color-yellow-theme_2, 70%);
-@color-yellow-theme_2-font-label: lighten(@color-yellow-theme, 40%);
+@color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 50%);
+@color-yellow-theme_2-line: lighten(@color-yellow-theme, 35%);
+@color-yellow-theme-sidebar: @color-yellow-theme;
 @color-yellow-btn: fadeout(darken(@color-yellow-theme, 5%), 15%);
 @color-yellow-btn-background: fadeout(lighten(@color-yellow-theme, 25%), 70%);
 @color-yellow-pagination-background: fadeout(lighten(@color-yellow-theme, 30%), 30%);
@@ -109,19 +123,24 @@
 @color-yellow-player-progress-bar2: lighten(@color-yellow-theme, 12%);
 @color-yellow-player-status-text: lighten(@color-yellow-theme_2-font, 10%);
 @color-yellow-tab-btn-background: fadeout(lighten(@color-yellow-theme, 10%), 80%);
+@color-yellow-tab-btn-background-hover: @color-yellow-theme_2-hover;
 @color-yellow-tab-border-top: fadeout(lighten(@color-yellow-theme, 5%), 50%);
 @color-yellow-tab-border-bottom: lighten(@color-yellow-theme, 5%);
 
 @color-orange-theme: #f5ab35;
+@color-orange-theme-bgimg: none;
 @color-orange-theme-hover: fadeout(lighten(@color-orange-theme, 10%), 30%);
 @color-orange-theme-active: fadeout(darken(@color-orange-theme, 20%), 60%);
 @color-orange-theme-font: #fff;
 @color-orange-theme-font-label: lighten(@color-orange-theme, 35%);
 @color-orange-theme_2: #fff;
+@color-orange-theme_2-background_2: #fff;
 @color-orange-theme_2-hover: fadeout(lighten(@color-orange-theme, 10%), 70%);
 @color-orange-theme_2-active: fadeout(darken(@color-orange-theme, 5%), 70%);
 @color-orange-theme_2-font: darken(@color-orange-theme_2, 70%);
-@color-orange-theme_2-font-label: lighten(@color-orange-theme, 40%);
+@color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 50%);
+@color-orange-theme_2-line: lighten(@color-orange-theme, 35%);
+@color-orange-theme-sidebar: @color-orange-theme;
 @color-orange-btn: fadeout(darken(@color-orange-theme, 5%), 15%);
 @color-orange-btn-background: fadeout(lighten(@color-orange-theme, 35%), 70%);
 @color-orange-pagination-background: fadeout(lighten(@color-orange-theme, 35%), 30%);
@@ -140,19 +159,24 @@
 @color-orange-player-progress-bar2: lighten(@color-orange-theme, 12%);
 @color-orange-player-status-text: lighten(@color-orange-theme_2-font, 10%);
 @color-orange-tab-btn-background: fadeout(lighten(@color-orange-theme, 10%), 80%);
+@color-orange-tab-btn-background-hover: @color-orange-theme_2-hover;
 @color-orange-tab-border-top: fadeout(lighten(@color-orange-theme, 5%), 50%);
 @color-orange-tab-border-bottom: lighten(@color-orange-theme, 5%);
 
 @color-blue-theme: #3498db;
+@color-blue-theme-bgimg: none;
 @color-blue-theme-hover: fadeout(lighten(@color-blue-theme, 10%), 30%);
 @color-blue-theme-active: fadeout(darken(@color-blue-theme, 20%), 60%);
 @color-blue-theme-font: #fff;
 @color-blue-theme-font-label: lighten(@color-blue-theme, 35%);
 @color-blue-theme_2: #fff;
+@color-blue-theme_2-background_2: #fff;
 @color-blue-theme_2-hover: fadeout(lighten(@color-blue-theme, 10%), 70%);
 @color-blue-theme_2-active: fadeout(darken(@color-blue-theme, 5%), 70%);
 @color-blue-theme_2-font: darken(@color-blue-theme_2, 70%);
-@color-blue-theme_2-font-label: lighten(@color-blue-theme, 40%);
+@color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 50%);
+@color-blue-theme_2-line: lighten(@color-blue-theme, 35%);
+@color-blue-theme-sidebar: @color-blue-theme;
 @color-blue-btn: fadeout(darken(@color-blue-theme, 5%), 15%);
 @color-blue-btn-background: fadeout(lighten(@color-blue-theme, 35%), 70%);
 @color-blue-pagination-background: fadeout(lighten(@color-blue-theme, 40%), 30%);
@@ -171,10 +195,12 @@
 @color-blue-player-progress-bar2: lighten(@color-blue-theme, 12%);
 @color-blue-player-status-text: lighten(@color-blue-theme_2-font, 10%);
 @color-blue-tab-btn-background: fadeout(lighten(@color-blue-theme, 10%), 80%);
+@color-blue-tab-btn-background-hover: @color-blue-theme_2-hover;
 @color-blue-tab-border-top: fadeout(lighten(@color-blue-theme, 5%), 50%);
 @color-blue-tab-border-bottom: lighten(@color-blue-theme, 5%);
 
 @color-red-theme: #d64541;
+@color-red-theme-bgimg: none;
 @color-red-theme-hover: fadeout(lighten(@color-red-theme, 10%), 30%);
 @color-red-theme-active: fadeout(darken(@color-red-theme, 20%), 60%);
 @color-red-theme-font: #fff;
@@ -182,8 +208,11 @@
 @color-red-theme_2: #fff;
 @color-red-theme_2-hover: fadeout(lighten(@color-red-theme, 10%), 70%);
 @color-red-theme_2-active: fadeout(darken(@color-red-theme, 5%), 70%);
+@color-red-theme_2-background_2: #fff;
 @color-red-theme_2-font: darken(@color-red-theme_2, 70%);
-@color-red-theme_2-font-label: lighten(@color-red-theme, 40%);
+@color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 50%);
+@color-red-theme_2-line: lighten(@color-red-theme, 35%);
+@color-red-theme-sidebar: @color-red-theme;
 @color-red-btn: fadeout(darken(@color-red-theme, 5%), 15%);
 @color-red-btn-background: fadeout(lighten(@color-red-theme, 35%), 70%);
 @color-red-pagination-background: fadeout(lighten(@color-red-theme, 40%), 30%);
@@ -204,19 +233,24 @@
 @color-red-tab-border-top: fadeout(lighten(@color-red-theme, 25%), 70%);
 @color-red-tab-border-bottom: lighten(@color-red-theme, 35%);
 @color-red-tab-btn-background: fadeout(lighten(@color-red-theme, 10%), 80%);
+@color-red-tab-btn-background-hover: @color-red-theme_2-hover;
 @color-red-tab-border-top: fadeout(lighten(@color-red-theme, 5%), 50%);
 @color-red-tab-border-bottom: lighten(@color-red-theme, 5%);
 
 @color-purple-theme: #9b59b6;
+@color-purple-theme-bgimg: none;
 @color-purple-theme-hover: fadeout(lighten(@color-purple-theme, 10%), 30%);
 @color-purple-theme-active: fadeout(darken(@color-purple-theme, 20%), 60%);
 @color-purple-theme-font: #fff;
 @color-purple-theme-font-label: lighten(@color-purple-theme, 35%);
 @color-purple-theme_2: #fff;
+@color-purple-theme_2-background_2: #fff;
 @color-purple-theme_2-hover: fadeout(lighten(@color-purple-theme, 10%), 70%);
 @color-purple-theme_2-active: fadeout(darken(@color-purple-theme, 5%), 70%);
 @color-purple-theme_2-font: darken(@color-purple-theme_2, 70%);
-@color-purple-theme_2-font-label: lighten(@color-purple-theme, 40%);
+@color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 50%);
+@color-purple-theme_2-line: lighten(@color-purple-theme, 35%);
+@color-purple-theme-sidebar: @color-purple-theme;
 @color-purple-btn: fadeout(darken(@color-purple-theme, 5%), 15%);
 @color-purple-btn-background: fadeout(lighten(@color-purple-theme, 35%), 70%);
 @color-purple-pagination-background: fadeout(lighten(@color-purple-theme, 40%), 30%);
@@ -235,19 +269,24 @@
 @color-purple-player-progress-bar2: lighten(@color-purple-theme, 12%);
 @color-purple-player-status-text: lighten(@color-purple-theme_2-font, 10%);
 @color-purple-tab-btn-background: fadeout(lighten(@color-purple-theme, 10%), 80%);
+@color-purple-tab-btn-background-hover: @color-purple-theme_2-hover;
 @color-purple-tab-border-top: fadeout(lighten(@color-purple-theme, 5%), 50%);
 @color-purple-tab-border-bottom: lighten(@color-purple-theme, 5%);
 
 @color-grey-theme: #6c7a89;
+@color-grey-theme-bgimg: none;
 @color-grey-theme-hover: fadeout(lighten(@color-grey-theme, 10%), 30%);
 @color-grey-theme-active: fadeout(darken(@color-grey-theme, 20%), 60%);
 @color-grey-theme-font: #fff;
 @color-grey-theme-font-label: lighten(@color-grey-theme, 35%);
 @color-grey-theme_2: #fff;
+@color-grey-theme_2-background_2: #fff;
 @color-grey-theme_2-hover: fadeout(lighten(@color-grey-theme, 10%), 70%);
 @color-grey-theme_2-active: fadeout(darken(@color-grey-theme, 5%), 70%);
 @color-grey-theme_2-font: darken(@color-grey-theme_2, 70%);
-@color-grey-theme_2-font-label: lighten(@color-grey-theme, 40%);
+@color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 50%);
+@color-grey-theme_2-line: lighten(@color-grey-theme, 35%);
+@color-grey-theme-sidebar: @color-grey-theme;
 @color-grey-btn: fadeout(darken(@color-grey-theme, 5%), 15%);
 @color-grey-btn-background: fadeout(lighten(@color-grey-theme, 35%), 70%);
 @color-grey-pagination-background: fadeout(lighten(@color-grey-theme, 45%), 30%);
@@ -266,9 +305,46 @@
 @color-grey-player-progress-bar2: lighten(@color-grey-theme, 12%);
 @color-grey-player-status-text: lighten(@color-grey-theme_2-font, 10%);
 @color-grey-tab-btn-background: fadeout(lighten(@color-grey-theme, 10%), 80%);
+@color-grey-tab-btn-background-hover: @color-grey-theme_2-hover;
 @color-grey-tab-border-top: fadeout(lighten(@color-grey-theme, 5%), 50%);
 @color-grey-tab-border-bottom: lighten(@color-grey-theme, 5%);
 
+@color-midAutumn-theme: rgba(74, 55, 82, 0.9);
+@color-midAutumn-theme-bgimg: url(../images/jqbg.jpg);
+@color-midAutumn-theme-hover: fadeout(lighten(@color-midAutumn-theme, 10%), 30%);
+@color-midAutumn-theme-active: fadeout(lighten(@color-midAutumn-theme, 15%), 60%);
+@color-midAutumn-theme-font: rgba(246, 233, 255, 0.9);
+@color-midAutumn-theme-font-label: fadeout(lighten(@color-midAutumn-theme, 20%), 20%);
+@color-midAutumn-theme_2: rgba(255, 255, 255, .93);
+@color-midAutumn-theme_2-background_2: #eeedef;
+@color-midAutumn-theme_2-hover: fadeout(lighten(@color-midAutumn-theme, 10%), 65%);
+@color-midAutumn-theme_2-active: fadeout(darken(@color-midAutumn-theme, 5%), 70%);
+@color-midAutumn-theme_2-font: darken(@color-midAutumn-theme_2, 70%);
+@color-midAutumn-theme_2-font-label: lighten(@color-midAutumn-theme, 40%);
+@color-midAutumn-theme_2-line: lighten(@color-midAutumn-theme, 54%);
+@color-midAutumn-theme-sidebar: rgba(255, 255, 255, 0);
+@color-midAutumn-btn: fadeout(darken(@color-midAutumn-theme, 5%), 15%);
+@color-midAutumn-btn-background: fadeout(lighten(@color-midAutumn-theme, 35%), 70%);
+@color-midAutumn-pagination-background: fadeout(lighten(@color-midAutumn-theme, 45%), 50%);
+@color-midAutumn-pagination-hover: fadeout(lighten(@color-midAutumn-theme, 10%), 70%);
+@color-midAutumn-pagination-active: fadeout(darken(@color-midAutumn-theme, 10%), 70%);
+@color-midAutumn-pagination-select: fadeout(lighten(@color-midAutumn-theme, 10%), 55%);
+@color-midAutumn-search-form-background: fadeout(lighten(@color-midAutumn-theme, 50%), 10%);
+@color-midAutumn-search-list-hover: fadeout(darken(@color-midAutumn-theme, 10%), 70%);
+@color-midAutumn-scrollbar-track: fadeout(@color-midAutumn-theme, 80%);
+@color-midAutumn-scrollbar-thumb: fadeout(@color-midAutumn-theme, 60%);
+@color-midAutumn-scrollbar-thumb-hover: fadeout(@color-midAutumn-theme, 40%);
+@color-midAutumn-player-pic-c1: fadeout(@color-midAutumn-theme_2, 50%);
+@color-midAutumn-player-pic-c2: darken(@color-midAutumn-theme_2, 30%);
+@color-midAutumn-player-progress: darken(@color-midAutumn-theme_2, 6%);
+@color-midAutumn-player-progress-bar1: darken(@color-midAutumn-theme_2, 12%);
+@color-midAutumn-player-progress-bar2: lighten(@color-midAutumn-theme, 12%);
+@color-midAutumn-player-status-text: lighten(@color-midAutumn-theme_2-font, 10%);
+@color-midAutumn-tab-btn-background: fadeout(lighten(@color-midAutumn-theme, 10%), 80%);
+@color-midAutumn-tab-btn-background-hover: @color-midAutumn-theme_2-hover;
+@color-midAutumn-tab-border-top: fadeout(lighten(@color-midAutumn-theme, 5%), 50%);
+@color-midAutumn-tab-border-bottom: lighten(@color-midAutumn-theme, 5%);
+
 
 // Width
 @width-app-left: 180px;

src/renderer/components/core/Aside.vue

@@ -57,7 +57,7 @@ export default {
   // box-shadow: 0 0 5px rgba(0, 0, 0, .3);
   transition: @transition-theme;
   transition-property: background-color;
-  background-color: @color-theme;
+  background-color: @color-theme-sidebar;
   // background-color: @color-aside-background;
   // border-right: 2px solid @color-theme;
   -webkit-app-region: drag;
@@ -122,7 +122,7 @@ export default {
 each(@themes, {
   :global(#container.@{value}) {
     .aside {
-      background-color: ~'@{color-@{value}-theme}';
+      background-color: ~'@{color-@{value}-theme-sidebar}';
     }
     .logo {
       color: ~'@{color-@{value}-theme-font}';

src/renderer/components/core/Player.vue

@@ -471,8 +471,7 @@ export default {
   height: @height-player;
   // background-color: rgb(245, 245, 245);
   transition: @transition-theme;
-  transition-property: background-color, border-color;
+  transition-property: border-color;
-  background-color: @color-theme_2;
   border-top: 2px solid @color-theme;
   box-sizing: border-box;
   display: flex;
@@ -496,7 +495,7 @@ export default {
     max-height: 100%;
     transition: @transition-theme;
     transition-property: border-color;
-    border: 2px solid @color-theme_2;
+    border: 2px solid @color-theme_2-background_2;
   }
 }
 .right {
@@ -669,13 +668,12 @@ export default {
 each(@themes, {
   :global(#container.@{value}) {
     .player {
-      background-color: ~'@{color-@{value}-theme_2}';
       border-top-color: ~'@{color-@{value}-theme}';
     }
     .left {
       color: ~'@{color-@{value}-theme}';
       img {
-        border-color: ~'@{color-@{value}-theme_2}';
+        border-color: ~'@{color-@{value}-theme_2-background_2}';
       }
     }
     .play-btn {

src/renderer/components/core/Toolbar.vue

@@ -48,7 +48,6 @@ export default {
   display: flex;
   height: @height-toolbar;
   justify-content: flex-end;
-  background-color: @color-theme_2;
   align-items: center;
   padding-left: 15px;
   -webkit-app-region: drag;
@@ -58,13 +57,6 @@ export default {
 .input {
   -webkit-app-region: no-drag;
 }
-each(@themes, {
-  :global(#container.@{value}) {
-    .toolbar {
-      background-color: ~'@{color-@{value}-theme_2}';
-    }
-  }
-})
 
 // img {
 //   flex: none;

src/renderer/components/core/View.vue

@@ -13,7 +13,6 @@ div(:class="$style.view")
 
 .view {
   position: relative;
-  background-color: @color-theme_2;
   > * {
     position: absolute;
     width: 100%;
@@ -22,12 +21,4 @@ div(:class="$style.view")
   // overflow: hidden;
 }
 
-each(@themes, {
-  :global(#container.@{value}) {
-    .view {
-      background-color: ~'@{color-@{value}-theme_2}';
-    }
-  }
-})
-
 </style>

src/renderer/components/material/Checkbox.vue

@@ -156,7 +156,7 @@ export default {
       bottom: 0;
       left: 0;
       right: 0;
-      border: 1px solid #ccc;
+      border: 1px solid @color-theme_2-font-label;
       transition: border-color 0.2s ease;
       border-radius: 15%;
     }
@@ -196,7 +196,7 @@ each(@themes, {
         color: ~'@{color-@{value}-theme}';
         // border: 1px solid #ccc;
         &:after {
-          border-color: #ccc;
+          border-color: ~'@{color-@{value}-theme_2-font-label}';
         }
       }
     }

src/renderer/components/material/Select.vue

@@ -90,7 +90,7 @@ export default {
   border-left: 2px solid @color-tab-border-bottom;
   box-sizing: border-box;
   text-align: center;
-  border-top-left-radius: 3px;
+  border-top-left-radius: 4px;
   color: @color-btn;
   cursor: pointer;
 
@@ -108,7 +108,7 @@ export default {
   left: 0;
   border-bottom: 2px solid @color-tab-border-bottom;
   border-left: 2px solid @color-tab-border-bottom;
-  border-bottom-left-radius: 3px;
+  border-bottom-left-radius: 4px;
   background-color: @color-theme_2;
   overflow: hidden;
   opacity: 0;

src/renderer/components/material/SongList.vue

@@ -175,7 +175,6 @@ export default {
   height: 100%;
   display: flex;
   flex-flow: column nowrap;
-  background-color: @color-theme_2;
 }
 
 .list {
@@ -220,16 +219,17 @@ export default {
 
   p {
     font-size: 24px;
-    color: #ccc;
+    color: @color-theme_2-font-label;
   }
 }
 
 each(@themes, {
   :global(#container.@{value}) {
-    .thead {
+    .noitem {
-      background-color: ~'@color-@{value}-theme_2';
+      p {
+        color: ~'@{color-@{value}-theme_2-font-label}';
+      }
     }
   }
 })
-
 </style>

src/renderer/components/material/Tab.vue

@@ -95,15 +95,15 @@ export default {
         margin-left: 0;
         button {
           border-top-left-radius: 3px;
-          // border-bottom-left-radius: 3px;
+          // border-bottom-left-radius: 4px;
         }
       }
       &:last-child {
         border-right: 2px solid @color-tab-border-top;
-        border-top-right-radius: 3px;
+        border-top-right-radius: 4px;
         button {
           border-top-right-radius: 3px;
-          // border-bottom-right-radius: 3px;
+          // border-bottom-right-radius: 4px;
         }
       }
       button {
@@ -122,7 +122,7 @@ export default {
         // border-left-color: @color-theme_2-hover;
         // border-right-color: @color-theme_2-hover;
         button {
-          background-color: @color-theme_2-hover;
+          background-color: @color-tab-btn-background-hover;
         }
       }
       &:active {
@@ -133,7 +133,7 @@ export default {
         }
       }
       &.active {
-        border-bottom-color: @color-theme_2;
+        border-bottom-color: @color-theme_2-background_2;
         border-top-color: @color-tab-border-bottom;
         border-left-color: @color-tab-border-bottom;
         border-right-color: @color-tab-border-bottom;
@@ -144,7 +144,7 @@ export default {
           width: 0;
         }
         button {
-          background-color: @color-theme_2;
+          background-color: @color-theme_2-background_2;
         }
       }
     }
@@ -193,7 +193,7 @@ each(@themes, {
             // border-left-color: ~'@{color-@{value}-theme_2-hover}';
             // border-right-color: ~'@{color-@{value}-theme_2-hover}';
             button {
-              background-color: ~'@{color-@{value}-theme_2-hover}';
+              background-color: ~'@{color-@{value}-tab-btn-background-hover}';
             }
           }
           &:active {
@@ -209,7 +209,7 @@ each(@themes, {
             border-left-color: ~'@{color-@{value}-tab-border-bottom}';
             border-right-color: ~'@{color-@{value}-tab-border-bottom}';
             button {
-              background-color: ~'@{color-@{value}-theme_2}';
+              background-color: ~'@{color-@{value}-theme_2-background_2}';
             }
           }
         }

src/renderer/store/state.js

@@ -44,6 +44,11 @@ export default {
       name: '灰常美丽',
       class: 'grey',
     },
+    {
+      id: 7,
+      name: '月里嫦娥',
+      class: 'midAutumn',
+    },
   ],
   version: {
     version,

src/renderer/views/List.vue

@@ -257,7 +257,7 @@ export default {
 
   p {
     font-size: 24px;
-    color: #ccc;
+    color: @color-theme_2-font-label;
   }
 }
 
@@ -270,6 +270,12 @@ each(@themes, {
         }
       }
     }
+    .no-item {
+      p {
+        color: ~'@{color-@{value}-theme_2-font-label}';
+      }
+    }
   }
 })
+
 </style>

src/renderer/views/Search.vue

@@ -254,7 +254,17 @@ export default {
 
   p {
     font-size: 24px;
-    color: #ccc;
+    color: @color-theme_2-font-label;
   }
 }
+
+each(@themes, {
+  :global(#container.@{value}) {
+    .noitem {
+      p {
+        color: ~'@{color-@{value}-theme_2-font-label}';
+      }
+    }
+  }
+})
 </style>

src/renderer/views/Setting.vue

@@ -479,7 +479,9 @@ export default {
 
 .theme {
   display: flex;
+  flex-flow: row wrap;
   // padding: 0 15px;
+  margin-bottom: -20px;
 
   li {
     display: flex;
@@ -489,6 +491,7 @@ export default {
     // color: @color-theme;
     margin-right: 30px;
     transition: color .3s ease;
+    margin-bottom: 20px;
 
     &:last-child {
       margin-right: 0;
@@ -509,6 +512,9 @@ export default {
         width: 100%;
         height: 100%;
         border-radius: 4px;
+        background-position: center;
+        background-size: auto 100%;
+        background-repeat: no-repeat;
       }
     }
 
@@ -517,6 +523,7 @@ export default {
         span {
           &:after {
             background-color: ~'@{color-@{value}-theme}';
+            background-image: ~'@{color-@{value}-theme-bgimg}';
           }
         }
       }

src/renderer/views/SongList.vue

@@ -1,12 +1,8 @@
 <template lang="pug">
   div(:class="$style.container")
-    div(:class="$style.header")
-      material-tag-list(:class="$style.tagList" :list="tagList" v-model="tagInfo")
-      material-tab(:class="$style.tab" :list="sorts" item-key="id" item-name="name" v-model="sortId")
-      material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
-    div(:class="$style.main")
     transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
-        div(:class="$style.songListDetail" v-show="isVisibleListDetail")
+      div(:class="$style.songListDetailContent" v-show="isVisibleListDetail")
+        div(:class="$style.songListDetail")
           div(:class="$style.songListHeader")
             div(:class="$style.songListHeaderLeft")
               img(:src="selectListInfo.img")
@@ -18,7 +14,12 @@
               material-btn(:class="$style.closeDetailButton" @click="hideListDetail") 返回
           material-song-list(v-model="selectdData" @action="handleSongListAction" :source="source" :page="listDetail.page" :limit="listDetail.limit" :total="listDetail.total" :list="listDetail.list")
     transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
-        div.scroll(:class="$style.songList" ref="dom_scrollContent" v-show="!isVisibleListDetail")
+      div(:class="$style.songListContent" v-show="!isVisibleListDetail")
+        div(:class="$style.header")
+          material-tag-list(:class="$style.tagList" :list="tagList" v-model="tagInfo")
+          material-tab(:class="$style.tab" :list="sorts" item-key="id" item-name="name" v-model="sortId")
+          material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
+        div.scroll(:class="$style.songList" ref="dom_scrollContent")
           ul
             li(:class="$style.item" v-for="(item, index) in listData.list" @click="handleItemClick(index)")
               div(:class="$style.left")
@@ -269,14 +270,18 @@ export default {
   width: 80px;
 }
 
-.main {
+.songListContent, .songListDetailContent {
   flex: auto;
   overflow: hidden;
+}
+
+.songListContent {
+  display: flex;
+  flex-flow: column nowrap;
   // position: relative;
 }
 
 .song-list-header {
-  background-color: @color-theme_2;
   display: flex;
   flex-flow: row nowrap;
   height: 60px;
@@ -340,7 +345,6 @@ export default {
   height: 100%;
   overflow-y: auto;
   padding: 0 15px;
-  background-color: #fff;
   ul {
     display: flex;
     flex-flow: row wrap;