refactor: 暗黑模式自定义样式调整

Former-commit-id: 3857806786944e41c688cb6e81a5d90276720e2a

.eslintrc-auto-import.json

@@ -107,7 +107,6 @@
     "useArrayMap": true,
     "useArrayReduce": true,
     "useArraySome": true,
-    "useArrayUnique": true,
     "useAsyncQueue": true,
     "useAsyncState": true,
     "useAttrs": true,

src/components/LangSelect/index.vue

@@ -24,7 +24,7 @@ function handleLanguageChange(lang: string) {
     @command="handleLanguageChange"
   >
     <div
-      class="cursor-pointer h-[50px] leading-[50px] text-center px-2.5 hover:bg-gray-50"
+      class="cursor-pointer text-[#5a5e66] h-[50px] leading-[50px] text-center px-2.5 hover:bg-gray-50 dark:hover:bg-[var(--el-fill-color-light)]"
     >
       <svg-icon icon-class="language" />
     </div>

src/components/Screenfull/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50"
+    class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50 dark:hover:bg-[var(--el-fill-color-light)]"
   >
     <svg-icon
       :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"

src/components/SizeSelect/index.vue

@@ -18,7 +18,7 @@ function handleSizeChange(size: string) {
 <template>
   <el-dropdown trigger="click" @command="handleSizeChange">
     <div
-      class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50"
+      class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50 dark:hover:bg-[var(--el-fill-color-light)]"
     >
       <svg-icon icon-class="size" />
     </div>

src/layout/components/TagsView/index.vue

@@ -210,7 +210,7 @@ function closeAllTags(view: TagView) {
 function openTagMenu(tag: TagView, e: MouseEvent) {
   const menuMinWidth = 105;
 
-  console.log("test",proxy?.$el)
+  console.log('test', proxy?.$el);
 
   const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
   const offsetWidth = proxy?.$el.offsetWidth; // container width
@@ -243,10 +243,7 @@ onMounted(() => {
 
 <template>
   <div class="tags-container">
-  <scroll-pane
+    <scroll-pane ref="scrollPaneRef" @scroll="handleScroll">
-    ref="scrollPaneRef"
-    @scroll="handleScroll"
-  >
       <router-link
         :class="'tags-item ' + (isActive(tag) ? 'active' : '')"
         v-for="tag in visitedViews"
@@ -342,7 +339,7 @@ onMounted(() => {
       }
       .tags-item-close {
         &:hover {
-            background:rgb(0 0 0 / 0.16)
+          background: rgb(0 0 0 / 0.16);
         }
       }
     }
@@ -350,27 +347,26 @@ onMounted(() => {
     &-close {
       border-radius: 100%;
       &:hover {
-        color:#FFF;
+        color: #fff;
-       background:rgb(0 0 0 / 0.16)
+        background: rgb(0 0 0 / 0.16);
       }
     }
-
   }
 }
 
 .tag-menu {
-  background: #fff;
+  background: var(--el-bg-color-overlay);
   z-index: 99;
   position: absolute;
   border-radius: 4px;
   font-size: 12px;
-  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: var(--el-box-shadow-light);
 
   li {
     padding: 8px 16px;
     cursor: pointer;
     &:hover {
-      background: #eee;
+      background: var(--el-fill-color-light);
     }
   }
 }

src/styles/dark.scss

@@ -1,12 +1,3 @@
-// only scss variables
-
-$--colors: (
-  "primary": ("base": red),
-);
-
-@forward "element-plus/theme-chalk/src/dark/var.scss" with ($colors: $--colors);
-
-
 html.dark {
   .navbar {
     background-color: var(--el-bg-color);
@@ -16,4 +7,7 @@ html.dark {
   .hamburger {
     fill: var(--el-text-color-regular);
   }
+
+
+
 }

src/styles/index.scss

@@ -3,3 +3,27 @@
 @import './tailwind.scss';
 @import './global.scss';
 @import './dark.scss';
+
+// 自定义全局CSS变量
+:root{
+  --menuBg:#304156;
+  --menuText:#bfcbd9;
+  --menuActiveText:#409eff;
+  --menuHover:#263445;
+
+  --subMenuBg: #1f2d3d;
+  --subMenuActiveText: #f4f4f5;
+  --subMenuHover: #001528;
+
+}
+
+html.dark{
+  --menuBg:var(--el-menu-bg-color);
+  --menuText:var(----el-menu-text-color);
+  --menuActiveText:var(--el-menu-active-color);
+  --menuHover:var(--el-menu-hover-bg-color);
+
+  --subMenuBg: var(--el-menu-bg-color);
+  --subMenuActiveText:var(--el-menu-active-color);
+  --subMenuHover: var(--el-menu-hover-bg-color);
+}

src/styles/variables.module.scss

@@ -1,11 +1,11 @@
 // 全局SCSS变量
-$menuText: #bfcbd9;
+$menuBg: var(--menuBg);
-$menuActiveText: #409eff;
+$menuText: var(--menuText);
-$menuBg: #304156;
+$menuActiveText: var(--menuActiveText);
-$menuHover: #263445;
+$menuHover: var(--menuHover);
 
-$subMenuBg: #1f2d3d;
+$subMenuBg:var(--subMenuBg);
-$subMenuActiveText: #f4f4f5;
+$subMenuActiveText:var(--subMenuActiveText);
-$subMenuHover: #001528;
+$subMenuHover:var(--subMenuHover);
 
 $sideBarWidth: 210px;

src/types/auto-imports.d.ts

@@ -108,7 +108,6 @@ declare global {
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
   const useArraySome: typeof import('@vueuse/core')['useArraySome']
-  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']
@@ -374,7 +373,6 @@ declare module 'vue' {
     readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
     readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
     readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
-    readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
     readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
     readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>