From 3fb286b5527216c55cf850b5396079b3190e0cec Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Sat, 30 Nov 2024 10:55:29 +0800
Subject: [PATCH] fix: element hover style in dark theme (#4983)

---
 apps/web-ele/src/views/demos/element/index.vue    | 15 +++++++++++++++
 .../@core/base/design/src/design-tokens/dark.css  |  2 ++
 .../base/design/src/design-tokens/default.css     |  2 ++
 packages/effects/hooks/src/use-design-tokens.ts   |  3 +++
 4 files changed, 22 insertions(+)

diff --git a/apps/web-ele/src/views/demos/element/index.vue b/apps/web-ele/src/views/demos/element/index.vue
index 2625cebd..55bc2571 100644
--- a/apps/web-ele/src/views/demos/element/index.vue
+++ b/apps/web-ele/src/views/demos/element/index.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
 import {
@@ -6,6 +8,7 @@ import {
   ElCard,
   ElMessage,
   ElNotification,
+  ElSegmented,
   ElSpace,
   ElTable,
 } from 'element-plus';
@@ -47,6 +50,10 @@ const tableData = [
   { prop1: '5', prop2: 'E' },
   { prop1: '6', prop2: 'F' },
 ];
+
+const segmentedValue = ref('Mon');
+
+const segmentedOptions = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 </script>
 
 <template>
@@ -84,6 +91,14 @@ const tableData = [
         <ElButton type="success" @click="notify('success')"> 成功 </ElButton>
       </ElSpace>
     </ElCard>
+    <ElCard class="mb-5">
+      <template #header> Segmented </template>
+      <ElSegmented
+        v-model="segmentedValue"
+        :options="segmentedOptions"
+        size="large"
+      />
+    </ElCard>
     <ElCard class="mb-5">
       <ElTable :data="tableData" stripe>
         <ElTable.TableColumn label="测试列1" prop="prop1" />
diff --git a/packages/@core/base/design/src/design-tokens/dark.css b/packages/@core/base/design/src/design-tokens/dark.css
index 6d236253..2a1d052f 100644
--- a/packages/@core/base/design/src/design-tokens/dark.css
+++ b/packages/@core/base/design/src/design-tokens/dark.css
@@ -58,6 +58,8 @@
 
   /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
   --accent: 216 5% 19%;
+  --accent-dark: 240 0% 22%;
+  --accent-darker: 240 0% 26%;
   --accent-lighter: 216 5% 12%;
   --accent-hover: 216 5% 24%;
   --accent-foreground: 0 0% 98%;
diff --git a/packages/@core/base/design/src/design-tokens/default.css b/packages/@core/base/design/src/design-tokens/default.css
index b999e129..c81ace7e 100644
--- a/packages/@core/base/design/src/design-tokens/default.css
+++ b/packages/@core/base/design/src/design-tokens/default.css
@@ -58,6 +58,8 @@
 
   /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
   --accent: 240 5% 96%;
+  --accent-dark: 216 14% 93%;
+  --accent-darker: 216 11% 91%;
   --accent-lighter: 240 0% 98%;
   --accent-hover: 200deg 10% 90%;
   --accent-foreground: 240 6% 10%;
diff --git a/packages/effects/hooks/src/use-design-tokens.ts b/packages/effects/hooks/src/use-design-tokens.ts
index 08c0f246..8ee74401 100644
--- a/packages/effects/hooks/src/use-design-tokens.ts
+++ b/packages/effects/hooks/src/use-design-tokens.ts
@@ -260,6 +260,9 @@ export function useElementPlusDesignTokens() {
         '--el-fill-color-light': getCssVariableValue('--accent'),
         '--el-fill-color-lighter': getCssVariableValue('--accent-lighter'),
 
+        '--el-fill-color-dark': getCssVariableValue('--accent-dark'),
+        '--el-fill-color-darker': getCssVariableValue('--accent-darker'),
+
         // 解决ElLoading背景色问题
         '--el-mask-color': isDark.value
           ? 'rgba(0,0,0,.8)'