refactor: 暗黑模式自定义样式统一

Former-commit-id: 83dc3250

src/components/Breadcrumb/index.vue

 <template>
-  <el-breadcrumb
-    separator-class="el-icon-arrow-right"
-    class="h-[50px] flex items-center"
-  >
+  <el-breadcrumb class="h-[50px] flex items-center">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
         <span
           v-if="
             item.redirect === 'noredirect' || index === breadcrumbs.length - 1
           "
-          class="text-[#97a8be]"
+          class="text-[var(--el-disabled-text-color)]"
           >{{ translateRouteTitleI18n(item.meta.title) }}</span
         >
         <a v-else @click.prevent="handleLink(item)">
@@ -96,10 +93,11 @@ onBeforeMount(() => {
   font-size: 14px;
   line-height: 50px;
   margin-left: 8px;
+}
 
-  .no-redirect {
-    color: #97a8be;
-    cursor: text;
-  }
+// 覆盖 element-plus 的样式
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
 }
 </style>

src/components/Hamburger/index.vue

@@ -4,11 +4,11 @@
     class="px-[15px] hover:bg-gray-50 cursor-pointer h-[50px] leading-[50px] dark:hover:bg-[var(--el-fill-color-light)]"
   >
     <svg
-      :class="{ 'is-active': isActive  } "
+      :class="{ 'is-active': isActive }"
       class="hamburger"
       viewBox="0 0 1024 1024"
       xmlns="http://www.w3.org/2000/svg"
-      style="color:#FFF!important"
+      style="color: #fff !important"
     >
       <path
         d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
@@ -37,7 +37,7 @@ function toggleClick() {
 .hamburger {
   width: 20px;
   height: 20px;
-  vertical-align:-4px;
+  vertical-align: -4px;
   &.is-active {
     transform: rotate(180deg);
   }

src/components/RightPanel/index.vue

@@ -104,6 +104,7 @@ onBeforeUnmount(() => {
 }
 
 .right-panel {
+  background-color: var(--el-bg-color);
   width: 100%;
   max-width: 300px;
   height: 100vh;
@@ -113,7 +114,6 @@ onBeforeUnmount(() => {
   box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
   transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
   transform: translate(100%);
-  background: #fff;
   z-index: 199;
 
   .icon {
@@ -125,7 +125,6 @@ onBeforeUnmount(() => {
 
 .show {
   transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-
   .right-panel-background {
     z-index: 99;
     opacity: 1;
@@ -139,22 +138,18 @@ onBeforeUnmount(() => {
 }
 
 .right-panel__button {
+  background-color: var(--el-color-primary);
+  color: var(--el-color-white);
   width: 48px;
   height: 48px;
-  position: absolute;
   left: -48px;
+  line-height: 48px;
+  position: absolute;
   text-align: center;
   font-size: 24px;
-  border-radius: 6px 0 0 6px !important;
+  border-radius: 6px 0 0 6px;
   z-index: 0;
   pointer-events: auto;
   cursor: pointer;
-  color: #fff;
-  line-height: 48px;
-
-  i {
-    font-size: 24px;
-    line-height: 48px;
-  }
 }
 </style>

src/layout/components/AppMain.vue

@@ -23,6 +23,7 @@ const tagsViewStore = useTagsViewStore();
   width: 100%;
   position: relative;
   overflow: hidden;
+  background-color: var(--el-bg-color-page);
 }
 
 .fixed-header + .app-main {

src/layout/components/Settings/index.vue

@@ -9,7 +9,7 @@ import { useDark, useToggle } from '@vueuse/core';
  */
 const settingsStore = useSettingsStore();
 const isDark = useDark();
-const toggleDark = useToggle(isDark);
+const toggleDark = () => useToggle(isDark);
 
 /**
  * 切换布局
@@ -28,30 +28,32 @@ onMounted(() => {
   <div class="settings-container">
     <h3 class="text-base font-bold">项目配置</h3>
     <el-divider />
-    <div class="drawer-item">
-      <span>开启 Tags-View</span>
-      <el-switch v-model="settingsStore.tagsView" class="drawer-switch" />
+    <div class="py-[8px] flex justify-between">
+      <span class="text-xs">开启 Tags-View</span>
+      <el-switch v-model="settingsStore.tagsView" />
     </div>
 
-    <div class="drawer-item">
-      <span>固定 Header</span>
-      <el-switch v-model="settingsStore.fixedHeader" class="drawer-switch" />
+    <div class="py-[8px] flex justify-between">
+      <span class="text-xs">固定 Header</span>
+      <el-switch v-model="settingsStore.fixedHeader" />
     </div>
 
-    <div class="drawer-item">
-      <span>侧边栏 Logo</span>
-      <el-switch v-model="settingsStore.sidebarLogo" class="drawer-switch" />
+    <div class="py-[8px] flex justify-between">
+      <span class="text-xs">侧边栏 Logo</span>
+      <el-switch v-model="settingsStore.sidebarLogo" />
     </div>
 
     <el-divider>主题</el-divider>
 
     <div class="flex justify-center" @click.stop>
-     <el-switch
+      <el-switch
         v-model="isDark"
         @change="toggleDark"
         inline-prompt
-        :active-icon="Sunny"
-        :inactive-icon="Moon"
+        :active-icon="Moon"
+        :inactive-icon="Sunny"
+        active-color="var(--el-fill-color-dark)"
+        inactive-color="var(--el-color-primary)"
       />
     </div>
 
@@ -101,25 +103,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 .settings-container {
   padding: 16px;
-  font-size: 14px;
-
-  .drawer-title {
-    margin-bottom: 12px;
-    color: rgba(0, 0, 0, 0.85);
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-  .drawer-item {
-    color: rgba(0, 0, 0, 0.65);
-    font-size: 14px;
-    padding: 12px 0;
-  }
-
-  .drawer-switch {
-    float: right;
-  }
-
   .layout {
     display: flex;
     flex-wrap: wrap;

src/layout/components/Sidebar/Logo.vue

@@ -17,7 +17,7 @@ const logo = ref<string>(
 </script>
 
 <template>
-  <transition class="bg-gray-800">
+  <transition class="bg-gray-800 dark:bg-[var(--el-bg-color-overlay)]">
     <router-link
       v-if="collapse"
       key="collapse"

src/layout/components/Sidebar/index.vue

@@ -8,7 +8,7 @@ import { useSettingsStore } from '@/store/modules/settings';
 import { usePermissionStore } from '@/store/modules/permission';
 import { useAppStore } from '@/store/modules/app';
 import { storeToRefs } from 'pinia';
-import variables from '@/styles/ts-variables.module.scss'
+import variables from '@/styles/ts-variables.module.scss';
 
 const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
@@ -16,25 +16,15 @@ const appStore = useAppStore();
 
 const { sidebarLogo } = storeToRefs(settingsStore);
 const route = useRoute();
-
-const isCollapse = computed(() => !appStore.sidebar.opened);
-
-const activeMenu = computed<string>(() => {
-  const { meta, path } = route;
-  if (meta?.activeMenu) {
-    return meta.activeMenu;
-  }
-  return path;
-});
 </script>
 
 <template>
   <div :class="{ 'has-logo': sidebarLogo }">
-    <logo v-if="sidebarLogo" :collapse="isCollapse" />
+    <logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
     <el-scrollbar>
       <el-menu
-        :default-active="activeMenu"
-        :collapse="isCollapse"
+        :default-active="route.path"
+        :collapse="!appStore.sidebar.opened"
         :background-color="variables.menuBg"
         :text-color="variables.menuText"
         :active-text-color="variables.menuActiveText"
@@ -47,7 +37,7 @@ const activeMenu = computed<string>(() => {
           :item="route"
           :key="route.path"
           :base-path="route.path"
-          :is-collapse="isCollapse"
+          :is-collapse="!appStore.sidebar.opened"
         />
       </el-menu>
     </el-scrollbar>

src/styles/element.scss

-:root {
-  // 这里可以设置你自定义的颜色变量
-  // 这个是element主要按钮:active的颜色，当主题更改后此变量的值也随之更改
-  --el-color-primary-dark: #0d84ff;
-}
-
-// 覆盖 element-plus 的样式
-.el-breadcrumb__inner,
-.el-breadcrumb__inner a {
-  font-weight: 400 !important;
-}
-
-// 选中行背景色值
-.el-table__body tr.current-row td {
-  background-color: #e1f3d8b5 !important;
-}

src/styles/global.scss

@@ -20,4 +20,5 @@ svg {
     border-radius: var(--el-card-border-radius);
     border: 1px solid var(--el-border-color-light);
     box-shadow: var(--el-box-shadow-light);
-}
\ No newline at end of file
+    background-color: var(--el-bg-color-overlay);
+}

src/styles/index.scss

-@import './element.scss';
 @import './sidebar.scss';
 @import './tailwind.scss';
 @import './global.scss';

src/styles/sidebar.scss

@@ -222,4 +222,4 @@
       border-radius: 20px;
     }
   }
-}
\ No newline at end of file
+}

src/views/dashboard/index.vue

@@ -116,7 +116,6 @@ import Team from './components/Team/index.vue';
 <style lang="scss" scoped>
 .dashboard-container {
   padding: 24px;
-  background-color:var(--el-bg-color-page);
   position: relative;
 
   .github-corner {
@@ -156,7 +155,6 @@ import Team from './components/Team/index.vue';
     }
   }
 
-
   .card-panel {
     height: 108px;
     cursor: pointer;
@@ -165,8 +163,8 @@ import Team from './components/Team/index.vue';
     overflow: hidden;
     color: var(--el-text-color-regular);
     background: var(--el-bg-color-overlay);
-    box-shadow:var(--el-box-shadow-dark);
-    border-color:var(--el-border-color);
+    box-shadow: var(--el-box-shadow-dark);
+    border-color: var(--el-border-color);
 
     .icon-message {
       color: #36a3f7;