暗黑主题适配

src/comps/Activiti/modeler/modeler.css

@@ -21,3 +21,4 @@
 }
 
 
+

src/comps/Activiti/modeler2/modeler.css

@@ -13,6 +13,10 @@
     background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+') repeat !important;
 }
 
+.dark #modeler-container {
+    background-color: #666 !important;
+}
+
 .djs-palette {
     border: none !important;
     background-color: #fff !important;

src/comps/bpm/tmpl/edit.vue

@@ -322,6 +322,10 @@ const codeShow=async ()=>{
 	background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+') repeat !important;
 }
 
+.dark .containers{
+	background-color: #666 !important;
+}
+
 .canvas {
 	width: 100%;
 	height: 100%;

src/comps/bpm/view.vue

@@ -80,7 +80,7 @@
 				<el-checkbox v-model='state.chtag' @change='toggleFlowChart'>流程图</el-checkbox>
 			</div>
 			<div class='zform-item' v-show='state.chtag'>
-				<div style='height:1000px'>
+				<div style='height:1000px;'>
 					<Modeler2 />
 				</div>
 			</div>

src/comps/sys/OrgModal.vue

@@ -13,7 +13,7 @@
 								<ul class='z-org-search' id='zOrgSearch' style='padding: 2px'>
 									<li v-for='item in receItems' :key='item.id' class='f-user' @click='receItemClick(item)'>
 										<el-checkbox v-model='item.checked' />
-										<img src='https://zsvg.gitee.io/vboot-vue/public/xiaoyoutai.png'>
+										<img :src='avatar'>
 										<span class='layui-elip f-user-name'>{{ item.name }}</span>
 										<span class='layui-elip f-user-dept'>{{ item.dept }}</span>
 									</li>
@@ -32,7 +32,7 @@
 										<ul class='z-org-tree'>
 											<li v-for='item in tierItems' :key='item.id' class='f-user' title=' ' @click='tierItemClick(item)'>
 												<el-checkbox v-model='item.checked' />
-												<img src='https://zsvg.gitee.io/vboot-vue/public/xiaoyoutai.png'>
+												<img :src='avatar'>
 												<span class='layui-elip f-user-name'>{{ item.name }}</span>
 												<span class='layui-elip f-user-dept'>{{ item.dept }}</span>
 											</li>
@@ -53,7 +53,7 @@
 										<ul class='z-org-tree'>
 											<li v-for='item in groupItems' :key='item.id' class='f-user' title=' ' @click='groupItemClick(item)'>
 												<el-checkbox v-model='item.checked' />
-												<img src='https://zsvg.gitee.io/vboot-vue/public/xiaoyoutai.png'>
+												<img :src='avatar'>
 												<span class='layui-elip f-user-name'>{{ item.name }}</span>
 											</li>
 										</ul>
@@ -73,7 +73,7 @@
 										<ul class='z-org-tree'>
 											<li v-for='item in roleItems' :key='item.id' class='f-user' title=' ' @click='roleItemClick(item)'>
 												<el-checkbox v-model='item.checked' />
-												<img src='https://zsvg.gitee.io/vboot-vue/public/xiaoyoutai.png'>
+												<img :src='avatar'>
 												<span class='layui-elip f-user-name'>{{ item.name }}</span>
 											</li>
 										</ul>
@@ -93,7 +93,7 @@
 										<ul class='z-org-tree'>
 											<li v-for='item in coopItems' :key='item.id' class='f-user' title=' ' @click='coopItemClick(item)'>
 												<el-checkbox v-model='item.checked' />
-												<img src='https://zsvg.gitee.io/vboot-vue/public/xiaoyoutai.png'>
+												<img :src='avatar'>
 												<span class='layui-elip f-user-name'>{{ item.name }}</span>
 											</li>
 										</ul>
@@ -115,7 +115,7 @@
 									<el-icon @click='selectedItemClick(item)'>
 										<circle-close />
 									</el-icon>
-									<img src='https://zsvg.gitee.io/vboot-vue/public/xiaoyoutai.png'>
+									<img :src='avatar'>
 									<span class='layui-elip f-user-name2'>{{ item.name }}</span>
 								</li>
 							</ul>
@@ -142,6 +142,7 @@ import RoleTree from '/@/comps/gen/GenTree.vue';
 import GroupTree from '/@/comps/gen/GenTree.vue';
 import CoopTree from '/@/comps/gen/GenTree.vue';
 import request from '/@/utils/request';
+import avatar from '/@/assets/avatar.png';
 
 let p_tab_key = 'k1';
 let p_select_mode = 1;//1单选，2多选
@@ -755,6 +756,10 @@ const clearAndcloseModal = () => {
 	background-color: #f7efec;
 }
 
+.dark .z-org-search li:hover {
+	background-color: #1f1f1f;
+}
+
 /*!*组织架构树*!*/
 .z-org-tree li {
 	margin: 3px;
@@ -767,6 +772,10 @@ const clearAndcloseModal = () => {
 	background-color: #f7efec;
 }
 
+.dark .z-org-tree li:hover {
+	background-color: #1f1f1f;
+}
+
 /*已选的*/
 .z-org-selected li {
 	margin: 3px;
@@ -779,6 +788,10 @@ const clearAndcloseModal = () => {
 	background-color: #f7efec;
 }
 
+.dark .z-org-selected li:hover {
+	background-color: #1f1f1f;
+}
+
 .z-org-selected .f-user .el-icon {
 	/*float: left;*/
 	/*position:relative;*/

src/layout/navBars/breadcrumb/breadcrumb.vue

@@ -3,7 +3,7 @@
 
     <div class='layout-navbars-breadcrumb-icon' style='text-align: center;padding-top: 16px;width: 48px;margin-right: 6px' 	@click="onThemeConfigChange">
       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="18" height="18" :class="['hamburger',{'is-active':!themeConfig.isCollapse}]">
-        <path data-v-49e15297="" 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"/>
+        <path class='hamburger-path' data-v-49e15297="" 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"/>
       </svg>
     </div>
 <!--		<SvgIcon-->
@@ -168,8 +168,15 @@ export default defineComponent({
 	}
 }
 
+.dark .layout-navbars-breadcrumb .layout-navbars-breadcrumb-icon:hover{
+	background-color: #111111;
+}
+
+.hamburger-path {fill:currentColor;}
+
 .hamburger.is-active {
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
 }
+
 </style>

src/layout/navBars/breadcrumb/setings.vue

@@ -550,8 +550,14 @@ export default defineComponent({
 		// 4、界面显示 --> 深色模式
 		const onAddDarkChange = () => {
 			const body = document.documentElement as HTMLElement;
-			if (getThemeConfig.value.isIsDark) body.setAttribute('data-theme', 'dark');
-			else body.setAttribute('data-theme', '');
+			// if (getThemeConfig.value.isIsDark) body.setAttribute('data-theme', 'dark');
+			// else body.setAttribute('data-theme', '');
+			if (getThemeConfig.value.isIsDark){
+				body.setAttribute('class', 'dark');
+			}
+			else{
+				body.setAttribute('class', '');
+			}
 		};
 		// 4、界面显示 --> 开启水印
 		const onWartermarkChange = () => {

src/layout/navBars/breadcrumb/userNews.vue

@@ -46,7 +46,7 @@ export default defineComponent({
 		};
 		// 前往通知中心点击
 		const onGoToGiteeClick = () => {
-			window.open('https://gitee.com/lyt-top/vue-next-admin');
+			window.open('https://gitee.com/zsvg/vboot-vue');
 		};
 		return {
 			onAllReadClick,

src/layout/navBars/tagsView/tagsView.vue

@@ -49,7 +49,7 @@
       </div>
     </div>
 
-    <div style="min-width:76px;width:76px;text-align: right;background-color: white">
+    <div style="" class='icon_div'>
       <div style="padding: 0;">
         <span class="icon-span" @click="toRefreshPage">
            <el-icon class="el-input__icon" style="font-size: 18px;margin-top: 8px;margin-bottom: 8px;margin-right: 4px">
@@ -680,13 +680,29 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+.icon_div{
+	min-width:76px;width:76px;text-align: right;
+	background-color: white;
+}
+
+.dark .icon_div{
+	background-color: #191919;
+}
+
 .icon-span{
-  border-left: 1px solid #d9d9d9;display: inline-block;padding-left: 7px;padding-right: 7px;cursor: pointer;color: #8c8c8c;
+  border-left: 1px solid #d9d9d9;
+	border-bottom: 1px solid #f1f2f3;
+	display: inline-block;padding-left: 7px;padding-right: 7px;cursor: pointer;color: #8c8c8c;
 }
 .icon-span:hover{
   color: #262626;
 }
 
+.dark .icon-span{
+	border-left: 1px solid #444444;
+	border-bottom: 1px solid #333333;
+}
+
 .rotate-go{
   transform: rotate(450deg);transition: all 1s;
 }
@@ -695,6 +711,7 @@ export default defineComponent({
   //transition: all 1s;
 }
 
+
 .layout-navbars-tagsview {
   background-color: var(--el-color-white);
   border-bottom: 1px solid var(--next-border-color-light);

src/main.ts

@@ -9,6 +9,7 @@ import other from '/@/utils/other';
 import ElementPlus from 'element-plus';
 import VForm3 from 'vform3-builds';
 import 'element-plus/dist/index.css';
+import 'element-plus/theme-chalk/dark/css-vars.css'
 import 'vform3-builds/dist/designer.style.css'
 import 'vxe-table/lib/style.css';
 import '/@/theme/index.scss';

src/pages/home/personal.vue

@@ -26,7 +26,7 @@
 						<el-menu
 							style='width: 246px'
 							default-active="1-1"
-							background-color="white"
+							background-color='white'
 							active-text-color="blue"
 							text-color="black"
 						>
@@ -233,6 +233,9 @@ const activeName = ref('tab1');
 	background-color: white !important;
 }
 
+.dark .my-personal .el-menu .el-menu-item.is-active{
+	background-color: #383434 !important;
+}
 
 
 .my-personal .el-menu .el-menu-item:hover {
@@ -243,4 +246,13 @@ const activeName = ref('tab1');
 .my-personal .el-menu .el-sub-menu .el-sub-menu__title:hover {
 	background-color: #eee !important;
 }
+
+
+.dark .my-personal .el-menu .el-menu-item:hover {
+	background-color: #333 !important;
+}
+
+.dark .my-personal .el-menu .el-sub-menu .el-sub-menu__title:hover {
+	background-color: #333 !important;
+}
  </style>

src/pages/oa/flow/main/FlowModal.vue

@@ -12,7 +12,7 @@
 						<ul class='z-flow-search' style='padding: 2px'>
 							<li v-for='item in receItems' :key='item.id' class='f-flow' @click='receItemClick(item)'>
 								<el-checkbox v-model='item.checked' />
-								<img src='https://zsvg.gitee.io/vboot-vue/public/vboot.png'>
+								<img :src='vbootPng'>
 								<span class='layui-elip f-flow-name'>{{ item.name }}</span>
 								<span class='layui-elip f-flow-cate'>{{ item.catna }}</span>
 							</li>
@@ -31,7 +31,7 @@
 								<ul class='z-cate-tree'>
 									<li v-for='item in tierItems' :key='item.id' class='f-flow' title='444444444' @click='tierItemClick(item)'>
 										<el-checkbox v-model='item.checked' />
-										<img src='https://zsvg.gitee.io/vboot-vue/public/vboot.png'>
+										<img :src='vbootPng'>
 										<span class='layui-elip f-flow-name'>{{ item.name }}</span>
 										<span class='layui-elip f-flow-cate'>{{ item.catna }}</span>
 									</li>
@@ -58,6 +58,7 @@ import { defineExpose, reactive, ref, toRaw, toRefs } from 'vue';
 import request from '/@/utils/request';
 import CateTree from '/@/comps/gen/GenTree.vue';
 import { ElMessage } from 'element-plus';
+import vbootPng from '/@/assets/vboot.png';
 
 let p_flow_type = -1;//
 let p_tab_key = 'k1';
@@ -273,6 +274,11 @@ const clearAndcloseModal = () => {
 	background-color: #f7efec;
 }
 
+.dark .z-flow-search li:hover {
+	background-color: #1f1f1f;
+}
+
+
 /*流程分类树*/
 .z-cate-tree li {
 	margin: 3px;
@@ -284,4 +290,8 @@ const clearAndcloseModal = () => {
 .z-cate-tree li:hover {
 	background-color: #f7efec;
 }
+
+.z-cate-tree .z-flow-search li:hover {
+	background-color: #1f1f1f;
+}
 </style>

src/pages/sys/org/dept/index.vue

@@ -11,8 +11,8 @@
 							<div>
 								<el-input v-model='state.form.name' placeholder='输入名称回车查询' clearable class='list-search'
 													@keyup.enter='listQuery(state)' />
-								<el-button type='primary' @click='listQuery(state)' :icon='Search' plain>查询</el-button>
-								<el-button class='more-button' :icon='state.moreParams?ArrowUp:ArrowDown' plain @click='state.moreParams=!state.moreParams' />
+								<el-button type='primary' @click='listQuery(state)' plain :icon='Search'>查询</el-button>
+								<el-button class='more-button' :icon='state.moreParams?ArrowUp:ArrowDown' @click='state.moreParams=!state.moreParams' />
 								<el-button type='warning' :icon='Operation' @click='changeIndex()' plain>切换维护方式</el-button>
 							</div>
 							<div>

src/pages/sys/org/dept/tree.vue

@@ -38,7 +38,7 @@ draggable :allow-drop='allowDrop' :allow-drag='allowDrag'
 @node-drag-start='handleDragStart' @node-drag-enter='handleDragEnter' @node-drag-leave='handleDragLeave'
 @node-drag-over='handleDragOver' @node-drag-end='handleDragEnd' @node-drop='handleDrop' />
 
-			<div :style="{'z-index': 9999,width:'100px',position: 'fixed',left:state.optionCardX + 'px',top: state.optionCardY + 'px', }" v-show='state.optionCardShow' id='option-button-group'>
+			<div class='op-group' :style="{'z-index': 9999,width:'100px',position: 'fixed',left:state.optionCardX + 'px',top: state.optionCardY + 'px', }" v-show='state.optionCardShow' id='option-button-group'>
 				<el-button class='option-card-button' @click='addChildCate' style='border-bottom: 0'>新增部门</el-button>
 				<el-button class='option-card-button' @click='editCate' style='border-bottom: 0'>修改部门</el-button>
 				<el-button class='option-card-button' @click='deleteCate'>删除部门</el-button>
@@ -280,4 +280,8 @@ const deleteCate =async () => {
 	font-size: 10px;
 	border-radius: 0;
 }
+
+.op-group{
+	background-color: #1f1f1f;
+}
 </style>

src/pages/sys/org/group/cate_tree.vue

@@ -38,7 +38,7 @@
 				@node-drag-start='handleDragStart' @node-drag-enter='handleDragEnter' @node-drag-leave='handleDragLeave'
 				@node-drag-over='handleDragOver' @node-drag-end='handleDragEnd' @node-drop='handleDrop' />
 
-			<div :style="{'z-index': 9999,width:'100px',position: 'fixed',left:state.optionCardX + 'px',top: state.optionCardY + 'px', }"
+			<div class='op-group' :style="{'z-index': 9999,width:'100px',position: 'fixed',left:state.optionCardX + 'px',top: state.optionCardY + 'px', }"
 v-show='state.optionCardShow' id='option-button-group'>
 				<el-button class='option-card-button' @click='addChildCate' style='border-bottom: 0'>新增群组分类</el-button>
 				<el-button class='option-card-button' @click='editCate' style='border-bottom: 0'>修改群组分类</el-button>
@@ -281,4 +281,8 @@ const deleteCate =async () => {
 	font-size: 10px;
 	border-radius: 0;
 }
+
+.op-group{
+	background-color: #1f1f1f;
+}
 </style>

src/theme/dark-vxe.scss

@@ -0,0 +1,96 @@
+.dark .vxe-table--render-default .vxe-table--body-wrapper {
+  background-color: #171717;
+}
+
+.dark .vxe-table--render-default .vxe-body--row.row--current {
+  background-color: #11273B;
+}
+
+.dark .vxe-table--render-default .vxe-body--row.row--hover {
+  background-color: #242424;
+}
+
+.dark .vxe-table--render-default .vxe-body--row.row--hover.row--current {
+  background-color: #11273B;
+}
+
+
+//.dark .vxe-table--render-default .vxe-body--row.row--hover .row--current{
+//  background-color:#11273B;
+//}
+//.dark .vxe-table--render-default.border--default .vxe-table--header-wrapper, .vxe-table--render-default.border--full .vxe-table--header-wrapper, .vxe-table--render-default.border--outer .vxe-table--header-wrapper{
+.dark .vxe-table--render-default.border--full .vxe-table--header-wrapper {
+  background-color: #0B0B0B;
+}
+
+.dark .vxe-table--render-default.border--full .vxe-table--footer-wrapper {
+  background-color: #0B0B0B;
+}
+
+.dark .vxe-table--render-default {
+  color: #C9D1D9;
+}
+
+.dark .vxe-table .vxe-table--header-wrapper {
+  color: #B0B0B0;
+}
+
+.dark .vxe-table .vxe-table--footer-wrapper {
+  color: #B0B0B0;
+}
+
+.dark .vxe-toolbar {
+  background-color: #151515;
+}
+
+.dark .vxe-button {
+  background-color: #151515;
+}
+
+.dark .vxe-pager {
+  background-color: #151515;
+}
+
+
+.dark .vxe-input--inner {
+  background-color: #151515;
+}
+
+.dark .vxe-pager .vxe-pager--jump .vxe-pager--goto {
+  background-color: #151515;
+}
+
+.dark .vxe-pager .vxe-pager--next-btn {
+  background-color: #151515;
+}
+
+.dark .vxe-pager .vxe-pager--prev-btn {
+  background-color: #151515;
+}
+
+.dark .vxe-pager .vxe-pager--jump-prev {
+  background-color: #151515;
+}
+
+.dark .vxe-pager .vxe-pager--jump-next {
+  background-color: #151515;
+}
+
+.dark .vxe-table--render-default .vxe-body--row.row--checked {
+  background-color: #11273B;
+}
+
+.dark .vxe-custom--option .vxe-checkbox--icon:before,
+.dark .vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon:before,
+.dark .vxe-table--filter-option .vxe-checkbox--icon:before,
+.dark .vxe-export--panel-column-option .vxe-checkbox--icon:before {
+  background-color: #151515;
+}
+
+
+.dark .vxe-custom--option .vxe-checkbox--icon:before,
+.dark .vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon:before,
+.dark .vxe-table--filter-option .vxe-checkbox--icon:before,
+.dark .vxe-export--panel-column-option .vxe-checkbox--icon:before {
+  //border: 1px solid #dcdfe6;
+}

src/theme/dark2.scss

@@ -0,0 +1,245 @@
+/* 深色模式样式
+------------------------------- */
+.dark {
+	// 变量(自定义时，只需修改这里的值)
+	--next-bg-main: #1f1f1f;
+	--next-color-white: #ffffff;
+	--next-color-disabled: #191919;
+	--next-color-bar: #dadada;
+	--next-color-primary: #303030;
+	--next-border-color: #424242;
+	--next-border-black: #333333;
+	--next-border-columns: #2a2a2a;
+	--next-color-seting: #505050;
+	--next-text-color-regular: #9b9da1;
+	--next-text-color-placeholder: #7a7a7a;
+	--next-color-hover: #3c3c3c;
+	--next-color-hover-rgba: rgba(0, 0, 0, 0.3);
+
+	// root
+	--next-bg-main-color: var(--next-bg-main) !important;
+	--next-bg-topBar: var(--next-color-disabled) !important;
+	--next-bg-topBarColor: var(--next-color-bar) !important;
+	--next-bg-menuBar: var(--next-color-disabled) !important;
+	--next-bg-menuBarColor: var(--next-color-bar) !important;
+	--next-bg-columnsMenuBar: var(--next-color-disabled) !important;
+	--next-bg-columnsMenuBarColor: var(--next-color-bar) !important;
+	--next-border-color-light: var(--next-border-black) !important;
+	--next-color-primary-lighter: var(--next-color-primary) !important;
+	--next-color-success-lighter: var(--next-color-primary) !important;
+	--next-color-warning-lighter: var(--next-color-primary) !important;
+	--next-color-danger-lighter: var(--next-color-primary) !important;
+	--next-bg-color: var(--next-color-primary) !important;
+	--next-color-dark-hover: var(--next-color-hover) !important;
+	--next-color-menu-hover: var(--next-color-hover-rgba) !important;
+	--next-color-user-hover: var(--next-color-hover-rgba) !important;
+	--next-color-seting-main: var(--next-color-seting) !important;
+	--next-color-seting-aside: var(--next-color-hover) !important;
+	--next-color-seting-header: var(--next-color-primary) !important;
+
+	// element plus
+	--el-color-white: var(--next-color-disabled) !important;
+	////--el-text-color-primary: var(--next-color-bar) !important;
+	//--el-border-color: var(--next-border-black) !important;
+	//--el-border-color-light: var(--next-border-black) !important;
+	//--el-border-color-lighter: var(--next-border-black) !important;
+	//--el-border-color-extra-light: var(--el-color-primary-light-8) !important;
+	//--el-text-color-regular: var(--next-text-color-regular) !important;
+	//--el-bg-color: var(--next-color-disabled) !important;
+	--el-color-primary-light-9: var(--next-color-hover) !important;
+	//--el-text-color-disabled: var(--next-text-color-placeholder) !important;
+	//--el-text-color-disabled-base: var(--el-color-primary) !important;
+	//--el-text-color-placeholder: var(--next-text-color-placeholder) !important;
+	//--el-disabled-bg-color: var(--next-color-disabled) !important;
+	//--el-fill-base: var(--next-color-white) !important;
+	//--el-fill-colo: var(--next-color-hover-rgba) !important;
+	//--el-fill-color: var(--next-color-hover-rgba) !important;
+	//--el-fill-color-blank: var(--next-color-disabled) !important;
+	//--el-fill-color-light: var(--next-color-hover-rgba) !important;
+	//--el-bg-color-overlay: var(--el-color-primary-light-9) !important;
+	//--el-mask-color: rgb(42 42 42 / 80%);
+
+	// button
+	//.el-button {
+	//	&:hover {
+	//		border-color: var(--next-border-color) !important;
+	//	}
+	//}
+	//.el-button--primary,
+	//.el-button--info,
+	//.el-button--danger,
+	//.el-button--success,
+	//.el-button--warning {
+	//	--el-button-text-color: var(--next-color-white) !important;
+	//	--el-button-hover-text-color: var(--next-color-white) !important;
+	//	--el-button-disabled-text-color: var(--next-color-white) !important;
+	//	&:hover {
+	//		border-color: var(--el-button-hover-border-color, var(--el-button-hover-bg-color)) !important;
+	//	}
+	//}
+
+	// drawer
+	//.el-divider__text {
+	//	background-color: var(--el-color-white) !important;
+	//}
+	//.el-drawer {
+	//	border-left: 1px solid var(--next-border-color-light) !important;
+	//}
+	//
+	// tabs
+	//.el-tabs--border-card {
+	//	background-color: var(--el-color-white) !important;
+	//}
+	//.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+	//	background: var(--next-color-primary-lighter);
+	//}
+
+	// alert / notice-bar
+	.home-card-item {
+		border: 1px solid var(--next-border-color-light) !important;
+	}
+	.el-alert,
+	.notice-bar {
+		border: 1px solid var(--next-border-color) !important;
+		background-color: var(--next-color-disabled) !important;
+	}
+
+	// menu
+	.layout-aside {
+		border-right: 1px solid var(--next-border-color-light) !important;
+	}
+
+	// colorPicker
+	//.el-color-picker__mask {
+	//	background: unset !important;
+	//}
+	//.el-color-picker__trigger {
+	//	border: 1px solid var(--next-border-color-light) !important;
+	//}
+
+	// popper / dropdown
+	//.el-popper {
+	//	border: 1px solid var(--next-border-color) !important;
+	//	color: var(--el-text-color-primary) !important;
+	//	.el-popper__arrow:before {
+	//		background: var(--el-color-white) !important;
+	//		border: 1px solid var(--next-border-color);
+	//	}
+	//	a {
+	//		color: var(--el-text-color-primary) !important;
+	//	}
+	//}
+	//.el-popper,
+	//.el-dropdown-menu {
+	//	background: var(--el-color-white) !important;
+	//}
+	//.el-dropdown-menu__item:hover:not(.is-disabled) {
+	//	background: var(--el-bg-color) !important;
+	//}
+	//.el-dropdown-menu__item.is-disabled {
+	//	font-weight: 700 !important;
+	//}
+
+	// input
+	//.el-input-group__append,
+	//.el-input-group__prepend {
+	//	border: var(--el-input-border) !important;
+	//	border-right: none !important;
+	//	background: var(--next-color-disabled) !important;
+	//	border-left: 0 !important;
+	//}
+	//.el-input-number__decrease,
+	//.el-input-number__increase {
+	//	background: var(--next-color-disabled) !important;
+	//}
+
+	// tag
+	//.el-select .el-select__tags .el-tag {
+	//	background-color: var(--next-bg-color) !important;
+	//}
+	//
+	//// pagination
+	//.el-pagination.is-background .el-pager li:not(.disabled).active {
+	//	color: var(--next-color-white) !important;
+	//}
+	//.el-pagination.is-background .btn-next,
+	//.el-pagination.is-background .btn-prev,
+	//.el-pagination.is-background .el-pager li {
+	//	background-color: var(--next-bg-color);
+	//}
+
+	// radio
+	//.el-radio-button:not(.is-active) .el-radio-button__inner {
+	//	border: 1px solid var(--next-border-color-light) !important;
+	//	border-left: 0 !important;
+	//}
+	//.el-radio-button.is-active .el-radio-button__inner {
+	//	color: var(--next-color-white) !important;
+	//}
+
+	// countup
+	.countup-card-item-flex {
+		color: var(--el-text-color-primary) !important;
+	}
+
+	// editor
+	.editor-container {
+		.w-e-toolbar {
+			background: var(--el-color-white) !important;
+			border: 1px solid var(--next-border-color-light) !important;
+			.w-e-menu:hover {
+				background: var(--next-color-user-hover) !important;
+				i {
+					color: var(--el-text-color-primary) !important;
+				}
+			}
+		}
+		.w-e-text-container {
+			border: 1px solid var(--next-border-color-light) !important;
+			border-top: none !important;
+			.w-e-text {
+				background: var(--el-color-white) !important;
+			}
+		}
+	}
+
+	// date-picker
+	//.el-picker-panel {
+	//	background: var(--el-color-white) !important;
+	//}
+
+	// dialog
+	//.el-dialog {
+	//	border: 1px solid var(--el-border-color-lighter);
+	//	.el-dialog__header {
+	//		color: var(--el-text-color-primary) !important;
+	//	}
+	//}
+
+	// columns
+	.layout-columns-aside ul .layout-columns-active {
+		color: var(--next-color-white) !important;
+	}
+	.layout-columns-aside {
+		border-right: 1px solid var(--next-border-columns);
+	}
+
+	// tagsView
+	.tags-style-one {
+		.is-active {
+			color: var(--el-text-color-primary) !important;
+		}
+		.layout-navbars-tagsview-ul-li:hover {
+			border-color: var(--el-border-color-lighter) !important;
+		}
+	}
+
+	// loading
+	//.el-loading-mask {
+	//	background-color: var(--next-bg-main) !important;
+	//}
+
+
+
+
+}

src/theme/index.scss

@@ -5,5 +5,6 @@
 @import './iconSelector.scss';
 @import './media/media.scss';
 @import './waves.scss';
-@import './dark.scss';
+@import './dark2.scss';
+@import './dark-vxe.scss';
 @import './vboot.scss';

src/theme/vboot.scss

@@ -106,7 +106,7 @@
 
 .more-button {
   border: 1px dashed #409EFF;
-  background-color: #ecf5ff !important;
+  //background-color: #ecf5ff !important;
   color: #409eff;
   width: 38px;
   padding-left: 20px;
@@ -183,6 +183,11 @@
   border-right: 1px solid #d2d2d2
 }
 
+.dark .zform .zform-div{
+  border-top: 0;
+  border-right: 0;
+}
+
 .zform .el-form-item--default {
   margin: 0;
   padding: 0;
@@ -190,11 +195,21 @@
   border-bottom: 1px solid #d2d2d2;
 }
 
+.dark .zform .el-form-item--default {
+  border-left: 0;
+  border-bottom: 0;
+}
+
 .zform .zform-item{
   border-left: 1px solid #d2d2d2;
   border-bottom: 1px solid #d2d2d2;
 }
 
+.dark .zform .zform-item{
+  border-left: 0;
+  border-bottom: 0;
+}
+
 .zform .el-form-item--default .el-form-item__label {
   height: auto !important;
   background-color: #f6f6f6;
@@ -202,12 +217,21 @@
   padding: 0 2px 0 6px;
 }
 
+.dark .zform .el-form-item--default .el-form-item__label {
+  background-color: #1d1e1f;
+}
+
 .zform .el-form-item--default .el-form-item__content {
   padding: 4px;
   background-color: white;
   border-left: 1px solid #d2d2d2;
 }
 
+.dark .zform .el-form-item--default .el-form-item__content {
+  background-color: #1d1e1f;
+  border-left: 0;
+}
+
 .zform .el-form-item__content .zinput{
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -236,6 +260,8 @@
   width: 100%;
 }
 
+
+
 //以下为xform样式,没有边框
 .xform .el-form-item--default {
   margin: 0;
@@ -433,3 +459,37 @@
   background-image: url('https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/rules.png');
 }
 
+
+
+//暗黑颜色匹配
+.default-theme .splitpanes__splitter {
+  background-color: #f8f8f8 !important;
+}
+
+//[data-theme='dark'] .default-theme .splitpanes__pane {
+//  background-color: #2a2a2a !important;
+//}
+//
+//[data-theme='dark'] .default-theme .splitpanes__splitter {
+//  background-color: #1f1f1f !important;
+//  margin-left: 0 !important;
+//  border: 0!important;
+//}
+//
+//[data-theme='dark'] .splitpanes.default-theme .splitpanes__splitter:before,[data-theme='dark'] .splitpanes.default-theme .splitpanes__splitter:after{
+//  background-color: #605858 !important;
+//}
+
+.dark .default-theme .splitpanes__pane {
+  background-color: #2a2a2a !important;
+}
+
+.dark .default-theme .splitpanes__splitter {
+  background-color: #1f1f1f !important;
+  margin-left: 0 !important;
+  border: 0!important;
+}
+
+.dark .splitpanes.default-theme .splitpanes__splitter:before,.dark .splitpanes.default-theme .splitpanes__splitter:after{
+  background-color: #605858 !important;
+}