fix(theme): [grid,switch] update dark theme (#3242)

wuyiping0628 · web-flow · commit 74606af53235 · 2025-04-03T16:22:26.000+08:00
diff --git a/examples/sites/demos/pc/app/grid/custom-style/body-style-composition-api.vue b/examples/sites/demos/pc/app/grid/custom-style/body-style-composition-api.vue
@@ -112,6 +112,6 @@ const cellClassName = ({ rowIndex, columnIndex }) => {
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/custom-style/body-style.vue b/examples/sites/demos/pc/app/grid/custom-style/body-style.vue
@@ -121,6 +121,6 @@ export default {
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/custom-style/footer-style-composition-api.vue b/examples/sites/demos/pc/app/grid/custom-style/footer-style-composition-api.vue
@@ -147,7 +147,7 @@ const footerClassName = () => {
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 .footer-style :deep(.tiny-grid-footer__column.footer__cell--blue) {
   background-color: #2db7f5;
diff --git a/examples/sites/demos/pc/app/grid/custom-style/footer-style.vue b/examples/sites/demos/pc/app/grid/custom-style/footer-style.vue
@@ -156,7 +156,7 @@ export default {
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 .footer-style :deep(.tiny-grid-footer__column.footer__cell--blue) {
   background-color: #2db7f5;
diff --git a/examples/sites/demos/pc/app/grid/custom-style/header-style-composition-api.vue b/examples/sites/demos/pc/app/grid/custom-style/header-style-composition-api.vue
@@ -106,7 +106,7 @@ const headerClassName = () => {
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 .header-style :deep(.tiny-grid-header__row.header__row--red) {
   background-color: palevioletred;
diff --git a/examples/sites/demos/pc/app/grid/custom-style/header-style.vue b/examples/sites/demos/pc/app/grid/custom-style/header-style.vue
@@ -114,7 +114,7 @@ export default {
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 .header-style :deep(.tiny-grid-header__row.header__row--red) {
   background-color: palevioletred;
diff --git a/examples/sites/demos/pc/app/grid/custom/multiple-column-sort-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/multiple-column-sort-composition-api.vue
@@ -29,7 +29,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -107,6 +107,6 @@ const multiSortMethod = ({ $table, tableData, sortColumns }) => {
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/custom/multiple-column-sort.vue b/examples/sites/demos/pc/app/grid/custom/multiple-column-sort.vue
@@ -118,6 +118,6 @@ export default {
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/edit/editing-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/editing-composition-api.vue
@@ -98,6 +98,6 @@ const tableData = ref([
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/edit/editing.vue b/examples/sites/demos/pc/app/grid/edit/editing.vue
@@ -107,6 +107,6 @@ export default {
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/edit/status-of-editing-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/status-of-editing-composition-api.vue
@@ -96,6 +96,6 @@ const addRow = () => {
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: var(--tv-color-text-secondary, #191919);
+  color: var(--tv-color-text, #191919);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/edit/status-of-editing.vue b/examples/sites/demos/pc/app/grid/edit/status-of-editing.vue
@@ -105,6 +105,6 @@ export default {
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: var(--tv-color-text-secondary, #191919);
+  color: var(--tv-color-text, #191919);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/edit/trigger-mode-for-editing-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/trigger-mode-for-editing-composition-api.vue
@@ -97,6 +97,6 @@ const tableData = ref([
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/edit/trigger-mode-for-editing.vue b/examples/sites/demos/pc/app/grid/edit/trigger-mode-for-editing.vue
@@ -106,6 +106,6 @@ export default {
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing-composition-api.vue
@@ -133,6 +133,6 @@ const cancelRowEvent = (row) => {
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing.vue b/examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing.vue
@@ -140,6 +140,6 @@ export default {
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/size/adaptive-column-width-composition-api.vue b/examples/sites/demos/pc/app/grid/size/adaptive-column-width-composition-api.vue
@@ -72,6 +72,6 @@ const tableData = ref([
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/size/adaptive-column-width.vue b/examples/sites/demos/pc/app/grid/size/adaptive-column-width.vue
@@ -60,6 +60,6 @@ export default {
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/size/max-min-grid-height-composition-api.vue b/examples/sites/demos/pc/app/grid/size/max-min-grid-height-composition-api.vue
@@ -79,6 +79,6 @@ const toolbarButtonClickEvent = ({ code, $grid }) => {
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/size/max-min-grid-height.vue b/examples/sites/demos/pc/app/grid/size/max-min-grid-height.vue
@@ -87,6 +87,6 @@ export default {
   font-size: 16px;
   padding: 15px;
   font-weight: bolder;
-  color: #444;
+  color: var(--tv-color-text, #191919);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/validation/custcomp-composition-api.vue b/examples/sites/demos/pc/app/grid/validation/custcomp-composition-api.vue
@@ -14,7 +14,7 @@
       <tiny-grid-column field="telephone" title="telephone" :editor="{}">
         <template #edit="scope">
           <div>
-            <input class="grid-editor-input" v-model="scope.row.telephone" @input="slotOnInput($event, scope)" />
+            <input class="tiny-grid-default-input" v-model="scope.row.telephone" @input="slotOnInput($event, scope)" />
           </div>
         </template>
       </tiny-grid-column>
@@ -40,7 +40,7 @@ const CustomInput = {
     }
   },
   render() {
-    return <input value={this.modelValue} class="grid-editor-input" onChange={this.change} onInput={this.input} />
+    return <input value={this.modelValue} class="tiny-grid-default-input" onChange={this.change} onInput={this.input} />
   }
 }
 
@@ -171,10 +171,3 @@ function slotOnInput(e, scope) {
   scope.$table.updateStatus(scope, e.target.value)
 }
 </script>
-
-<style scoped>
-:deep(.tiny-grid) .col__edit .grid-editor-input {
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/grid/validation/custcomp.vue b/examples/sites/demos/pc/app/grid/validation/custcomp.vue
@@ -14,7 +14,7 @@
       <tiny-grid-column field="telephone" title="telephone" :editor="{}">
         <template #edit="scope">
           <div>
-            <input class="grid-editor-input" v-model="scope.row.telephone" @input="slotOnInput($event, scope)" />
+            <input class="tiny-grid-default-input" v-model="scope.row.telephone" @input="slotOnInput($event, scope)" />
           </div>
         </template>
       </tiny-grid-column>
@@ -39,7 +39,7 @@ const CustomInput = {
     }
   },
   render() {
-    return <input value={this.modelValue} class="grid-editor-input" onChange={this.change} onInput={this.input} />
+    return <input value={this.modelValue} class="tiny-grid-default-input" onChange={this.change} onInput={this.input} />
   }
 }
 
@@ -182,10 +182,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-:deep(.tiny-grid) .col__edit .grid-editor-input {
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/packages/theme/src/grid/table.less b/packages/theme/src/grid/table.less
@@ -485,6 +485,10 @@
 
     svg {
       fill: var(--tv-Grid-icon-color);
+
+      &:hover {
+        fill: var(--tv-Grid-icon-color-hover);
+      }
     }
 
     // 文字居中
diff --git a/packages/theme/src/grid/vars.less b/packages/theme/src/grid/vars.less
@@ -223,7 +223,7 @@
   // 内置select的下拉框选中状态背景色
   --tv-Grid-select-option-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
   // 加载中背景色
-  --tv-Grid-loading-mask-bg-color: var(--tv-color-bg-mask, rgba(0, 0, 0, 20%));
+  --tv-Grid-loading-mask-bg-color: var(--tv-color-bg-mask-block, rgba(255, 255, 255, 70%));
   // 表格无数据背景图片
   --tv-Grid-empty-img: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAiIGQ9Ik0wIDBoODB2ODBIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik01Ni45MiAyNXY0NS4wNmMwIDIuMTctMS43NyAzLjkzLTMuOTUgMy45M0gxMC45NEEzLjk0IDMuOTQgMCAwIDEgNyA3MC4wNlYzOS4zOWguODh2MzAuNjdhMy4wNiAzLjA2IDAgMCAwIDMuMDYgMy4wNmg0Mi4wM2MxLjcgMCAzLjA3LTEuMzcgMy4wNy0zLjA2VjI1Ljg3SDEwLjY3VjI1aDQ2LjI1eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik05LjQzIDI1Yy0uNiAwLTEuMTUuMzEtMS40Ni44MkwuMTMgMzguNjRjLS4yNi40Mi0uMTMuOTYuMjcgMS4yMi4xNC4wOS4yOS4xNC40Ni4xNGg0NC44MmMxLjE3IDAgMi4yNi0uNjEgMi45LTEuNjJMNTcuMDQgMjVIOS40M3ptLjIyIDFoNDUuNTJsLTcuNTIgMTEuODFjLS40Ny43NC0xLjI4IDEuMTktMi4xNCAxLjE5SDEuMTdsNy43NS0xMi42Yy4xNi0uMjUuNDMtLjQuNzMtLjR6IiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTcwLjc1IDI1Yy41NiAwIDEuMDguMyAxLjM5LjhsNy43MiAxMi43MmMuMjUuNDEuMTQuOTUtLjI1IDEuMjEtLjEzLjA5LS4yOC4xNC0uNDQuMTRINjYuMTRjLTEuMTcgMC0yLjI1LS42Ni0yLjg1LTEuNzNMNTUuOTggMjVoMTQuNzd6bS0uMDMgMUg1Ny44bDYuMzggMTEuNzFjLjQzLjggMS4yMiAxLjI5IDIuMDggMS4yOWgxMi42M0w3MS40IDI2LjM5YS44MDIuODAyIDAgMCAwLS42OC0uMzl6IiBmaWxsPSJncmF5Ii8+PHJlY3QgeD0iMTMuNSIgeT0iNTYiIHJ4PSIxLjg4NiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjQiIGZpbGw9IiMxNDc2RkYiLz48cGF0aCBkPSJNMjMuNTYgNjNjLjI0IDAgLjQ0LjIyLjQ0LjUgMCAuMjctLjIuNS0uNDQuNWgtOS42M2MtLjI0IDAtLjQzLS4yMy0uNDMtLjUgMC0uMjguMTktLjUuNDMtLjVoOS42M3oiIGZpbGw9ImdyYXkiLz48cmVjdCB4PSIxMy41IiB5PSI2NiIgcng9Ii41IiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTQwIDZjLjI3IDAgLjUuMTkuNS40NHY2LjE2YzAgLjI1LS4yMy40NC0uNS40NC0uMjggMC0uNTEtLjE5LS41MS0uNDRWNi40NGMwLS4yNS4yMy0uNDQuNTEtLjQ0ek01Ni41NSA4LjY0Yy4yNC4xNC4zMy40Mi4yMS42M2wtMy4wOCA1LjM0Yy0uMTIuMjEtLjQyLjI3LS42Ni4xMy0uMjQtLjE0LS4zMy0uNDItLjIxLS42M2wzLjA4LTUuMzRjLjEyLS4yMS40Mi0uMjcuNjYtLjEzek0yMy40NCA4LjY0Yy4yNC0uMTQuNTQtLjA4LjY2LjEzbDMuMDggNS4zNGMuMTIuMjEuMDMuNDktLjIxLjYzcy0uNTQuMDgtLjY2LS4xM2wtMy4wOC01LjM0Yy0uMTItLjIxLS4wMy0uNDkuMjEtLjYzeiIgZmlsbD0iZ3JheSIvPjwvZz48L3N2Zz4=');
   // 边框模式复选框禁用边框色
diff --git a/packages/theme/src/switch/index.less b/packages/theme/src/switch/index.less
@@ -128,4 +128,8 @@
   &&-checked&.mini &__button {
     left: var(--tv-Switch-mini-button-left);
   }
+
+  .disabled &__button {
+    background-color: var(--tv-color-bg-inverse-disabled);
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -112,6 +112,6 @@ const cellClassName = ({ rowIndex, columnIndex }) => {`
`112`	`112`	`font-size: 16px;`
`113`	`113`	`padding: 15px;`
`114`	`114`	`font-weight: bolder;`
`115`		`- color: #444;`
	`115`	`+ color: var(--tv-color-text, #191919);`
`116`	`116`	`}`
`117`	`117`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -121,6 +121,6 @@ export default {`
`121`	`121`	`font-size: 16px;`
`122`	`122`	`padding: 15px;`
`123`	`123`	`font-weight: bolder;`
`124`		`- color: #444;`
	`124`	`+ color: var(--tv-color-text, #191919);`
`125`	`125`	`}`
`126`	`126`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -147,7 +147,7 @@ const footerClassName = () => {`
`147`	`147`	`font-size: 16px;`
`148`	`148`	`padding: 15px;`
`149`	`149`	`font-weight: bolder;`
`150`		`- color: #444;`
	`150`	`+ color: var(--tv-color-text, #191919);`
`151`	`151`	`}`
`152`	`152`	`.footer-style :deep(.tiny-grid-footer__column.footer__cell--blue) {`
`153`	`153`	`background-color: #2db7f5;`
Original file line number	Diff line number	Diff line change
`@@ -156,7 +156,7 @@ export default {`
`156`	`156`	`font-size: 16px;`
`157`	`157`	`padding: 15px;`
`158`	`158`	`font-weight: bolder;`
`159`		`- color: #444;`
	`159`	`+ color: var(--tv-color-text, #191919);`
`160`	`160`	`}`
`161`	`161`	`.footer-style :deep(.tiny-grid-footer__column.footer__cell--blue) {`
`162`	`162`	`background-color: #2db7f5;`
Original file line number	Diff line number	Diff line change
`@@ -106,7 +106,7 @@ const headerClassName = () => {`
`106`	`106`	`font-size: 16px;`
`107`	`107`	`padding: 15px;`
`108`	`108`	`font-weight: bolder;`
`109`		`- color: #444;`
	`109`	`+ color: var(--tv-color-text, #191919);`
`110`	`110`	`}`
`111`	`111`	`.header-style :deep(.tiny-grid-header__row.header__row--red) {`
`112`	`112`	`background-color: palevioletred;`
Original file line number	Diff line number	Diff line change
`@@ -114,7 +114,7 @@ export default {`
`114`	`114`	`font-size: 16px;`
`115`	`115`	`padding: 15px;`
`116`	`116`	`font-weight: bolder;`
`117`		`- color: #444;`
	`117`	`+ color: var(--tv-color-text, #191919);`
`118`	`118`	`}`
`119`	`119`	`.header-style :deep(.tiny-grid-header__row.header__row--red) {`
`120`	`120`	`background-color: palevioletred;`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@`
`29`	`29`
`30`	`30`	`<script setup>`
`31`	`31`	`import { ref } from 'vue'`
`32`		`-import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'`
	`32`	`+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'`
`33`	`33`
`34`	`34`	`const tableData = ref([`
`35`	`35`	`{`
`@@ -107,6 +107,6 @@ const multiSortMethod = ({ $table, tableData, sortColumns }) => {`
`107`	`107`	`font-size: 16px;`
`108`	`108`	`padding: 15px;`
`109`	`109`	`font-weight: bolder;`
`110`		`- color: #444;`
	`110`	`+ color: var(--tv-color-text, #191919);`
`111`	`111`	`}`
`112`	`112`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -118,6 +118,6 @@ export default {`
`118`	`118`	`font-size: 16px;`
`119`	`119`	`padding: 15px;`
`120`	`120`	`font-weight: bolder;`
`121`		`- color: #444;`
	`121`	`+ color: var(--tv-color-text, #191919);`
`122`	`122`	`}`
`123`	`123`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -98,6 +98,6 @@ const tableData = ref([`
`98`	`98`	`font-size: 16px;`
`99`	`99`	`padding: 15px;`
`100`	`100`	`font-weight: bolder;`
`101`		`- color: #444;`
	`101`	`+ color: var(--tv-color-text, #191919);`
`102`	`102`	`}`
`103`	`103`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -107,6 +107,6 @@ export default {`
`107`	`107`	`font-size: 16px;`
`108`	`108`	`padding: 15px;`
`109`	`109`	`font-weight: bolder;`
`110`		`- color: #444;`
	`110`	`+ color: var(--tv-color-text, #191919);`
`111`	`111`	`}`
`112`	`112`	`</style>`