fix: element hover style in dark theme (#4983)

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" />

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%;

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%;

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)'