chore: dark config

src/components/seal-table/components/table-header.tsx

@@ -2,6 +2,7 @@ import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
 import React from 'react';
 import '../styles/header.less';
+
 import { TableHeaderProps } from '../types';
 
 const TableHeader: React.FC<TableHeaderProps> = (props) => {

src/components/seal-table/index.tsx

@@ -1,12 +1,24 @@
-import { Pagination, Spin, type PaginationProps } from 'antd';
+import { Pagination, Spin, theme, type PaginationProps } from 'antd';
 import _ from 'lodash';
 import React, { useMemo } from 'react';
+import styled from 'styled-components';
 import Header from './components/header';
 import HeaderPrefix from './components/header-prefix';
 import TableBody from './components/table-body';
 import './styles/index.less';
 import { SealColumnProps, SealTableProps } from './types';
 
+const Wrapper = styled.div<{ $token: any }>`
+  --ant-table-cell-padding-inline: ${(props) =>
+    props.$token.cellPaddingInline}px;
+  --ant-table-cell-padding-block: ${(props) => props.$token.cellPaddingBlock}px;
+  --ant-table-header-border-radius: ${(props) =>
+    props.$token.headerBorderRadius}px;
+  --ant-table-header-split-color: ${(props) => props.$token.headerSplitColor};
+  --ant-table-row-selected-bg: var(--ant-table-row-selected-bg);
+  --ant-table-row-selected-hover-bg: var(--ant-table-row-selected-hover-bg);
+`;
+
 const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
   props
 ) => {
@@ -32,7 +44,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
     loadChildren,
     loadChildrenAPI
   } = props;
-
+  const { token } = theme.useToken();
   const parsedColumns = useMemo(() => {
     if (columns) return columns;
 
@@ -122,7 +134,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
   };
 
   return (
-    <>
+    <Wrapper $token={token.Table}>
       <div className="seal-table-container">
         <div className="header-row-wrapper">
           <HeaderPrefix
@@ -166,7 +178,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
           ></Pagination>
         </div>
       )}
-    </>
+    </Wrapper>
   );
 };
 

src/components/seal-table/styles/index.less

@@ -11,11 +11,10 @@
 
   .header-row-wrapper {
     height: 50px;
-    // margin-bottom: 10px;
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    background-color: var(--color-fill-sider);
+    background-color: var(--ant-color-fill-tertiary);
     border-radius: var(--ant-table-header-border-radius)
       var(--ant-table-header-border-radius) 0 0;
 
@@ -29,17 +28,12 @@
   }
 
   .row-box {
-    // margin-bottom: 20px;
-    // border-radius: var(--ant-table-header-border-radius);
     overflow: hidden;
     border-bottom: 1px solid var(--ant-color-split);
-    // box-shadow: var(--box-shadow-base);
   }
 
   .expanded-row {
-    // background-color: var(--color-white-1);
     padding: 16px;
-    // border: 1px solid var(--color-fill-1);
     border-top: 0;
     border-radius: 0 0 var(--ant-table-header-border-radius)
       var(--ant-table-header-border-radius);
@@ -53,7 +47,6 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    // background-color: var(--color-fill-sider);
     transition: all 0.2s ease;
 
     &:hover {