feature: 统一主题色

jsxiaosi · Jun 29, 2022 · b6fc34d · b6fc34d
1 parent a199bfd
commit b6fc34d
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 42 deletions.
diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts
@@ -38,9 +38,10 @@ export function createVitePlugins(isBuild = false, _configEnv: ConfigEnv) {
 
   vitePlugins.push(configPwaPlugin());
 
+  /* 会重复引入与组件数量相等的主题变量 */
   vitePlugins.push(
     ElementPlus({
-      // useSource: true,
+      useSource: true,
     }),
   );
 

diff --git a/src/layouts/pageLayouts/components/AppTabs/index.vue b/src/layouts/pageLayouts/components/AppTabs/index.vue
@@ -118,7 +118,7 @@
         text-align: center;
         line-height: $tabsPageHeight;
         font-size: 16px;
-        border: 1px solid var(--text-color-placeholder);
+        border: 1px solid var(--border-color-light);
       }
     }
     // .el-tabs :deep(.el-tabs__header) {
@@ -150,7 +150,7 @@
               height: 100%;
               line-height: $tabsPageHeight - 10;
               border-radius: 4px;
-              border: 1px solid var(--text-color-placeholder);
+              border: 1px solid var(--border-color-light);
               margin-right: 4px;
             }
           }

diff --git a/src/layouts/pageLayouts/components/Navbart/index.vue b/src/layouts/pageLayouts/components/Navbart/index.vue
@@ -58,7 +58,7 @@
     height: #{$navBarHeight};
     padding: 0 20px;
     background-color: $navBarColor;
-    border-bottom: 1px solid $navBarBorderBottomColor;
+    border-bottom: 1px solid var(--border-color-light);
     box-shadow: 1px 0 20px rgb(0 0 0 / 8%);
 
     .navbar-left {

diff --git a/src/styles/el-theme.scss b/src/styles/el-theme.scss
@@ -16,7 +16,7 @@ $menuItemText: var(--text-color-primary); //二级文字颜色
 $menuItemHover: var(--sub-main-bg-content); //二级焦点背景颜色
 $menuItemHoverText: var(--mian-color); //二级焦点文字颜色
 $menuItemActiveText: var(--mian-color); //二级选中的背景颜色
-$menuItemActiveBg: var(--sub-color1); //二级选中背景颜色
+$menuItemActiveBg: var(--sub-color-2); //二级选中背景颜色
 $menuItemActiveBorderLeft: var(--mian-color); //二级左描边背景颜色
 
 $app-main-bg-color: var(--sub-main-bg-content); //app-mian背景颜色

diff --git a/src/styles/element/index.scss b/src/styles/element/index.scss
@@ -1,14 +1,12 @@
-/* 修改element颜色变量 */
-// @forward 'element-plus/theme-chalk/src/common/var.scss' with (
-//   $colors: (
-//     'primary': (
-//       'base': green,
-//     ),
-//   )
-// );
-// @use "element-plus/theme-chalk/src/index.scss" as *;
-
-@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
+$text-color-base: #909399;
 
-@import '../theme.scss';
+/* 修改element颜色变量 */
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (),
+  $text-color: (
+    'primary': #909399,
+    'regular': #606266,
+    'placeholder': #ebeef5,
+  )
+);
 @import '../el-theme.scss';
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,3 +1,5 @@
+@import 'element-plus/theme-chalk/dark/css-vars.css';
+@import './theme.scss';
 @import './intro.scss';
 @import './transition.scss';
 @import './sidebar.scss';

diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
@@ -50,7 +50,7 @@
     background-color: $menuBg;
     box-shadow: 1px 0 2px rgb(28 29 30 / 8%);
     transition: width 0.28s;
-    border-right: 1px solid var(--text-color-placeholder);
+    border-right: 1px solid var(--border-color-light);
 
     .el-menu-item::before {
       position: absolute;

diff --git a/src/styles/theme.scss b/src/styles/theme.scss
@@ -1,35 +1,24 @@
+/* 根据element 主题统一配色 */
 :root {
   // 统一颜色主题
   --color-white: #ffffff;
-  --mian-color: #409eff; //主色
-  --sub-color: #a5cfff; //浅蓝1
-  --sub-color1: #ecf5ff; //浅蓝2
+  --mian-color: var(--el-color-primary); //主色
+  --sub-color: var(--el-color-primary-light-5); //浅蓝1
+  --sub-color-2: var(--el-color-primary-light-8); //浅蓝2
 
   // 主题背景颜色
   --main-bg-color: #ffffff; // 首选背景颜色
   --sub-main-bg-content: #f5f6fa; //次选背景颜色
 
   // 主题文字颜色
-  --text-color-primary: #909399; // 首选文字颜色
-  --text-color-regular: #606266; // 次选文字颜色
-  --text-color-regular: #303133; // 标题/选中
-  --text-color-placeholder: #ebeef5; //分割线/备注
+  --text-color-primary: var(--el-text-color-primary); // 首选文字颜色
+  --text-color-regular: var(--el-text-color-regular); // 次选文字颜色
+  --text-color-placeholder: var(--el-text-color-placeholder); //分割线/备注
+
+  --border-color-light: var(--el-border-color-light);
 }
 
 html.dark {
-  // 统一颜色主题
-  --color-white: #ffffff;
-  --mian-color: #409eff; //主色
-  --sub-color: #212121;
-  --sub-color1: #153150;
-
-  // 主题背景颜色
   --main-bg-color: #212121; // 首选背景颜色
   --sub-main-bg-content: #151515; //次选背景颜色
-
-  // 主题文字颜色
-  --text-color-primary: #c9d1d9; // 首选文字颜色
-  --text-color-regular: #dee2e6; // 次选文字颜色
-  --text-color-regular: #ffffff; // 标题/选中
-  --text-color-placeholder: #4a4a4a; //分割线/备注
 }
diff --git a/src/views/components/drag/index.vue b/src/views/components/drag/index.vue
@@ -85,7 +85,7 @@
       width: 100%;
       padding: 20px;
       // line-height: 50px;
-      border: 1px solid var(--text-color-placeholder);
+      border: 1px solid var(--border-color-light);
       .handle {
         margin-right: 20px;
         cursor: move;
@@ -104,7 +104,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      border: 1px solid var(--text-color-placeholder);
+      border: 1px solid var(--border-color-light);
     }
   }
 </style>
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
@@ -161,7 +161,7 @@
     }
 
     .infinite {
-      border: 1px solid var(--text-color-placeholder);
+      border: 1px solid var(--border-color-light);
       .top {
         // width: 95%;
         height: 40px;
@@ -172,7 +172,7 @@
         // color: #909399;
         font-weight: 400;
         background: var(--sub-main-bg-content);
-        border-bottom: 1px solid var(--text-color-placeholder);
+        border-bottom: 1px solid var(--border-color-light);
 
         li {
           width: 34%;