新增加暗黑主题

src/assets/styles/black.scss

@@ -0,0 +1,139 @@
+// 黑夜模式
+[data-theme='theme-black'] {
+  // root
+  --base-menu-color: #304156;
+  --base-menu-color-active: #f4f4f5;
+  --base-bg-main: #304156;
+  --base-menu-background: #304156;
+  --base-logo-title-color: #ffffff;
+  --base-topBar-background: #304156 !important;
+  --base-topBar-color: #fff;
+  --base-color: #304156;
+  // --base-tags-bg-border: #304156 !important;
+  //缩小状态下子菜单选中颜色
+  // --base-sub-menu-hover: #000;
+
+  --next-color-white: #ffffff;
+  --next-color-disabled: #304156;
+  --next-color-bar: #dadada;
+  --next-color-primary: #304156;
+  --next-border-color: #424242;
+  --next-border-black: #333333;
+  --next-text-color-regular: #9b9da1;
+  --next-text-color-placeholder: #7a7a7a;
+  --next-color-hover: #3c3c3c;
+  --next-color-hover-rgba: rgba(0, 0, 0, 0.3);
+
+  // el-ement ui 设置
+  --el-fill-color-light: var(--next-color-hover-rgba) !important;
+  --el-fill-color-blank: var(--base-bg-main) !important;
+  // element plus
+  --el-table-bg-color: var(--el-fill-color-blank);
+  --el-color-white: var(--next-color-disabled) !important;
+  --el-text-color-primary: var(--next-color-bar) !important;
+  --el-border-color-base: var(--next-border-black) !important;
+  --el-border-color-light: var(--next-border-black) !important;
+  --el-text-color-regular: var(--next-text-color-regular) !important;
+  --el-bg-color: var(--base-bg-main) !important;
+  --el-color-success-lighter: var(--next-color-primary) !important;
+  --el-color-warning-lighter: var(--next-color-primary) !important;
+  --el-color-danger-lighter: var(--next-color-primary) !important;
+  --el-color-primary-lighter: var(--next-color-primary) !important;
+  --el-color-primary-light-9: var(--next-color-hover) !important;
+  --el-text-color-disabled-base: var(--el-color-primary) !important;
+  --el-border-color-lighter: var(--next-border-black) !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-date-picker bg
+  --el-bg-color-overlay: var(--base-bg-main) !important;
+  // drawer
+  .drawer-item,
+  .drawer-title {
+    color: var(--next-color-white) !important;
+  }
+
+  // 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;
+    }
+  }
+
+  // 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(--main-bg-color);
+  }
+
+  // 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) !important;
+  }
+
+  // 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;
+  }
+
+  // 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;
+  }
+
+  //tags menu 选择
+  .tags-view-container .tags-view-wrapper .tags-view-item.active {
+    background-color: var(--base-color) !important;
+    // border-color: var(--base-color) !important;
+  }
+}

src/assets/styles/index.scss

@@ -5,26 +5,26 @@
 @import './sidebar.scss';
 @import './btn.scss';
 @import './waves.scss';
-
+@import './black.scss';
-body {
-  height: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-}
 
 label {
   font-weight: 700;
 }
 
-html {
+html,
-  height: 100%;
+body,
-  box-sizing: border-box;
-}
-
 #app {
+  margin: 0;
+  padding: 0;
+  width: 100%;
   height: 100%;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+  background-color: var(--base-bg-main);
+  // overflow: hidden;
+  position: relative;
 }
 
 *,
@@ -91,7 +91,7 @@ div:focus {
     visibility: hidden;
     display: block;
     font-size: 0;
-    content: " ";
+    content: ' ';
     clear: both;
     height: 0;
   }
@@ -103,7 +103,7 @@ div:focus {
 }
 
 .text-center {
-  text-align: center
+  text-align: center;
 }
 
 .link-type,
@@ -197,10 +197,10 @@ div:focus {
   margin-bottom: auto;
 }
 .w20 {
-	width: 20%;
+  width: 20%;
 }
 .w100 {
-	width: 100%;
+  width: 100%;
 }
 
 .pull-right {
@@ -269,4 +269,4 @@ div:focus {
 
 .table-td-thumb {
   width: 56px;
-}
+}

src/assets/styles/sidebar.scss

@@ -8,7 +8,7 @@
 
   // 展开sidebar状态设置svg-icon边距
   .openSidebar .layout-sidebar__container .svg-icon {
-    margin-right: 5px;
+    margin-right: 10px;
   }
   .hideSidebar {
     .layout-sidebar__container {

src/assets/styles/variables.module.scss

@@ -15,7 +15,10 @@ $panGreen: #30b08f;
   --base-menu-background: #ffffff;
   --base-logo-title-color: #ffffff;
   --base-topBar-background: #ffffff;
+	--base-topBar-color: #5a5e66;
   --base-sidebar-width: 210px;
+
+  --base-tags-bg-border: #d8dce5;
 }
 /***默认主题颜色配置***/
 [data-theme='theme-light'] {
@@ -30,8 +33,6 @@ $panGreen: #30b08f;
 
   //缩小状态下子菜单选中颜色
   --base-sub-menu-hover: #ccc;
-
-  // el-ement ui 设置
 }
 /***深色主题颜色配置***/
 [data-theme='theme-dark'] {
@@ -48,15 +49,3 @@ $panGreen: #30b08f;
   --el-fill-color-blank: #304156;
   --el-text-color-primary: #bfcbd9;
 }
-
-// sidebar
-//https://github.com/ElemeFE/element/issues/12951
-
-// the :export directive is the magic sauce for webpack
-// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
-/* js中import， import variables from '@/assets/styles/variables.module.scss'
-   template中使用 eg：variables.menuColor 
-*/
-
-// :export {
-// }

src/layout/components/Navbar.vue

@@ -101,7 +101,7 @@ function setLayout() {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #fff;
+  background: var(--base-topBar-background);
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
@@ -144,7 +144,7 @@ function setLayout() {
 
     .right-menu-item {
       padding: 0 8px;
-      color: #5a5e66;
+      color: var(--base-topBar-color);
       vertical-align: text-bottom;
     }
 

src/layout/components/Settings/index.vue

@@ -7,27 +7,22 @@
       <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
         <img src="@/assets/images/dark.svg" alt="dark" />
         <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
-          <i aria-label="图标: check" class="anticon anticon-check">
+          <el-icon><Check /></el-icon>
-            <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
-              <path
-                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-              />
-            </svg>
-          </i>
         </div>
       </div>
       <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
         <img src="@/assets/images/light.svg" alt="light" />
         <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
-          <i aria-label="图标: check" class="anticon anticon-check">
+          <el-icon><Check /></el-icon>
-            <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
-              <path
-                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-              />
-            </svg>
-          </i>
         </div>
       </div>
+      <div class="setting-drawer-block-checkbox-item drawer-title" @click="handleTheme('theme-black')">
+        <div v-if="sideTheme === 'theme-black'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
+          <el-icon><Check /></el-icon>
+        </div>
+        <el-icon><moon /></el-icon>
+        深色模式
+      </div>
     </div>
     <div class="drawer-item">
       <span>主题颜色</span>
@@ -38,7 +33,6 @@
     <el-divider />
 
     <h3 class="drawer-title">系统布局配置</h3>
-
     <div class="drawer-item">
       <span>开启 TopNav</span>
       <span class="comp-style">
@@ -96,6 +90,8 @@ const sideTheme = ref(store.state.settings.sideTheme)
 const storeSettings = computed(() => store.state.settings)
 const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'])
 
+const blackTheme = ref(false)
+
 /** 是否需要topnav */
 const topNav = computed({
   get: () => storeSettings.value.topNav,
@@ -162,6 +158,18 @@ watch(
     immediate: true,
   },
 )
+watch(
+  () => sideTheme,
+  (val) => {
+    console.log(val.value)
+    const body = document.documentElement
+    if (val.value == 'theme-black') body.setAttribute('data-theme', 'theme-black')
+    else body.setAttribute('data-theme', '')
+  },
+  {
+    immediate: true,
+  },
+)
 /**
  * 改变主题颜色
  */
@@ -173,7 +181,7 @@ function themeChange(val) {
   theme.value = val
   // 设置element-plus ui主题
   document.documentElement.style.setProperty('--el-color-primary', val)
-  
+
   // 颜色变浅
   for (let i = 1; i <= 9; i++) {
     document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(val, i / 10)}`)
@@ -185,6 +193,11 @@ function handleTheme(val) {
     value: val,
   })
   sideTheme.value = val
+  const body = document.documentElement
+  if (val == 'theme-black') body.setAttribute('data-theme', 'theme-black')
+  else body.setAttribute('data-theme', '')
+  console.log('change ' + val)
+  blackTheme.value = val === 'theme-black'
 }
 function saveSetting() {
   proxy.$modal.loading('正在保存到本地，请稍候...')

src/layout/components/TagsView/index.vue

@@ -70,10 +70,10 @@ function isActive(r) {
 }
 function activeStyle(tag) {
   if (!isActive(tag)) return {}
-  return {
+  // return {
-    'background-color': theme.value,
+  //   'background-color': theme.value,
-    'border-color': theme.value,
+  //   'border-color': theme.value,
-  }
+  // }
 }
 function isAffix(tag) {
   return tag.meta && tag.meta.affix
@@ -226,8 +226,8 @@ function handleScroll() {
 .tags-view-container {
   height: 34px;
   width: 100%;
-  background: #fff;
+  background: var(--base-topBar-background);
-  border-bottom: 1px solid #d8dce5;
+  // border-bottom: 1px solid #d8dce5;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
   .tags-view-wrapper {
     .tags-view-item {
@@ -236,9 +236,8 @@ function handleScroll() {
       cursor: pointer;
       height: 26px;
       line-height: 26px;
-      border: 1px solid #d8dce5;
+      border: 1px solid #ccc;
-      color: #495060;
+      color: var(--el-text-color-regular);
-      background: #fff;
       padding: 0 8px;
       font-size: 12px;
       margin-left: 5px;
@@ -250,9 +249,9 @@ function handleScroll() {
         margin-right: 15px;
       }
       &.active {
-        background-color: #42b983;
+        background-color: var(--el-color-primary);
+        border-color: var(--el-color-primary);
         color: #fff;
-        border-color: #42b983;
         &::before {
           content: '';
           background: #fff;

src/layout/index.vue

@@ -98,4 +98,4 @@ function setLayout() {
 .mobile .fixed-header {
   width: 100%;
 }
-</style>
+</style>