From 45852eb4b9e51caebf9826e86cf4b5bdcb8372b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chuailei000=E2=80=9D?= <2280131253@qq.com>
Date: Thu, 7 Jul 2022 14:33:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E9=A2=9C=E8=89=B2=E4=BB=A5=E5=90=8Ebutton=20?=
 =?UTF-8?q?hover=E9=A2=9C=E8=89=B2=E4=B8=8D=E4=B8=80=E8=87=B4=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/theme/index.js | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/utils/theme/index.js b/src/utils/theme/index.js
index dd7da1dc0..49bf0012b 100644
--- a/src/utils/theme/index.js
+++ b/src/utils/theme/index.js
@@ -1,4 +1,4 @@
-import { generateColors, changeSidebarColor } from './color'
+import { generateColors, changeSidebarColor, mix } from './color'
 import axios from 'axios'
 import formula from './formula.json'
 import variables from '@/styles/var.scss'
@@ -10,14 +10,22 @@ export function writeNewStyle(themeColor) {
   let colorsCssText = ''
   let cssText = originalStyle
   const colors = generateColors(themeColor)
-  Object.keys(colors).forEach((key) => {
-    cssText = cssText.replace(new RegExp('(:|\\s+)' + key, 'g'), '$1' + `${colors[key]}`)
+  for (const [key, value] of Object.entries(colors)) {
+    const blendColor = mix('ffffff', value.replace(/#/g, ''), 35)
+    cssText = cssText.replace(new RegExp('(:|\\s+)' + key, 'g'), '$1' + `${value}`)
     colorsCssText += `
-      .color-${key}{color: ${colors[key]}!important;}
-      .bg-${key}{background-color: ${colors[key]}!important;}
-      .border-${key}{border-color: ${colors[key]}!important;}
+      .color-${key}{color: ${value}!important;}
+      .bg-${key}{background-color: ${value}!important;}
+      .border-${key}{border-color: ${value}!important;}
+      .el-button--${key}.is-disabled,
+      .el-button--${key}.is-disabled:active,
+      .el-button--${key}.is-disabled:focus,
+      .el-button--${key}:hover{
+        background-color: ${blendColor}!important;
+        border-color: ${blendColor}!important;
+      }
     `
-  })
+  }
 
   let styleTag = document.getElementById('themeStyle')
   if (!styleTag) {