fix(grid): [grid] update dark theme (#3213)

wuyiping0628 · web-flow · commit 4c0e0075acbf · 2025-03-28T10:25:25.000+08:00
* fix(grid): [grid] update dark theme

* fix(grid): [grid] update dark theme
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: #444;
+  color: var(--tv-color-text-secondary, #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: #444;
+  color: var(--tv-color-text-secondary, #191919);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue b/examples/sites/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue
@@ -7,7 +7,7 @@
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
       <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
       <template #empty>
-        <span style="color: #ff8800">没有更多数据了！</span>
+        <span>没有更多数据了！</span>
       </template>
     </tiny-grid>
     <br />
diff --git a/examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue b/examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue
@@ -7,7 +7,7 @@
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
       <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
       <template #empty>
-        <span style="color: #ff8800">没有更多数据了！</span>
+        <span>没有更多数据了！</span>
       </template>
     </tiny-grid>
     <br />
diff --git a/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column-composition-api.vue
@@ -80,10 +80,10 @@ function clickHandler(row) {
 }
 .demo-custom-column svg {
   font-size: 16px;
-  fill: var(--ti-common-color-line-active);
+  fill: var(--tv-color-icon);
 }
 .demo-custom-column svg:hover {
-  fill: #40a9ff;
+  fill: var(--tv-color-icon-hover);
   cursor: pointer;
 }
 .demo-custom-column svg:not(:last-child) {
diff --git a/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.vue b/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.vue
@@ -89,10 +89,10 @@ export default {
 }
 .demo-custom-column svg {
   font-size: 16px;
-  fill: var(--ti-common-color-line-active);
+  fill: var(--tv-color-icon);
 }
 .demo-custom-column svg:hover {
-  fill: #40a9ff;
+  fill: var(--tv-color-icon-hover);
   cursor: pointer;
 }
 .demo-custom-column svg:not(:last-child) {
diff --git a/examples/sites/demos/pc/app/grid/validation/bubbling-composition-api.vue b/examples/sites/demos/pc/app/grid/validation/bubbling-composition-api.vue
@@ -101,7 +101,7 @@ function asteriskMethod({ column }) {
 .demo-body {
   height: 400px;
   overflow: scroll;
-  background: #e5edbc;
+  background: var(--tv-color-warn-bg-light, #ffebd1);
 }
 .demo-body > .demo-container {
   height: 3000px;
diff --git a/examples/sites/demos/pc/app/grid/validation/bubbling.vue b/examples/sites/demos/pc/app/grid/validation/bubbling.vue
@@ -112,7 +112,7 @@ export default {
 .demo-body {
   height: 400px;
   overflow: scroll;
-  background: #e5edbc;
+  background: var(--tv-color-warn-bg-light, #ffebd1);
 }
 .demo-body > .demo-container {
   height: 3000px;
diff --git a/packages/theme/src/grid/checkbox.less b/packages/theme/src/grid/checkbox.less
@@ -110,6 +110,10 @@
         > svg {
           fill: var(--tv-Grid-checkbox-border-color-disabled);
 
+          path {
+            fill: var(--tv-Grid-icon-color-disabled);
+          }
+
           path:first-of-type {
             fill: var(--tv-Grid-checkbox-bg-color-disabled);
           }
diff --git a/packages/theme/src/grid/radio.less b/packages/theme/src/grid/radio.less
@@ -103,6 +103,10 @@
         > svg {
           fill: var(--tv-Grid-radio-border-color-disabled);
 
+          path {
+            fill: var(--tv-Grid-icon-color-disabled);
+          }
+
           path:last-child {
             fill: var(--tv-Grid-radio-icon-color-disabled);
           }
diff --git a/packages/theme/src/grid/table.less b/packages/theme/src/grid/table.less
@@ -30,7 +30,7 @@
 
   // 展开行背景颜色
   .@{grid-prefix-cls}-body__expanded-row {
-    background-color: var(--tv-Grid-gray-bg-color);
+    background-color: var(--tv-Grid-expanded-row-bg-color);
   }
 
   // 显示表尾
@@ -482,6 +482,11 @@
   & &-header__column {
     padding: var(--tv-Grid-header-padding-y) var(--tv-Grid-cell-padding-x);
     height: var(--tv-Grid-header-height);
+
+    svg {
+      fill: var(--tv-Grid-icon-color);
+    }
+
     // 文字居中
     &.col__center {
       .@{grid-prefix-cls}-cell {
@@ -832,7 +837,11 @@
 
           svg {
             font-size: var(--tv-Grid-icon-size);
-            fill: var(--tv-Grid-text-color);
+            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
@@ -53,6 +53,8 @@
   --tv-Grid-bg-color-selected: var(--tv-color-bg-active-emphasize-light, #f0f7ff);
   // 表格浅灰色背景颜色（展开行、斑马纹等）
   --tv-Grid-gray-bg-color: var(--tv-color-bg-gray-1, #fafafa);
+  // 表格浅展开行背景颜色
+  --tv-Grid-expanded-row-bg-color: var(--tv-color-bg-3, #ffffff);
   // -------表头相关样式-------
   // 表头高度
   --tv-Grid-header-height: var(--tv-size-height-lg, 40px);
@@ -199,7 +201,7 @@
   // 内置输入框框字体大小
   --tv-Grid-input-font-size: var(--tv-font-size-default, 14px);
   // 内置输入框背景色
-  --tv-Grid-input-bg-color: var(--tv-color-bg-3, #ffffff);
+  --tv-Grid-input-bg-color: var(--tv-color-bg-secondary, #ffffff);
   // 内置输入框边框圆角
   --tv-Grid-input-border-radius: var(--tv-border-radius-md, 6px);
   // 内置输入框悬浮边框颜色

Original file line number	Diff line number	Diff line change
`@@ -96,6 +96,6 @@ const addRow = () => {`
`96`	`96`	`font-size: 16px;`
`97`	`97`	`padding: 15px;`
`98`	`98`	`font-weight: bolder;`
`99`		`- color: #444;`
	`99`	`+ color: var(--tv-color-text-secondary, #191919);`
`100`	`100`	`}`
`101`	`101`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -105,6 +105,6 @@ export default {`
`105`	`105`	`font-size: 16px;`
`106`	`106`	`padding: 15px;`
`107`	`107`	`font-weight: bolder;`
`108`		`- color: #444;`
	`108`	`+ color: var(--tv-color-text-secondary, #191919);`
`109`	`109`	`}`
`110`	`110`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -80,10 +80,10 @@ function clickHandler(row) {`
`80`	`80`	`}`
`81`	`81`	`.demo-custom-column svg {`
`82`	`82`	`font-size: 16px;`
`83`		`- fill: var(--ti-common-color-line-active);`
	`83`	`+ fill: var(--tv-color-icon);`
`84`	`84`	`}`
`85`	`85`	`.demo-custom-column svg:hover {`
`86`		`- fill: #40a9ff;`
	`86`	`+ fill: var(--tv-color-icon-hover);`
`87`	`87`	`cursor: pointer;`
`88`	`88`	`}`
`89`	`89`	`.demo-custom-column svg:not(:last-child) {`
Original file line number	Diff line number	Diff line change
`@@ -89,10 +89,10 @@ export default {`
`89`	`89`	`}`
`90`	`90`	`.demo-custom-column svg {`
`91`	`91`	`font-size: 16px;`
`92`		`- fill: var(--ti-common-color-line-active);`
	`92`	`+ fill: var(--tv-color-icon);`
`93`	`93`	`}`
`94`	`94`	`.demo-custom-column svg:hover {`
`95`		`- fill: #40a9ff;`
	`95`	`+ fill: var(--tv-color-icon-hover);`
`96`	`96`	`cursor: pointer;`
`97`	`97`	`}`
`98`	`98`	`.demo-custom-column svg:not(:last-child) {`
Original file line number	Diff line number	Diff line change
`@@ -101,7 +101,7 @@ function asteriskMethod({ column }) {`
`101`	`101`	`.demo-body {`
`102`	`102`	`height: 400px;`
`103`	`103`	`overflow: scroll;`
`104`		`- background: #e5edbc;`
	`104`	`+ background: var(--tv-color-warn-bg-light, #ffebd1);`
`105`	`105`	`}`
`106`	`106`	`.demo-body > .demo-container {`
`107`	`107`	`height: 3000px;`
Original file line number	Diff line number	Diff line change
`@@ -112,7 +112,7 @@ export default {`
`112`	`112`	`.demo-body {`
`113`	`113`	`height: 400px;`
`114`	`114`	`overflow: scroll;`
`115`		`- background: #e5edbc;`
	`115`	`+ background: var(--tv-color-warn-bg-light, #ffebd1);`
`116`	`116`	`}`
`117`	`117`	`.demo-body > .demo-container {`
`118`	`118`	`height: 3000px;`