From 031d613b18125c877ebaa4a3241c3b4bf9c7624a Mon Sep 17 00:00:00 2001 From: zhang Date: Mon, 6 Nov 2023 18:24:23 +0800 Subject: [PATCH] fix(vxe-table): theme dark is not work (#3239) --- .../VxeTable/src/css/component.scss | 1 - src/components/VxeTable/src/css/index.scss | 1 - .../VxeTable/src/css/scrollbar.scss | 29 --------- src/components/VxeTable/src/css/toolbar.scss | 2 +- src/components/VxeTable/src/css/variable.scss | 60 +++++++++++++++++-- 5 files changed, 55 insertions(+), 38 deletions(-) delete mode 100644 src/components/VxeTable/src/css/scrollbar.scss diff --git a/src/components/VxeTable/src/css/component.scss b/src/components/VxeTable/src/css/component.scss index 12b46154e..cbb3288a7 100644 --- a/src/components/VxeTable/src/css/component.scss +++ b/src/components/VxeTable/src/css/component.scss @@ -52,7 +52,6 @@ & > .ant-input-number, & > .ant-cascader-picker .ant-cascader-input, & > .ant-calendar-picker .ant-calendar-picker-input { - // border-color: $vxe-table-validate-error-color; box-shadow: none; } } diff --git a/src/components/VxeTable/src/css/index.scss b/src/components/VxeTable/src/css/index.scss index 6023205cf..c67d47d94 100644 --- a/src/components/VxeTable/src/css/index.scss +++ b/src/components/VxeTable/src/css/index.scss @@ -1,6 +1,5 @@ @import './common'; @import './variable'; -@import './scrollbar'; @import './toolbar'; @import './component'; @import 'vxe-table/styles/index'; diff --git a/src/components/VxeTable/src/css/scrollbar.scss b/src/components/VxeTable/src/css/scrollbar.scss deleted file mode 100644 index beea2d718..000000000 --- a/src/components/VxeTable/src/css/scrollbar.scss +++ /dev/null @@ -1,29 +0,0 @@ -.vxe-grid_scrollbar { - ::-webkit-scrollbar { - width: 8px; - height: 8px; - } - - ::-webkit-scrollbar-track { - background-color: #fff; - } - - ::-webkit-scrollbar-thumb { - border: 1px solid #f1f1f1; - border-radius: 5px; - background-color: rgb(0 0 0 / 10%); - box-shadow: inset 0 0 6px rgb(0 0 0 / 30%); - } - - ::-webkit-scrollbar-thumb:hover { - background-color: #a8a8a8; - } - - ::-webkit-scrollbar-thumb:active { - background-color: #a8a8a8; - } - - ::-webkit-scrollbar-corner { - background-color: #fff; - } -} diff --git a/src/components/VxeTable/src/css/toolbar.scss b/src/components/VxeTable/src/css/toolbar.scss index 8b30e3aef..2b98e861d 100644 --- a/src/components/VxeTable/src/css/toolbar.scss +++ b/src/components/VxeTable/src/css/toolbar.scss @@ -22,5 +22,5 @@ .vxe-toolbar .vxe-tools--wrapper, .vxe-toolbar .vxe-tools--operate .vxe-custom--wrapper .vxe-button { - margin-left: 1px; + margin-left: 10px; } diff --git a/src/components/VxeTable/src/css/variable.scss b/src/components/VxeTable/src/css/variable.scss index eedcf8b48..4f4e72e6f 100644 --- a/src/components/VxeTable/src/css/variable.scss +++ b/src/components/VxeTable/src/css/variable.scss @@ -1,6 +1,54 @@ -$vxe-primary-color: rgb(9 96 189) !default; -$vxe-table-row-current-background-color: rgb(9 96 189 / 30%); -$vxe-table-row-hover-current-background-color: rgb(9 96 189 / 20%); -$vxe-table-column-hover-background-color: rgb(9 96 189 / 30%); -$vxe-table-column-current-background-color: rgb(9 96 189 / 20%); -$vxe-table-validate-error-color: #f56c6c; +/* stylelint-disable scss/no-global-function-names */ +html[data-theme='dark'] { + // $bg-color: #151515; + // $tooltip-bg-color: #303133; + // $text-color: #c9d1d9; + // $border-color: #303030; + // $selected-bg-color: #1e1e1e; + // $striped-bg-color: #1e1e1e; + + --vxe-form-background-color: #151515; + --vxe-toolbar-background-color: #151515; + --vxe-pager-background-color: #151515; + --vxe-button-default-background-color: lighten(#151515, 15%); + --vxe-table-header-background-color: lighten(#151515, 5%); + --vxe-font-color: darken(#c9d1d9, 12%); + --vxe-table-header-font-color: #c9d1d9; + --vxe-table-footer-font-color: #c9d1d9; + --vxe-table-body-background-color: #151515; + --vxe-table-footer-background-color: #151515; + --vxe-table-row-striped-background-color: #1e1e1e; + --vxe-table-border-color: #303030; + --vxe-table-row-hover-background-color: #1e1e1e; + --vxe-table-row-hover-striped-background-color: darken(#1e1e1e, 10%); + --vxe-table-row-current-background-color: fade(#1e1e1e, 20%); + --vxe-table-row-hover-current-background-color: fade(#1e1e1e, 20%); + --vxe-table-column-hover-background-color: fade(#1e1e1e, 20%); + --vxe-table-column-current-background-color: fade(#1e1e1e, 20%); + --vxe-table-row-checkbox-checked-background-color: fade(#1e1e1e, 15%); + --vxe-table-row-hover-checkbox-checked-background-color: fade(#1e1e1e, 20%); + --vxe-table-menu-background-color: lighten(#303133, 10%); + --vxe-table-filter-panel-background-color: lighten(#151515, 5%); + --vxe-grid-maximize-background-color: #151515; + --vxe-pager-perfect-background-color: #151515; + --vxe-pager-perfect-button-background-color: lighten(#151515, 15%); + --vxe-input-background-color: #151515; + --vxe-input-border-color: #303030; + --vxe-select-panel-background-color: #151515; + --vxe-table-popup-border-color: #303030; + --vxe-select-option-hover-background-color: lighten(#1e1e1e, 15%); + --vxe-pulldown-panel-background-color: #151515; + --vxe-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px rgb(255 255 255 / 12%); + --vxe-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px rgb(255 255 255 / 12%); + --vxe-loading-background-color: rgb(0 0 0 / 50%); + --vxe-tooltip-dark-background-color: lighten(#303133, 25%); + --vxe-modal-header-background-color: #1e1e1e; + --vxe-modal-body-background-color: #303133; + --vxe-modal-border-color: #303030; + --vxe-toolbar-panel-background-color: #151515; + --vxe-input-disabled-color: lighten(#1e1e1e, 20%); + --vxe-input-disabled-background-color: lighten(#1e1e1e, 25%); + --vxe-checkbox-icon-background-color: lighten(#1e1e1e, 15%); + --vxe-checkbox-checked-icon-border-color: #303030; + --vxe-checkbox-indeterminate-icon-background-color: lighten(#1e1e1e, 15%); +}