Quellcode durchsuchen

feat: 修改部分暗黑模式

zhouyuhao vor 11 Monaten
Ursprung
Commit
d8c9dba3ae
5 geänderte Dateien mit 29 neuen und 7 gelöschten Zeilen
  1. 1 1
      src/assets/main.css
  2. 1 1
      src/hooks/rowClickStyle.ts
  3. 1 1
      src/styles/elementui.scss
  4. 23 1
      src/styles/theme.scss
  5. 3 3
      src/styles/vxeTable.scss

+ 1 - 1
src/assets/main.css

@@ -13,7 +13,7 @@
   /* background-color: white; */
 }
 ::-webkit-scrollbar-thumb {
-  background-color: #dddee0;
+  background-color: var(--color-scrollbar-thumb);
   border-radius: 20px;
   box-shadow: inset 0 0 0 white;
 }

+ 1 - 1
src/hooks/rowClickStyle.ts

@@ -1,6 +1,6 @@
 import { onMounted, onBeforeUnmount } from 'vue'
 
-export function useRowClickStyle(tableRef: any, rowClass: string = 'row--clicked') {
+export function useRowClickStyle(tableRef: any, rowClass: string = 'vxe-table-row-clicked-style') {
   const handleMouseDown = (event: any) => {
     const trElement = event.target.closest('tr')
     if (trElement && trElement.hasAttribute('rowid')) {

+ 1 - 1
src/styles/elementui.scss

@@ -212,7 +212,7 @@ div.el-dialog {
   padding: 0 0 8px;
   border-radius: 12px;
   overflow: hidden;
-  background-color: var(--management-bg-bolor);
+  background-color: var(--color-dialog-body-bg);
 }
 header.el-dialog__header {
   padding: 12px 16px;

+ 23 - 1
src/styles/theme.scss

@@ -83,6 +83,7 @@
   --color-table-header-bg: #f8f9fd;
 
   --color-dialog-header-bg: #f6f8fa;
+  --color-dialog-body-bg: #ffffff;
 
   // 按钮
   // default
@@ -172,6 +173,12 @@
     rgba(255, 237, 230) 100%
   );
   --scoring-smile-radio-color: #e0e2e6;
+
+  // 滚动条
+  --color-scrollbar-thumb: #656f7d;
+
+  --color-table-header-bg: #f8f9fd;
+  --color-table-click-row-bg: #ffe3cc;
 }
 
 :root.dark {
@@ -184,6 +191,14 @@
   --color-border: #3f434a;
   --color-header-bg: #30353c;
 
+  --border-hover-color: #654f3f;
+
+  --color-dialog-header-bg: #3e454f;
+  --color-dialog-body-bg: #30353c;
+
+  // 滚动条
+  --color-scrollbar-thumb: #656f7d;
+
   // 菜单选中背景
   --color-mune-active-bg: #553d2b;
 
@@ -208,7 +223,14 @@
   .el-input {
     --el-input-border: #656f7d;
   }
-
   --color-table-header-bg: #34383f;
   --el-input-focus: #2b2f36;
+
+  // vxe-table
+  --vxe-ui-layout-background-color: #2b2f36;
+  --vxe-ui-table-border-color: #3f434a;
+  --vxe-ui-table-column-icon-border-color: #6a6d73;
+  --color-table-header-bg: #30353c;
+
+  --color-table-click-row-bg: #8b582f;
 }

+ 3 - 3
src/styles/vxeTable.scss

@@ -60,14 +60,14 @@ div.vxe-table .vxe-sort--desc-btn.sort--active {
 }
 
 // 表格点击样式
-.row--clicked {
-  background-color: #ffe3cc !important;
+.vxe-table-row-clicked-style {
+  background-color: var(--color-table-click-row-bg) !important;
 }
 div.vxe-table--render-default tr.vxe-body--row.row--hover,
 .vxe-table--render-default tr.vxe-body--row.row--stripe.row--hover {
   background-color: var(--border-hover-color);
 }
-div.vxe-table--render-default tr.vxe-body--row.row--clicked {
+div.vxe-table--render-default tr.vxe-body--row.vxe-table-row-clicked-style {
   background-color: var(--border-hover-color);
 }