添加黑色皮肤

build-config/renderer-lyric/webpack.config.base.js

@@ -2,6 +2,7 @@ const path = require('path')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const HTMLPlugin = require('html-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CleanCSSPlugin = require('less-plugin-clean-css')
 
 const vueLoaderConfig = require('../vue-loader.config')
 const { mergeCSSLoader } = require('../utils')
@@ -63,6 +64,11 @@ module.exports = {
           loader: 'less-loader',
           options: {
             sourceMap: true,
+            lessOptions: {
+              plugins: [
+                new CleanCSSPlugin({ advanced: true }),
+              ],
+            },
           },
         }),
       },

build-config/renderer/webpack.config.base.js

@@ -2,6 +2,7 @@ const path = require('path')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const HTMLPlugin = require('html-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CleanCSSPlugin = require('less-plugin-clean-css')
 
 const vueLoaderConfig = require('../vue-loader.config')
 const { mergeCSSLoader } = require('../utils')
@@ -63,6 +64,11 @@ module.exports = {
           loader: 'less-loader',
           options: {
             sourceMap: true,
+            lessOptions: {
+              plugins: [
+                new CleanCSSPlugin({ advanced: true }),
+              ],
+            },
           },
         }),
       },

build-config/utils.js

@@ -9,7 +9,12 @@ exports.mergeCSSLoader = beforeLoader => {
     {
       resourceQuery: /module/,
       use: [
-        MiniCssExtractPlugin.loader,
+        {
+          loader: MiniCssExtractPlugin.loader,
+          options: {
+            esModule: false,
+          },
+        },
         {
           loader: 'css-loader',
           options: cssLoaderConfig,
@@ -20,7 +25,12 @@ exports.mergeCSSLoader = beforeLoader => {
     // 这里匹配普通的 `<style>` 或 `<style scoped>`
     {
       use: [
-        MiniCssExtractPlugin.loader,
+        {
+          loader: MiniCssExtractPlugin.loader,
+          options: {
+            esModule: false,
+          },
+        },
         'css-loader',
         'postcss-loader',
       ],

package-lock.json

@@ -3597,6 +3597,12 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
+      "dev": true
+    },
     "ansi-align": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
@@ -10491,6 +10497,45 @@
         "klona": "^2.0.4"
       }
     },
+    "less-plugin-clean-css": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/less-plugin-clean-css/-/less-plugin-clean-css-1.5.1.tgz",
+      "integrity": "sha1-zFeveqM5iVflbezr5jy2DCNClwM=",
+      "dev": true,
+      "requires": {
+        "clean-css": "^3.0.1"
+      },
+      "dependencies": {
+        "clean-css": {
+          "version": "3.4.28",
+          "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-3.4.28.tgz",
+          "integrity": "sha1-vxlF6C/ICPVWlebd6uwBQA79A/8=",
+          "dev": true,
+          "requires": {
+            "commander": "2.8.x",
+            "source-map": "0.4.x"
+          }
+        },
+        "commander": {
+          "version": "2.8.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
+          "integrity": "sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ=",
+          "dev": true,
+          "requires": {
+            "graceful-readlink": ">= 1.0.0"
+          }
+        },
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "dev": true,
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        }
+      }
+    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",

package.json

@@ -192,6 +192,7 @@
     "html-webpack-plugin": "^5.3.1",
     "less": "^4.1.1",
     "less-loader": "^8.1.0",
+    "less-plugin-clean-css": "^1.5.1",
     "markdown-it": "^12.0.4",
     "mini-css-extract-plugin": "^1.4.1",
     "optimize-css-assets-webpack-plugin": "^5.0.4",

src/renderer-lyric/components/core/ControlBar.vue

@@ -174,6 +174,7 @@ export default {
 @import '../../assets/styles/layout.less';
 
 @bar-height: 38px;
+@bar-height-padding: 7px;
 
 .container {
   position: relative;
@@ -221,20 +222,19 @@ export default {
   display: flex;
   flex-flow: row wrap;
   min-height: @bar-height;
-  padding-top: (@bar-height - 24px) / 2;
-  padding-left: (@bar-height - 24px) / 2;
+  padding-top: @bar-height-padding;
+  padding-left: @bar-height-padding;
   box-sizing: border-box;
 }
 
 .btnBack {
-  margin-top: -(@bar-height - 24px) / 2;
-  margin-left: -(@bar-height - 24px) / 2;
+  margin-top: -@bar-height-padding;
+  margin-left: -@bar-height-padding;
 }
 
 .theme-item {
   display: block;
-  margin-bottom: (@bar-height - 24px) / 2;
-  margin-right: (@bar-height - 24px) / 2;
+  margin-right: @bar-height-padding;
   width: 24px;
   height: 24px;
   border-radius: @radius-border;

src/renderer/assets/styles/variables.less

@@ -1,6 +1,6 @@
 @import './colors.less';
 
-@themes: green, yellow, blue, red, pink, purple, orange, grey, ming, blue2, mid_autumn, naruto, happy_new_year;
+@themes: green, yellow, blue, red, pink, purple, orange, grey, ming, blue2, black, mid_autumn, naruto, happy_new_year;
 
 
 // Colors
@@ -8,7 +8,7 @@
 @color-theme: #4daf7c;
 @color-theme-bgimg: none;
 @color-theme-bgposition: center;
-@color-theme-bgsize: auto auto;
+@color-theme-bgsize: cover;
 @color-theme-hover: fadeout(lighten(@color-theme, 10%), 30%);
 @color-theme-active: fadeout(darken(@color-theme, 20%), 60%);
 @color-theme-font: #fff;
@@ -51,6 +51,8 @@
 @color-player-progress-bar1: darken(@color-theme_2, 12%);
 @color-player-progress-bar2: lighten(@color-theme, 12%);
 @color-player-status-text: lighten(@color-theme_2-font, 32%);
+@color-player-detail-lyric: fadeout(@color-theme_2-font, 40%);
+@color-player-detail-lyric-active: darken(@color-theme, 2%);
 @color-player-detail-play-btn: lighten(@color-theme, 7%);
 
 @color-tab-btn-background: fadeout(lighten(@color-theme, 10%), 80%);
@@ -78,7 +80,7 @@
 @color-green-theme: #4daf7c;
 @color-green-theme-bgimg: none;
 @color-green-theme-bgposition: center;
-@color-green-theme-bgsize: auto auto;
+@color-green-theme-bgsize: cover;
 @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;
@@ -114,6 +116,8 @@
 @color-green-player-progress-bar1: darken(@color-green-theme_2, 12%);
 @color-green-player-progress-bar2: lighten(@color-green-theme, 12%);
 @color-green-player-status-text: lighten(@color-green-theme_2-font, 32%);
+@color-green-player-detail-lyric: fadeout(@color-green-theme_2-font, 40%);
+@color-green-player-detail-lyric-active: darken(@color-green-theme, 2%);
 @color-green-player-detail-play-btn: lighten(@color-green-theme, 7%);
 @color-green-tab-btn-background: fadeout(lighten(@color-green-theme, 10%), 80%);
 @color-green-tab-btn-background-hover: @color-green-theme_2-hover;
@@ -136,7 +140,7 @@
 @color-yellow-theme: #e9d460;
 @color-yellow-theme-bgimg: none;
 @color-yellow-theme-bgposition: center;
-@color-yellow-theme-bgsize: auto auto;
+@color-yellow-theme-bgsize: cover;
 @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;
@@ -172,6 +176,8 @@
 @color-yellow-player-progress-bar1: darken(@color-yellow-theme_2, 12%);
 @color-yellow-player-progress-bar2: lighten(@color-yellow-theme, 2%);
 @color-yellow-player-status-text: lighten(@color-yellow-theme_2-font, 32%);
+@color-yellow-player-detail-lyric: fadeout(@color-yellow-theme_2-font, 40%);
+@color-yellow-player-detail-lyric-active: darken(@color-yellow-theme, 7%);
 @color-yellow-player-detail-play-btn: lighten(@color-yellow-theme, 7%);
 @color-yellow-tab-btn-background: fadeout(lighten(@color-yellow-theme, 10%), 70%);
 @color-yellow-tab-btn-background-hover: @color-yellow-theme_2-hover;
@@ -193,7 +199,7 @@
 @color-orange-theme: #f5ab35;
 @color-orange-theme-bgimg: none;
 @color-orange-theme-bgposition: center;
-@color-orange-theme-bgsize: auto auto;
+@color-orange-theme-bgsize: cover;
 @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;
@@ -229,6 +235,8 @@
 @color-orange-player-progress-bar1: darken(@color-orange-theme_2, 12%);
 @color-orange-player-progress-bar2: lighten(@color-orange-theme, 12%);
 @color-orange-player-status-text: lighten(@color-orange-theme_2-font, 32%);
+@color-orange-player-detail-lyric: fadeout(@color-orange-theme_2-font, 40%);
+@color-orange-player-detail-lyric-active: darken(@color-orange-theme, 7%);
 @color-orange-player-detail-play-btn: lighten(@color-orange-theme, 7%);
 @color-orange-tab-btn-background: fadeout(lighten(@color-orange-theme, 10%), 80%);
 @color-orange-tab-btn-background-hover: @color-orange-theme_2-hover;
@@ -250,7 +258,7 @@
 @color-blue-theme: #3498db;
 @color-blue-theme-bgimg: none;
 @color-blue-theme-bgposition: center;
-@color-blue-theme-bgsize: auto auto;
+@color-blue-theme-bgsize: cover;
 @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;
@@ -286,6 +294,8 @@
 @color-blue-player-progress-bar1: darken(@color-blue-theme_2, 12%);
 @color-blue-player-progress-bar2: lighten(@color-blue-theme, 12%);
 @color-blue-player-status-text: lighten(@color-blue-theme_2-font, 32%);
+@color-blue-player-detail-lyric: fadeout(@color-blue-theme_2-font, 40%);
+@color-blue-player-detail-lyric-active: darken(@color-blue-theme, 2%);
 @color-blue-player-detail-play-btn: lighten(@color-blue-theme, 7%);
 @color-blue-tab-btn-background: fadeout(lighten(@color-blue-theme, 10%), 80%);
 @color-blue-tab-btn-background-hover: @color-blue-theme_2-hover;
@@ -307,7 +317,7 @@
 @color-red-theme: #d64541;
 @color-red-theme-bgimg: none;
 @color-red-theme-bgposition: center;
-@color-red-theme-bgsize: auto auto;
+@color-red-theme-bgsize: cover;
 @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;
@@ -343,6 +353,8 @@
 @color-red-player-progress-bar1: darken(@color-red-theme_2, 12%);
 @color-red-player-progress-bar2: lighten(@color-red-theme, 12%);
 @color-red-player-status-text: lighten(@color-red-theme_2-font, 32%);
+@color-red-player-detail-lyric: fadeout(@color-red-theme_2-font, 40%);
+@color-red-player-detail-lyric-active: lighten(@color-red-theme, 2%);
 @color-red-player-detail-play-btn: lighten(@color-red-theme, 7%);
 @color-red-tab-border-top: fadeout(lighten(@color-red-theme, 25%), 70%);
 @color-red-tab-border-bottom: lighten(@color-red-theme, 35%);
@@ -366,7 +378,7 @@
 @color-pink-theme: #f1828d;
 @color-pink-theme-bgimg: none;
 @color-pink-theme-bgposition: center;
-@color-pink-theme-bgsize: auto auto;
+@color-pink-theme-bgsize: cover;
 @color-pink-theme-hover: fadeout(lighten(@color-pink-theme, 10%), 30%);
 @color-pink-theme-active: fadeout(darken(@color-pink-theme, 20%), 60%);
 @color-pink-theme-font: #fff;
@@ -402,6 +414,8 @@
 @color-pink-player-progress-bar1: darken(@color-pink-theme_2, 12%);
 @color-pink-player-progress-bar2: lighten(@color-pink-theme, 2%);
 @color-pink-player-status-text: lighten(@color-pink-theme_2-font, 32%);
+@color-pink-player-detail-lyric: fadeout(@color-pink-theme_2-font, 40%);
+@color-pink-player-detail-lyric-active: darken(@color-pink-theme, 2%);
 @color-pink-player-detail-play-btn: lighten(@color-pink-theme, 7%);
 @color-pink-tab-btn-background: fadeout(lighten(@color-pink-theme, 10%), 70%);
 @color-pink-tab-btn-background-hover: @color-pink-theme_2-hover;
@@ -423,7 +437,7 @@
 @color-purple-theme: #9b59b6;
 @color-purple-theme-bgimg: none;
 @color-purple-theme-bgposition: center;
-@color-purple-theme-bgsize: auto auto;
+@color-purple-theme-bgsize: cover;
 @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;
@@ -459,6 +473,8 @@
 @color-purple-player-progress-bar1: darken(@color-purple-theme_2, 12%);
 @color-purple-player-progress-bar2: lighten(@color-purple-theme, 12%);
 @color-purple-player-status-text: lighten(@color-purple-theme_2-font, 32%);
+@color-purple-player-detail-lyric: fadeout(@color-purple-theme_2-font, 40%);
+@color-purple-player-detail-lyric-active: darken(@color-purple-theme, 2%);
 @color-purple-player-detail-play-btn: lighten(@color-purple-theme, 7%);
 @color-purple-tab-btn-background: fadeout(lighten(@color-purple-theme, 10%), 80%);
 @color-purple-tab-btn-background-hover: @color-purple-theme_2-hover;
@@ -480,7 +496,7 @@
 @color-grey-theme: #6c7a89;
 @color-grey-theme-bgimg: none;
 @color-grey-theme-bgposition: center;
-@color-grey-theme-bgsize: auto auto;
+@color-grey-theme-bgsize: cover;
 @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;
@@ -516,6 +532,8 @@
 @color-grey-player-progress-bar1: darken(@color-grey-theme_2, 12%);
 @color-grey-player-progress-bar2: lighten(@color-grey-theme, 12%);
 @color-grey-player-status-text: lighten(@color-grey-theme_2-font, 32%);
+@color-grey-player-detail-lyric: fadeout(@color-grey-theme_2-font, 55%);
+@color-grey-player-detail-lyric-active: darken(@color-grey-theme, 3%);
 @color-grey-player-detail-play-btn: lighten(@color-grey-theme, 7%);
 @color-grey-tab-btn-background: fadeout(lighten(@color-grey-theme, 10%), 80%);
 @color-grey-tab-btn-background-hover: @color-grey-theme_2-hover;
@@ -538,7 +556,7 @@
 @color-ming-theme: #336e7b;
 @color-ming-theme-bgimg: none;
 @color-ming-theme-bgposition: center;
-@color-ming-theme-bgsize: auto auto;
+@color-ming-theme-bgsize: cover;
 @color-ming-theme-hover: fadeout(lighten(@color-ming-theme, 7%), 30%);
 @color-ming-theme-active: fadeout(darken(@color-ming-theme, 20%), 60%);
 @color-ming-theme-font: #fff;
@@ -574,6 +592,8 @@
 @color-ming-player-progress-bar1: darken(@color-ming-theme_2, 12%);
 @color-ming-player-progress-bar2: lighten(@color-ming-theme, 12%);
 @color-ming-player-status-text: lighten(@color-ming-theme_2-font, 32%);
+@color-ming-player-detail-lyric: fadeout(@color-ming-theme_2-font, 50%);
+@color-ming-player-detail-lyric-active: lighten(@color-ming-theme, 2%);
 @color-ming-player-detail-play-btn: lighten(@color-ming-theme, 10%);
 @color-ming-tab-border-top: fadeout(lighten(@color-ming-theme, 25%), 70%);
 @color-ming-tab-border-bottom: lighten(@color-ming-theme, 35%);
@@ -598,7 +618,7 @@
 @color-blue2-theme: #4f62d0;
 @color-blue2-theme-bgimg: none;
 @color-blue2-theme-bgposition: center;
-@color-blue2-theme-bgsize: auto auto;
+@color-blue2-theme-bgsize: cover;
 @color-blue2-theme-hover: fadeout(lighten(@color-blue2-theme, 10%), 30%);
 @color-blue2-theme-active: fadeout(darken(@color-blue2-theme, 20%), 60%);
 @color-blue2-theme-font: #fff;
@@ -634,6 +654,8 @@
 @color-blue2-player-progress-bar1: darken(@color-blue2-theme_2, 12%);
 @color-blue2-player-progress-bar2: lighten(@color-blue2-theme, 12%);
 @color-blue2-player-status-text: lighten(@color-blue2-theme_2-font, 32%);
+@color-blue2-player-detail-lyric: fadeout(@color-blue2-theme_2-font, 50%);
+@color-blue2-player-detail-lyric-active: darken(@color-blue2-theme, 2%);
 @color-blue2-player-detail-play-btn: lighten(@color-blue2-theme, 7%);
 @color-blue2-tab-btn-background: fadeout(lighten(@color-blue2-theme, 10%), 80%);
 @color-blue2-tab-btn-background-hover: @color-blue2-theme_2-hover;
@@ -652,62 +674,66 @@
 @color-blue2-badge-info: #b080db;
 @color-blue2-badge-info-font: #fff;
 
-@color-blue2-theme: #070707;
-@color-blue2-theme-bgimg: none;
-@color-blue2-theme-bgposition: center;
-@color-blue2-theme-bgsize: auto auto;
-@color-blue2-theme-hover: fadeout(lighten(@color-blue2-theme, 13%), 30%);
-@color-blue2-theme-active: fadeout(lighten(@color-blue2-theme, 8%), 30%);
-@color-blue2-theme-font: lighten(@color-blue2-theme, 55%);
-@color-blue2-theme-font-label: lighten(@color-blue2-theme, 35%);
-@color-blue2-theme_2: #000000;
-@color-blue2-theme_2-background_1: #000000;
-@color-blue2-theme_2-background_2: fadeout(@color-blue2-theme_2-background_1, 2%);
-@color-blue2-theme_2-hover: fadeout(lighten(@color-blue2-theme, 10%), 80%);
-@color-blue2-theme_2-active: fadeout(lighten(@color-blue2-theme, 10%), 70%);
-@color-blue2-theme_2-font: lighten(@color-blue2-theme_2, 65%);
-@color-blue2-theme_2-font-label: darken(@color-blue2-theme_2-font, 30%);
-// @color-blue2-theme_2-line: transparent;
-@color-blue2-theme_2-line: lighten(@color-blue2-theme_2, 3%);
-@color-blue2-reply-floor: fadeout(lighten(@color-blue2-theme, 60%), 95%);
-@color-blue2-theme-sidebar: @color-blue2-theme;
-@color-blue2-btn: lighten(@color-blue2-theme, 40%);
-@color-blue2-btn-background: fadeout(lighten(@color-blue2-theme, 30%), 70%);
-@color-blue2-btn-hover: fadeout(lighten(@color-blue2-theme, 40%), 70%);
-@color-blue2-btn-active: fadeout(lighten(@color-blue2-theme, 20%), 70%);
-@color-blue2-btn-select: fadeout(lighten(@color-blue2-theme, 25%), 70%);
-@color-blue2-pagination-background: fadeout(lighten(@color-blue2-theme, 25%), 20%);
-@color-blue2-pagination-hover: fadeout(lighten(@color-blue2-theme, 10%), 70%);
-@color-blue2-pagination-active: fadeout(darken(@color-blue2-theme, 10%), 70%);
-@color-blue2-pagination-select: fadeout(lighten(@color-blue2-theme, 10%), 50%);
-@color-blue2-search-form-background: fadeout(lighten(@color-blue2-theme, 35%), 10%);
-@color-blue2-search-list-hover: fadeout(darken(@color-blue2-theme, 10%), 70%);
-@color-blue2-scrollbar-track: fadeout(lighten(@color-blue2-theme, 10%), 75%);
-@color-blue2-scrollbar-thumb: fadeout(lighten(@color-blue2-theme, 10%), 50%);
-@color-blue2-scrollbar-thumb-hover: fadeout(lighten(@color-blue2-theme, 10%), 35%);
-@color-blue2-player-pic-c1: fadeout(@color-blue2-theme_2, 50%);
-@color-blue2-player-pic-c2: darken(@color-blue2-theme_2, 30%);
-@color-blue2-player-progress: darken(@color-blue2-theme_2, 6%);
-@color-blue2-player-progress-bar1: darken(@color-blue2-theme_2, 12%);
-@color-blue2-player-progress-bar2: lighten(@color-blue2-theme, 12%);
-@color-blue2-player-status-text: darken(@color-blue2-theme_2-font, 20%);
-@color-blue2-player-detail-play-btn: lighten(@color-blue2-theme, 7%);
-@color-blue2-tab-btn-background: fadeout(lighten(@color-blue2-theme, 10%), 80%);
-@color-blue2-tab-btn-background-hover: @color-blue2-theme_2-hover;
-@color-blue2-tab-border-top: fadeout(lighten(@color-blue2-theme, 5%), 50%);
-@color-blue2-tab-border-bottom: lighten(@color-blue2-theme, 5%);
-@color-blue2-hideBtn: #3bc2b2;
-@color-blue2-minBtn: #85c43b;
-@color-blue2-maxBtn: #e7aa36;
-@color-blue2-closeBtn: #ea6e4d;
-@color-blue2-hideBtn-hover: fadeout(@color-hideBtn, 10%);
-@color-blue2-minBtn-hover: fadeout(@color-blue2-minBtn, 10%);
-@color-blue2-maxBtn-hover: fadeout(@color-blue2-maxBtn, 10%);
-@color-blue2-closeBtn-hover: fadeout(@color-blue2-closeBtn, 10%);
-@color-blue2-badge-success: lighten(@color-blue2-theme, 15%);
-@color-blue2-badge-success-font: #fff;
-@color-blue2-badge-info: #b080db;
-@color-blue2-badge-info-font: #fff;
+
+@color-black-theme: #272727;
+@color-black-theme-bgimg: url(../images/landingMoon.png);
+@color-black-theme-bgposition: center;
+@color-black-theme-bgsize: cover;
+@color-black-theme-hover: fadeout(lighten(@color-black-theme, 13%), 30%);
+@color-black-theme-active: fadeout(lighten(@color-black-theme, 8%), 30%);
+@color-black-theme-font: lighten(@color-black-theme, 55%);
+@color-black-theme-font-label: lighten(@color-black-theme, 35%);
+@color-black-theme_2: rgba(19, 19, 19, 0.9);
+@color-black-theme_2-background_1: #080808;
+@color-black-theme_2-background_2: #2b2b2b;
+@color-black-theme_2-hover: fadeout(lighten(@color-black-theme, 10%), 80%);
+@color-black-theme_2-active: fadeout(lighten(@color-black-theme, 10%), 70%);
+@color-black-theme_2-font: lighten(@color-black-theme_2, 68%);
+@color-black-theme_2-font-label: darken(@color-black-theme_2-font, 30%);
+// @color-black-theme_2-line: transparent;
+@color-black-theme_2-line: lighten(@color-black-theme_2, 1.5%);
+@color-black-reply-floor: fadeout(lighten(@color-black-theme, 60%), 95%);
+@color-black-theme-sidebar: @color-black-theme;
+@color-black-btn: lighten(@color-black-theme, 40%);
+@color-black-btn-background: fadeout(lighten(@color-black-theme, 30%), 70%);
+@color-black-btn-hover: fadeout(lighten(@color-black-theme, 40%), 70%);
+@color-black-btn-active: fadeout(lighten(@color-black-theme, 20%), 70%);
+@color-black-btn-select: fadeout(lighten(@color-black-theme, 25%), 70%);
+@color-black-pagination-background: fadeout(darken(@color-black-theme, 15%), 50%);
+@color-black-pagination-hover: fadeout(lighten(@color-black-theme, 1%), 70%);
+@color-black-pagination-active: fadeout(darken(@color-black-theme, 5%), 60%);
+@color-black-pagination-select: fadeout(darken(@color-black-theme, 3%), 60%);
+@color-black-search-form-background: fadeout(lighten(@color-black-theme, 8%), 6%);
+@color-black-search-list-hover: fadeout(darken(@color-black-theme, 10%), 70%);
+@color-black-scrollbar-track: fadeout(lighten(@color-black-theme, 10%), 75%);
+@color-black-scrollbar-thumb: fadeout(lighten(@color-black-theme, 10%), 50%);
+@color-black-scrollbar-thumb-hover: fadeout(lighten(@color-black-theme, 10%), 35%);
+@color-black-player-pic-c1: fadeout(@color-black-theme_2, 50%);
+@color-black-player-pic-c2: lighten(@color-black-theme_2, 30%);
+@color-black-player-progress: lighten(@color-black-theme_2, 6%);
+@color-black-player-progress-bar1: lighten(@color-black-theme_2, 12%);
+@color-black-player-progress-bar2: lighten(@color-black-theme, 12%);
+@color-black-player-status-text: darken(@color-black-theme_2-font, 20%);
+@color-black-player-detail-lyric: fadeout(@color-black-theme_2-font, 40%);
+@color-black-player-detail-lyric-active: lighten(@color-black-theme, 10%);
+@color-black-player-detail-play-btn: lighten(@color-black-theme, 30%);
+@color-black-tab-btn-background: fadeout(lighten(@color-black-theme, 10%), 80%);
+@color-black-tab-btn-background-hover: @color-black-theme_2-hover;
+@color-black-tab-border-top: fadeout(lighten(@color-black-theme, 5%), 50%);
+@color-black-tab-border-bottom: lighten(@color-black-theme, 5%);
+@color-black-hideBtn: #4e4e4e;
+@color-black-minBtn: #5e5e5e;
+@color-black-maxBtn: #535353;
+@color-black-closeBtn: #6e6e6e;
+@color-black-hideBtn-hover: fadeout(@color-hideBtn, 10%);
+@color-black-minBtn-hover: fadeout(@color-black-minBtn, 10%);
+@color-black-maxBtn-hover: fadeout(@color-black-maxBtn, 10%);
+@color-black-closeBtn-hover: fadeout(@color-black-closeBtn, 10%);
+@color-black-badge-success: lighten(@color-black-theme, 10%);
+@color-black-badge-success-font: #fff;
+@color-black-badge-info: lighten(@color-black-theme, 25%);
+@color-black-badge-info-font: #fff;
+
 
 @color-mid_autumn-theme: rgba(74, 55, 82, 1);
 @color-mid_autumn-theme-bgimg: url(../images/jqbg.jpg);
@@ -748,6 +774,8 @@
 @color-mid_autumn-player-progress-bar1: darken(@color-mid_autumn-theme_2, 12%);
 @color-mid_autumn-player-progress-bar2: lighten(@color-mid_autumn-theme, 12%);
 @color-mid_autumn-player-status-text: lighten(@color-mid_autumn-theme_2-font, 32%);
+@color-mid_autumn-player-detail-lyric: fadeout(@color-mid_autumn-theme_2-font, 40%);
+@color-mid_autumn-player-detail-lyric-active: lighten(@color-mid_autumn-theme, 7%);
 @color-mid_autumn-player-detail-play-btn: lighten(@color-mid_autumn-theme, 7%);
 @color-mid_autumn-tab-btn-background: fadeout(lighten(@color-mid_autumn-theme, 10%), 80%);
 @color-mid_autumn-tab-btn-background-hover: @color-mid_autumn-theme_2-hover;
@@ -806,6 +834,8 @@
 @color-mid_autumn-player-progress-bar1: darken(@color-mid_autumn-theme_2, 12%);
 @color-mid_autumn-player-progress-bar2: lighten(@color-mid_autumn-theme, 12%);
 @color-mid_autumn-player-status-text: lighten(@color-mid_autumn-theme_2-font, 32%);
+@color-mid_autumn-player-detail-lyric: lighten(@color-mid_autumn-theme, 7%);
+@color-mid_autumn-player-detail-lyric-active: lighten(@color-mid_autumn-theme, 7%);
 @color-mid_autumn-player-detail-play-btn: lighten(@color-mid_autumn-theme, 7%);
 @color-mid_autumn-tab-btn-background: fadeout(lighten(@color-mid_autumn-theme, 10%), 80%);
 @color-mid_autumn-tab-btn-background-hover: @color-mid_autumn-theme_2-hover;
@@ -863,6 +893,8 @@
 @color-naruto-player-progress-bar1: darken(@color-naruto-theme_2, 12%);
 @color-naruto-player-progress-bar2: lighten(@color-naruto-theme, 12%);
 @color-naruto-player-status-text: lighten(@color-naruto-theme_2-font, 32%);
+@color-naruto-player-detail-lyric: fadeout(@color-naruto-theme_2-font, 36%);
+@color-naruto-player-detail-lyric-active: darken(@color-naruto-theme, 7%);
 @color-naruto-player-detail-play-btn: lighten(@color-naruto-theme, 7%);
 @color-naruto-tab-btn-background: fadeout(lighten(@color-naruto-theme, 10%), 80%);
 @color-naruto-tab-btn-background-hover: @color-naruto-theme_2-hover;
@@ -920,6 +952,8 @@
 @color-happy_new_year-player-progress-bar1: darken(@color-happy_new_year-theme_2, 12%);
 @color-happy_new_year-player-progress-bar2: lighten(@color-happy_new_year-theme, 9%);
 @color-happy_new_year-player-status-text: lighten(@color-happy_new_year-theme_2-font, 32%);
+@color-happy_new_year-player-detail-lyric: fadeout(@color-happy_new_year-theme_2-font, 40%);
+@color-happy_new_year-player-detail-lyric-active: darken(@color-happy_new_year-theme, 2%);
 @color-happy_new_year-player-detail-play-btn: lighten(@color-happy_new_year-theme, 7%);
 @color-happy_new_year-tab-btn-background: fadeout(lighten(@color-happy_new_year-theme, 10%), 80%);
 @color-happy_new_year-tab-btn-background-hover: @color-happy_new_year-theme_2-hover;

src/renderer/components/core/Player.vue

@@ -1057,7 +1057,7 @@ export default {
   height: 100%;
   border-radius: @radius-progress-border;
   transition-duration: 0.2s;
-  background-color: @color-theme;
+  background-color: @color-btn;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
 }
 
@@ -1075,14 +1075,14 @@ export default {
   margin-left: 5px;
   height: 100%;
   width: 20px;
-  color: @color-theme;
+  color: @color-btn;
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
 
   transition: opacity 0.2s ease;
-  opacity: .5;
+  opacity: .6;
   cursor: pointer;
 
   svg {
@@ -1226,10 +1226,10 @@ each(@themes, {
       // }
     }
     .titleBtn {
-      color: ~'@{color-@{value}-theme}';
+      color: ~'@{color-@{value}-btn}';
     }
     .play-btn {
-      color: ~'@{color-@{value}-theme}';
+      color: ~'@{color-@{value}-btn}';
       svg {
         filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
       }
@@ -1239,7 +1239,7 @@ each(@themes, {
     }
 
     .volume-bar {
-      background-color: ~'@{color-@{value}-theme}';
+      background-color: ~'@{color-@{value}-btn}';
     }
 
 

src/renderer/components/core/PlayerDetail.vue

@@ -579,7 +579,6 @@ export default {
   overflow: hidden;
   font-size: 16px;
   cursor: grab;
-  color: @color-theme_2-font;
   &.draging {
     cursor: grabbing;
   }
@@ -588,6 +587,7 @@ export default {
       line-height: 1.2;
       margin: 16px 0;
       overflow-wrap: break-word;
+      color: @color-player-detail-lyric;
 
       .translation {
         transition: @transition-theme !important;
@@ -833,17 +833,19 @@ each(@themes, {
     .lyric {
       :global {
         .lrc-content {
+          color: ~'@{color-@{value}-player-detail-lyric}';
+
           &.active {
             .translation {
-              color: ~'@{color-@{value}-theme}';
+              color: ~'@{color-@{value}-player-detail-lyric-active}';
             }
             .line {
-              color: ~'@{color-@{value}-theme}';
+              color: ~'@{color-@{value}-player-detail-lyric-active}';
             }
           }
           span {
-            // background-color: ~'@{color-@{value}-theme_2-font}';
-            background-image: -webkit-linear-gradient(top, ~'@{color-@{value}-theme}', ~'@{color-@{value}-theme}');
+            background-color: ~'@{color-@{value}-player-detail-lyric}';
+            background-image: -webkit-linear-gradient(top, ~'@{color-@{value}-player-detail-lyric-active}', ~'@{color-@{value}-player-detail-lyric-active}');
           }
         }
       }

src/renderer/lang/en-us/store/state.json

@@ -9,6 +9,7 @@
   "theme_grey": "Grey",
   "theme_ming": "Ming",
   "theme_blue2": "Purple Blue",
+  "theme_black": "Black",
   "theme_mid_autumn": "Mid-Autumn",
   "theme_naruto": "Naruto",
   "theme_happy_new_year": "New Year",

src/renderer/lang/zh-cn/store/state.json

@@ -9,6 +9,7 @@
   "theme_grey": "灰常美丽",
   "theme_ming": "青出于黑",
   "theme_blue2": "清热版蓝",
+  "theme_black": "黑纸白字",
   "theme_mid_autumn": "月里嫦娥",
   "theme_naruto": "木叶之村",
   "theme_happy_new_year": "新年快乐",

src/renderer/lang/zh-tw/store/state.json

@@ -9,6 +9,7 @@
   "theme_grey": "灰常美麗",
   "theme_ming": "青出於黑",
   "theme_blue2": "清熱版藍",
+  "theme_black": "黑紙白字",
   "theme_mid_autumn": "月裡嫦娥",
   "theme_naruto": "木葉之村",
   "theme_happy_new_year": "新年快樂",

src/renderer/store/state.js

@@ -57,6 +57,11 @@ export default {
       name: '青出于黑',
       class: 'blue2',
     },
+    {
+      id: 13,
+      name: '黑纸白字',
+      class: 'black',
+    },
     {
       id: 7,
       name: '月里嫦娥',