feat: 完善黑暗模式UI (#9443)

* feat: 支持黑暗模式 * 升级发布脚本版本 --------- Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>
2024-11-29 18:48:45 +08:00 · 2024-01-16 15:46:55 +08:00 · 2024-01-16 15:46:55 +08:00 · fcf6300b7b
commit fcf6300b7b
parent ddf581a40d
38 changed files with 273 additions and 207 deletions
--- a/examples/components/App.tsx
+++ b/examples/components/App.tsx
@ -58,6 +58,11 @@ const themes = [
    label: 'ang',
    ns: 'a-',
    value: 'ang'
+  },
+  {
+    label: '暗黑',
+    ns: 'dark-',
+    value: 'dark'
  }
 ];

--- a/examples/doc.css
+++ b/examples/doc.css
@ -471,11 +471,7 @@
 }

 .markdown-body table:not(.table) tr:nth-child(2n) {
-  background-color: #f8f8f8;
-}
-
-body.dark .markdown-body table:not(.table) tr:nth-child(2n) {
-  background: none;
+  background-color: var(--colors-neutral-fill-9);
 }

 .markdown-body table td:first-child,
@ -483,7 +479,7 @@ body.dark .markdown-body table:not(.table) tr:nth-child(2n) {
  position: sticky;
  left: 0;
  z-index: 10;
-  background-color: #fff;
+  background-color: var(--colors-neutral-fill-11);
  border-left: 0px !important;
 }

@ -502,7 +498,7 @@ body.dark .markdown-body table:not(.table) tr:nth-child(2n) {
 }

 .markdown-body table tr:nth-child(2n) td:first-child {
-  background-color: #f8f8f8;
+  background-color: var(--colors-neutral-fill-9);
 }

 /* modified by zhangjun08
--- a/examples/style.scss
+++ b/examples/style.scss
@ -5,8 +5,7 @@
 body {
  background-color: #fff !important;
  &.dark {
-    background-color: #333538 !important;
-
+    background-color: var(--colors-neutral-fill-11) !important;
    pre {
      color: #fff;
    }
@ -140,10 +139,10 @@ body {
        right: 20px;
        top: 15px;
        font-size: 22px;
-        color: #333;
+        color: var(--colors-neutral-text-3);

        &:hover {
-          color: #333;
+          color: var(--colors-neutral-text-3);
        }
      }
    }
@ -210,7 +209,7 @@ body {
        display: inline-block;
        padding: 20px;
        cursor: pointer;
-        color: #666;
+        color: var(--colors-neutral-text-3);

        > svg {
          width: 14px;
@ -282,7 +281,7 @@ body {

  > a {
    display: inline-block;
-    color: #333;
+    color: var(--colors-neutral-text-3);
    padding: 0px 5px;
    margin: 0 5px;
    font-weight: 500;
--- a/index.html
+++ b/index.html
@ -43,7 +43,7 @@
        theme = 'cxd';
      }

-      ['ang', 'cxd', 'antd'].forEach(key => {
+      ['ang', 'cxd', 'antd', 'dark'].forEach(key => {
        const link = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('title', key);
--- a/package.json
+++ b/package.json
@ -60,7 +60,7 @@
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
-    "amis-publish": "^1.0.0",
+    "amis-publish": "^1.0.1",
    "copy-to-clipboard": "3.3.1",
    "echarts": "5.4.0",
    "express": "^4.18.2",
--- a/packages/amis-theme-editor-helper/src/helper/ColorGenerator.ts
+++ b/packages/amis-theme-editor-helper/src/helper/ColorGenerator.ts
@ -4,8 +4,10 @@ export class ColorGenerator {
  color = '';
  //十六进制颜色值的正则表达式
  reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
-  constructor(color: string) {
+  isDark = false;
+  constructor(color: string, isDark: boolean = false) {
    this.setPrimaryColor(color);
+    this.isDark = isDark;
  }
  /**
   * 生成衍生色
@ -29,15 +31,27 @@ export class ColorGenerator {
      let sh, ss, sv;
      if (h > 60 && h < 300) {
        // 冷色
+        if (this.isDark) {
+          sh = h - index * 2;
+          ss = s - index * 5;
+          sv = v;
+        } else {
          sh = h + index * 2;
          ss = s + index * 5;
          sv = v - index * 15;
+        }
      } else {
        // 暖色
+        if (this.isDark) {
+          sh = h + index * 2;
+          ss = s - index * 5;
+          sv = v + index * 15;
+        } else {
          sh = h - index * 2;
          ss = s + index * 5;
          sv = v - index * 15;
        }
+      }
      const shsv = hsvCorrection([sh, ss, sv]);
      const srgb = ColorGenerator.hsvToRgb(shsv);
      const shex = ColorGenerator.rgbToHex(srgb);
@ -49,15 +63,27 @@ export class ColorGenerator {
      let wh, ws, wv;
      if (h > 60 && h < 300) {
        // 冷色
+        if (this.isDark) {
+          wh = h + index * 1;
+          ws = s + index * (s / 5);
+          wv = v - index * 5;
+        } else {
          wh = h - index * 1;
          ws = s - index * (s / 5);
          wv = v + index * 5;
+        }
      } else {
        // 暖色
+        if (this.isDark) {
+          wh = h - index * 1;
+          ws = s + index * (s / 5);
+          wv = v - index * (100 - v) * 2;
+        } else {
          wh = h + index * 1;
          ws = s - index * (s / 5);
          wv = v + index * (100 - v) * 5;
        }
+      }
      const whsv = hsvCorrection([wh, ws, wv]);
      const wrgb = ColorGenerator.hsvToRgb(whsv);
      const whex = ColorGenerator.rgbToHex(wrgb);
@ -76,8 +102,12 @@ export class ColorGenerator {
  getNeutralColor() {
    const rgb = ColorGenerator.hexToRgb(this.color);
    const [h, ,] = ColorGenerator.rgbToHsv(rgb);
-    const S = [65, 45, 25, 10, 6, 4, 2, 1, 1, 1, 0];
-    const V = [8, 15, 25, 40, 55, 75, 85, 92, 96, 98, 100];
+    let S = [65, 45, 25, 10, 6, 4, 2, 1, 1, 1, 0];
+    let V = [8, 15, 25, 40, 55, 75, 85, 92, 96, 98, 100];
+    if (this.isDark) {
+      S = S.reverse();
+      V = V.reverse();
+    }
    const colors: ResColor = [];
    for (let i = 0; i < 11; i++) {
      const newHsv = ColorGenerator.hsvCorrection([h, S[i], V[i]]);
--- a/packages/amis-theme-editor-helper/src/helper/declares.ts
+++ b/packages/amis-theme-editor-helper/src/helper/declares.ts
@ -57,6 +57,7 @@ export interface ThemeDefinition {
    name: string;
    key: string;
    description: string;
+    isDark?: boolean;
  };
  global: {
    colors: {
--- a/packages/amis-ui/scss/_components.scss
+++ b/packages/amis-ui/scss/_components.scss
--- a/packages/amis-ui/scss/_properties.scss
+++ b/packages/amis-ui/scss/_properties.scss
@ -113,8 +113,8 @@ $Table-strip-bg: transparent;
  --label--warning-bg: var(--warning);
  --label--danger-bg: var(--danger);

-  --label-color: var(--colors-neutral-text-11);
-  --label-link--hover-color: var(--colors-neutral-text-11);
+  --label-color: #fff;
+  --label-link--hover-color: #fff;

  --scrollbar-width: #{px2rem(17px)};

@ -161,7 +161,7 @@ $Table-strip-bg: transparent;
  --Avatar-icon-size-small: #{px2rem(12px)};

  --Badge-size: var(--gap-md);
-  --Badge-color: var(--colors-neutral-fill-11);
+  --Badge-color: #fff;
  --Badge--success-bg: var(--success);
  --Badge--info-bg: var(--info);
  --Badge--warning-bg: var(--warning);
@ -183,7 +183,7 @@ $Table-strip-bg: transparent;
  --Breadcrumb-item-default-color: var(--colors-neutral-text-5);
  --Breadcrumb-item-hover-color: var(--colors-brand-5);
  --Breadcrumb-item-active-color: var(--colors-brand-4);
-  --Breadcrumb-item-last-color: #151a26;
+  --Breadcrumb-item-last-color: var(--colors-neutral-text-2);
  --BreadcrumbDropdown-item-default-color: var(--colors-neutral-text-2);
  --BreadcrumbDropdown-item-default-bg: var(--colors-neutral-text-11);
  --BreadcrumbDropdown-item-hover-bg: var(--colors-brand-10);
@ -472,7 +472,7 @@ $Table-strip-bg: transparent;
  --ListControl-item-borderWidth: var(--borders-width-2);
  --ListControl-item-borderRadius: var(--borders-radius-3);
  --ListControl-item-color: var(--colors-neutral-text-2);
-  --ListControl-item-onActive-after-borderColor: var(--colors-neutral-line-11);
+  --ListControl-item-onActive-after-borderColor: #fff;
  --ListControl-item-onActive-before-bg: var(--colors-brand-5);
  --ListControl-item-onActive-bg: var(--colors-neutral-fill-11);
  --ListControl-item-onActive-borderColor: var(--colors-brand-4);
@ -606,7 +606,7 @@ $Table-strip-bg: transparent;
  --Pagination-onDisabled-backgroundColor: var(--colors-neutral-fill-10);
  --Pagination-padding: 0 #{px2rem(8px)};
  --Pagination-padding-sm: 0 #{px2rem(4px)};
-  --Pagination-light-color: #84868c;
+  --Pagination-light-color: var(--colors-neutral-text-4);

  --Panel--default-badgeBg: var(--colors-neutral-fill-3);
  --Panel--default-badgeColor: var(--colors-neutral-fill-10);
@ -636,8 +636,8 @@ $Table-strip-bg: transparent;
  --PopUp-cancelAction-color: #666;
  --PopUp-confirmAction-color: var(--primary);

-  --Property-title-bg: #f2f2f2;
-  --Property-label-bg: #f7f7f7;
+  --Property-title-bg: var(--colors-neutral-fill-10);
+  --Property-label-bg: var(--colors-neutral-fill-10);

  --Portlet-borderColor: var(--borderColor);
  --Portlet-borderStyle: solid;
@ -696,7 +696,7 @@ $Table-strip-bg: transparent;
  --Tooltip--attr-borderRadius: var(--borderRadius);
  --Tooltip--attr-borderWidth: 0;
  --Tooltip--attr-boxShadow: var(--shadows-shadow-normal);
-  --Tooltip--attr-color: var(--background);
+  --Tooltip--attr-color: #fff;
  --Tooltip--attr-fontSize: var(--fontSizeSm);
  --Tooltip--attr-gap: var(--gap-sm);
  --Tooltip--attr-lineHeigt: var(--lineHeightBase);
@ -711,7 +711,7 @@ $Table-strip-bg: transparent;
  --Tooltip-bg: var(--background);
  --Tooltip-bg--dark: rgba(7, 12, 20, 0.85);
  --Tooltip-body-color: var(--text-color);
-  --Tooltip-body-color--dark: var(--colors-neutral-fill-11);
+  --Tooltip-body-color--dark: #fff;
  --Tooltip-body-paddingX: var(--gap-base);
  --Tooltip-body-paddingY: var(--gap-sm);
  --Tooltip-borderColor: var(--borderColor);
@ -727,7 +727,7 @@ $Table-strip-bg: transparent;
  --Tooltip-title-bg: #{darken($white, 3%)};
  --Tooltip-title-borderBottom-color: #{darken(darken($white, 3%), 5%)};
  --Tooltip-title-color: var(--text--loud-color);
-  --Tooltip-title-color--dark: var(--colors-neutral-fill-11);
+  --Tooltip-title-color--dark: #fff;
  --Tooltip-title-paddingX: var(--gap-base);
  --Tooltip-title-paddingY: var(--gap-sm);

@ -737,8 +737,8 @@ $Table-strip-bg: transparent;
  --TransferSelect--normal-heading-bg: var(--colors-neutral-fill-10);
  --TransferSelect-heading-borderBottom: var(--borders-width-1);

-  --TabsTransfer-title-bg: #f7f7f9;
-  --TabsTransfer-border-color: #e8e9eb;
+  --TabsTransfer-title-bg: var(--colors-neutral-fill-10);
+  --TabsTransfer-border-color: var(--colors-neutral-fill-8);

  --AnchorNav-links-container-borderRight: #{px2rem(2px)} solid #d3dae0;
  --AnchorNav-onActive-borderWidth: 0 0 0 #{px2rem(2px)};
@ -755,7 +755,7 @@ $Table-strip-bg: transparent;
  --ColumnToggler-item-margin: #{px2rem(4px)};
  --ColumnToggler-item-dragBar-color: #d8d8d8;

-  --InputFormula-header-bgColor: #fafafa;
+  --InputFormula-header-bgColor: var(--colors-neutral-fill-10);
  --InputFormula-icon-size: #{px2rem(18px)};
  --InputFormula-icon-color-onActive: var(--colors-brand-5);
  --InputFormula-code-bgColor: var(--colors-neutral-fill-10);
@ -819,7 +819,7 @@ $Table-strip-bg: transparent;
  --SearchBox-hover-color: var(--colors-brand-5);
  --SearchBox-focus-color: var(--colors-brand-4);
  --SearchBox-search-icon-color: var(--colors-neutral-text-5);
-  --SearchBox-enhonce-icon-color: var(--colors-neutral-text-11);
+  --SearchBox-enhonce-icon-color: var(--button-default-default-font-color);
  --SearchBox-clearable-icon-color: var(--colors-neutral-text-7);
  --SearchBox-clearable-icon-size: var(--sizes-size-9);
  --SearchBox-height: var(--sizes-base-15);
--- a/packages/amis-ui/scss/components/_array-input.scss
+++ b/packages/amis-ui/scss/components/_array-input.scss
@ -31,7 +31,7 @@
      var(--Combo-addBtn-bg),
      var(--Combo-addBtn-border),
      var(--Combo-addBtn-color),
-      var(--Combo-addBtn-onHover-bg),
+      var(--combo-multi-addBtn-hover-bg-color),
      var(--Combo-addBtn-onHover-border),
      var(--Combo-addBtn-onHover-color),
      var(--Combo-addBtn-onActive-bg),
--- a/packages/amis-ui/scss/components/_breadcrumb.scss
+++ b/packages/amis-ui/scss/components/_breadcrumb.scss
@ -47,11 +47,10 @@
      cursor: pointer;
      display: inline-block;
      transition: transform var(--animation-duration) ease;
-  
      > svg {
        width: px2rem(10px);
        height: px2rem(10px);
-        top: px2rem(1px);
+        top: px2rem(-2px);
      }
    }

@ -81,7 +80,8 @@
    background: var(--DropDown-menu-bg);
    list-style: none;
    padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX);
-    border: var(--DropDown-menu-borderWidth) solid var(--DropDown-menu-borderColor);
+    border: var(--DropDown-menu-borderWidth) solid
+      var(--DropDown-menu-borderColor);
    border-radius: var(--DropDown-menu-borderRadius);
    box-shadow: var(--DropDown-menu-boxShadow);
    min-width: 100%;
@ -90,7 +90,8 @@
  }

  &-dropdown > li {
-    padding: var(--BreadcrumbDropdown-item-paddingX) var(--BreadcrumbDropdown-item-paddingY);
+    padding: var(--BreadcrumbDropdown-item-paddingX)
+      var(--BreadcrumbDropdown-item-paddingY);
    white-space: nowrap;
    box-sizing: border-box;
    padding-left: px2rem(12px);
--- a/packages/amis-ui/scss/components/_drawer.scss
+++ b/packages/amis-ui/scss/components/_drawer.scss
@ -266,6 +266,7 @@
    transform: translate3d(0, -100%, 0);
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2);
    min-height: 120px;
+    border-bottom: var(--common-popover-border);
  }

  .#{$ns}Drawer-resizeCtrl {
@ -294,6 +295,7 @@
    transform: translate3d(100%, 0, 0);
    box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.2);
    min-width: 120px;
+    border-left: var(--common-popover-border);
  }

  .#{$ns}Drawer-footer {
@ -343,6 +345,7 @@
    transform: translate3d(0, 100%, 0);
    box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.2);
    min-height: 120px;
+    border-top: var(--common-popover-border);
  }

  .#{$ns}Drawer-resizeCtrl {
@ -372,6 +375,7 @@
    box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.2);
    border-width: 0 var(--Drawer-content-borderWidth) 0 0;
    min-width: 120px;
+    border-right: var(--common-popover-border);
  }

  .#{$ns}Drawer-resizeCtrl {
--- a/packages/amis-ui/scss/components/_dropdown.scss
+++ b/packages/amis-ui/scss/components/_dropdown.scss
@ -50,7 +50,8 @@
      top: 100%;
      left: 0;
      margin: px2rem(1px) 0 0;
-      border: none;
+      border: var(--Form-select-outer-borderWidth) solid
+        var(--Form-select-outer-borderColor);
      border-radius: var(--DropDown-menu-borderRadius);
      box-shadow: var(--DropDown-menu-boxShadow);
      min-width: var(--DropDown-menu-minWidth);
--- a/packages/amis-ui/scss/components/_formula.scss
+++ b/packages/amis-ui/scss/components/_formula.scss
@ -265,8 +265,8 @@
        text-align: center;
        padding: 0 #{px2rem(8px)};
        border-radius: var(--borderRadius);
-        background: #f5f5f5;
-        color: var(--black);
+        background: var(--colors-neutral-fill-10);
+        color: var(--colors-neutral-text-2);
        font-size: var(--fontSizeSm);
        line-height: #{px2rem(24px)};
        height: #{px2rem(24px)};
@ -479,9 +479,6 @@
    }

    &.is-filled {
-      fill: var(--InputFormula-icon-color-onActive);
-      color: var(--InputFormula-icon-color-onActive);
-
      &.icon-function.icon {
        font-size: var(--InputFormula-icon-size) !important;
      }
@ -514,7 +511,7 @@
  border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
  padding: 0 var(--Form-input-paddingX) 0 0;
  border-radius: var(--borderRadius);
-  background-color: #fff;
+  background-color: var(--colors-neutral-fill-11);
  height: var(--Form-input-height);

  &.#{$ns}FormulaPicker--text {
@ -563,6 +560,7 @@
  }

  .#{$ns}FormulaPicker-toggler {
+    color: var(--colors-neutral-text-2);
    .icon-function {
      transform: scale(1.3);
    }
@ -573,6 +571,7 @@

    &:hover {
      cursor: pointer;
+      color: var(--colors-brand-5);
    }
  }
 }
--- a/packages/amis-ui/scss/components/_menu.scss
+++ b/packages/amis-ui/scss/components/_menu.scss
@ -433,6 +433,8 @@
      background-color: var(--Layout-light-backgroundColor);
      line-height: var(--Nav-Item-height);
      cursor: pointer;
+      border: var(--Form-select-outer-borderWidth) solid
+        var(--Form-select-outer-borderColor);
      border-radius: px2rem(2px);
      max-height: px2rem(400px);
      overflow-y: auto;
@ -614,6 +616,7 @@
      svg {
        transition: transform 0.3s;
        transform: rotate(90deg);
+        color: var(--colors-neutral-text-2);
      }
    }

@ -694,7 +697,7 @@
  font-size: var(--Layout-tooltip-fontSize);
  color: var(--Layout-light-fontColor);
  background: var(--Layout-light-backgroundColor);
-  border: none;
+  border: var(--common-popover-border);
  border-radius: var(--Tooltip--attr-borderRadius);
  box-shadow: 0 px2rem(4px) px2rem(6px) 0 rgb(8 14 26 / 6%),
    0 px2rem(1px) px2rem(10px) 0 rgb(8 14 26 / 5%),
--- a/packages/amis-ui/scss/components/_modal.scss
+++ b/packages/amis-ui/scss/components/_modal.scss
@ -191,7 +191,6 @@
@include media-breakpoint-up(sm) {
  .#{$ns}Modal-content:not(.#{$ns}Modal-content-custom) {
    max-width: var(--dialog-size-normal-width);
-    border-width: var(--dialog-default-border-width);
  }

  .#{$ns}Modal--sm .#{$ns}Modal-content {
--- a/packages/amis-ui/scss/components/_pagination.scss
+++ b/packages/amis-ui/scss/components/_pagination.scss
@ -21,7 +21,7 @@
      line-height: var(--Pagination-height);
      padding: var(--Pagination-padding);
      text-align: center;
-      color: #666666;
+      color: var(--Pagination-light-color);
      border-radius: 0;
      margin-left: 0;
      font-size: var(--Pagination-fontSize);
@ -116,6 +116,8 @@
      border: var(--borderWidth) solid var(--borderColor);
      border-radius: var(--borderRadius) 0 0 var(--borderRadius);
      padding: var(--Pagination-padding);
+      background-color: var(--colors-neutral-fill-11);
+      color: var(--Pagination-light-color);
      margin-left: px2rem(8px);
      text-align: center;

@ -137,11 +139,11 @@
      border-left: none;
      border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
      font-size: var(--fontSizeSm);
+      margin-left: -1px;
      &:hover {
        color: var(--primary);
        border-color: var(--primary);
        border-left: var(--borderWidth) solid var(--primary);
-        margin-left: -1px;
      }
    }
  }
@ -161,6 +163,8 @@
      border: var(--borderWidth) solid var(--borderColor);
      border-radius: var(--borderRadius);
      padding: var(--Pagination-padding);
+      background-color: var(--colors-neutral-fill-11);
+      color: var(--Pagination-light-color);
      margin-right: px2rem(8px);
      text-align: center;

--- a/packages/amis-ui/scss/components/_popover.scss
+++ b/packages/amis-ui/scss/components/_popover.scss
@ -21,7 +21,7 @@
  word-wrap: normal;
  font-size: var(--fontSizeBase);
  box-shadow: var(--boxShadow);
-  border: var(--borderWidth) solid var(--borderColor);
+  border: var(--common-popover-border);
  border-radius: var(--borderRadius);

  & > * {
--- a/packages/amis-ui/scss/components/_search-box.scss
+++ b/packages/amis-ui/scss/components/_search-box.scss
@ -59,7 +59,7 @@
    cursor: pointer;
    color: var(--SearchBox-search-icon-color);
    svg {
-      top: 1px;
+      top: px2rem(2px);
    }

    &:hover {
@ -125,7 +125,7 @@
    color: var(--SearchBox-enhonce-icon-color);
    background: var(--SearchBox-hover-color);
    svg {
-      top: 0;
+      top: px2rem(2px);
    }

    &:hover {
--- a/packages/amis-ui/scss/components/_tooltip.scss
+++ b/packages/amis-ui/scss/components/_tooltip.scss
@ -12,6 +12,7 @@
  word-wrap: break-word;
  background: var(--Tooltip-bg);
  box-shadow: var(--Tooltip-boxShadow);
+  border: var(--common-popover-border);

  &-arrow {
    position: absolute;
@ -178,7 +179,7 @@

  &--dark {
    background: var(--Tooltip-bg--dark);
-    border: none;
+    border: var(--common-popover-border);
    box-shadow: var(--Tooltip-boxShadow--dark);

    .#{$ns}Tooltip-title {
--- a/packages/amis-ui/scss/components/form/_checks.scss
+++ b/packages/amis-ui/scss/components/form/_checks.scss
@ -271,7 +271,7 @@
        &:before {
          width: var(--Checkbox--full-inner-size);
          height: calc(var(--Checkbox--full-inner-size) / 2);
-          border-color: var(--Checkbox-gb);
+          border-color: #fff;
        }
      }

--- a/packages/amis-ui/scss/components/form/_date-range.scss
+++ b/packages/amis-ui/scss/components/form/_date-range.scss
@ -258,7 +258,7 @@

 .#{$ns}DateRangePicker-popover {
  border: var(--Form-select-outer-borderWidth) solid
-    var(--Form-input-onFocused-borderColor);
+    var(--Form-select-outer-borderColor);
  box-shadow: var(--Form-select-outer-boxShadow);
 }

--- a/packages/amis-ui/scss/components/form/_date.scss
+++ b/packages/amis-ui/scss/components/form/_date.scss
@ -201,7 +201,7 @@
 .#{$ns}DatePicker-popover {
  margin: px2rem(2px) 0 0;
  border: var(--Form-select-outer-borderWidth) solid
-    var(--Form-input-onFocused-borderColor);
+    var(--Form-select-outer-borderColor);
  box-shadow: var(--Form-select-outer-boxShadow);
 }

--- a/packages/amis-ui/scss/components/form/_editor.scss
+++ b/packages/amis-ui/scss/components/form/_editor.scss
@ -82,7 +82,6 @@
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
-    background: var(--Modal-header-bg);
    box-sizing: border-box;
  }

--- a/packages/amis-ui/scss/components/form/_form.scss
+++ b/packages/amis-ui/scss/components/form/_form.scss
@ -413,7 +413,7 @@
 .#{$ns}Form--debug {
  padding: var(--gap-sm);
  margin-bottom: var(--gap-sm);
-  background-color: rgb(250, 250, 250);
+  background-color: var(--colors-neutral-fill-11);
  border-radius: var(--borderRadius);
  position: relative;
  word-wrap: break-word;
--- a/packages/amis-ui/scss/components/form/_nested-select.scss
+++ b/packages/amis-ui/scss/components/form/_nested-select.scss
@ -65,7 +65,7 @@
    overflow-y: auto;
    overflow-x: hidden;
    border: var(--Form-select-outer-borderWidth) solid
-      var(--Form-input-onFocused-borderColor);
+      var(--Form-select-outer-borderColor);
    &:not(:first-child) {
      border-left: 0;
      margin-left: px2rem(4px);
--- a/packages/amis-ui/scss/components/form/_number.scss
+++ b/packages/amis-ui/scss/components/form/_number.scss
@ -426,9 +426,6 @@
      var(--inputNumber-enhance-hover-top-right-border-radius)
      var(--inputNumber-enhance-hover-bottom-right-border-radius)
      var(--inputNumber-enhance-hover-bottom-left-border-radius);
-    .#{$ns}Number-input {
-      padding-right: var(--inputNumber-base-default-paddingRight);
-    }
    .#{$ns}Number--enhance-input {
      background: var(--inputNumber-enhance-hover-bg-color);
    }
--- a/packages/amis-ui/scss/components/form/_select.scss
+++ b/packages/amis-ui/scss/components/form/_select.scss
@ -588,7 +588,7 @@
  background: var(--Form-select-menu-bg);
  color: var(--Form-select-menu-color);
  border: var(--Form-select-outer-borderWidth) solid
-    var(--Form-input-onFocused-borderColor);
+    var(--Form-select-outer-borderColor);
  box-shadow: var(--Form-select-outer-boxShadow);
  // min-width: px2rem(100px);

--- a/packages/amis-ui/scss/components/form/_text.scss
+++ b/packages/amis-ui/scss/components/form/_text.scss
@ -322,7 +322,7 @@
    border-radius: px2rem(2px);
    box-shadow: var(--Form-select-outer-boxShadow);
    border: var(--Form-select-outer-borderWidth) solid
-      var(--Form-input-onFocused-borderColor);
+      var(--Form-select-outer-borderColor);
    padding: px2rem(4px) 0;
  }

--- a/packages/amis-ui/scss/components/form/_textarea.scss
+++ b/packages/amis-ui/scss/components/form/_textarea.scss
@ -43,7 +43,7 @@
    bottom: 1px;
    right: var(--scrollbar-width);
    padding-bottom: var(--Form-input-paddingY);
-    background-color: #fff;
+    background-color: var(--Form-input-bg);
    text-align: right;
    border-radius: 3px;
    color: var(--input-count-multi-color);
--- a/packages/amis-ui/scss/components/form/_tree-select.scss
+++ b/packages/amis-ui/scss/components/form/_tree-select.scss
@ -8,7 +8,8 @@
    box-shadow: var(--boxShadow);
    .#{$ns}Tree {
      border-radius: var(--borders-radius-3);
-      border: none;
+      border: var(--Form-select-outer-borderWidth) solid
+        var(--Form-select-outer-borderColor);
    }
  }
 }
--- a/packages/amis-ui/scss/components/react-datetime.scss
+++ b/packages/amis-ui/scss/components/react-datetime.scss
@ -56,7 +56,7 @@
  }
  .headerTable {
    border-spacing: 0;
-    border-bottom: 1px solid #e8e9eb;
+    border-bottom: 1px solid var(--colors-neutral-line-8);
  }
 }
 .rdtPicker td,
--- a/packages/amis-ui/scss/themes/_dark-variables.scss
+++ b/packages/amis-ui/scss/themes/_dark-variables.scss
@ -6,62 +6,59 @@
 $ns: 'dark-';

 :root {
-  --colors-neutral-fill-none: translate;
-  --colors-error-main: #dc3545;
-  --colors-error-1: #420312;
-  --colors-error-2: #69091c;
-  --colors-error-3: #8f1428;
-  --colors-error-4: #b52236;
-  --colors-error-5: #dc3545;
-  --colors-error-6: #ff6471;
-  --colors-error-7: #ff8b92;
-  --colors-error-8: #ffb1b5;
-  --colors-error-9: #ffd8da;
-  --colors-error-10: #ffe6e6;
-  --colors-warning-main: #ff9f0b;
-  --colors-warning-1: #663000;
-  --colors-warning-2: #8c4600;
-  --colors-warning-3: #b35f00;
-  --colors-warning-4: #d97b00;
-  --colors-warning-5: #ff9f0b;
-  --colors-warning-6: #ffb43b;
-  --colors-warning-7: #ffc96c;
-  --colors-warning-8: #ffdd9d;
-  --colors-warning-9: #ffefce;
-  --colors-warning-10: #fff7e6;
-  --colors-success-main: #32d74b;
-  --colors-success-1: #023d13;
-  --colors-success-2: #08631f;
-  --colors-success-3: #128a2c;
-  --colors-success-4: #20b03a;
-  --colors-success-5: #32d74b;
-  --colors-success-6: #57e36a;
-  --colors-success-7: #81f08e;
-  --colors-success-8: #affcb6;
-  --colors-success-9: #d8ffdb;
-  --colors-success-10: #e6ffe7;
-  --colors-link-main: #2296f3;
-  --colors-link-1: #002559;
-  --colors-link-2: #003980;
-  --colors-link-3: #0754a6;
-  --colors-link-4: #1272cc;
-  --colors-link-5: #2296f3;
-  --colors-link-6: #50b3ff;
-  --colors-link-7: #7bc8ff;
-  --colors-link-8: #a7dcff;
-  --colors-link-9: #d3eeff;
-  --colors-link-10: #e6f6ff;
-  --colors-info-main: #2296f3;
-  --colors-info-1: #002559;
-  --colors-info-2: #003980;
-  --colors-info-3: #0754a6;
-  --colors-info-4: #1272cc;
-  --colors-info-5: #2296f3;
-  --colors-info-6: #50b3ff;
-  --colors-info-7: #7bc8ff;
-  --colors-info-8: #a7dcff;
-  --colors-info-9: #d3eeff;
-  --colors-info-10: #e6f6ff;
+  --colors-error-main: #ff4242;
+  --colors-error-1: #ff8875;
+  --colors-error-2: #ff7869;
+  --colors-error-3: #ff675c;
+  --colors-error-4: #ff554f;
+  --colors-error-5: #ff4242;
+  --colors-error-6: #ff1d20;
+  --colors-error-7: #ff0008;
+  --colors-error-8: #ff000d;
+  --colors-error-9: #ff0011;
+  --colors-error-10: #ff0015;
+  --colors-warning-main: #ff9326;
+  --colors-warning-1: #ffc259;
+  --colors-warning-2: #ffb84d;
+  --colors-warning-3: #ffac40;
+  --colors-warning-4: #ffa033;
+  --colors-warning-5: #ff9326;
+  --colors-warning-6: #ff7b00;
+  --colors-warning-7: #ff7700;
+  --colors-warning-8: #ff7300;
+  --colors-warning-9: #ff6f00;
+  --colors-warning-10: #ff6a00;
+  --colors-success-main: #2fc40e;
+  --colors-success-1: #62c435;
+  --colors-success-2: #57c42b;
+  --colors-success-3: #4ac421;
+  --colors-success-4: #3dc418;
+  --colors-success-5: #2fc40e;
+  --colors-success-6: #1fb800;
+  --colors-success-7: #1aab00;
+  --colors-success-8: #159e00;
+  --colors-success-9: #119100;
+  --colors-success-10: #0d8500;
+  --colors-link-1: #001259;
+  --colors-link-2: #001e80;
+  --colors-link-3: #0832a6;
+  --colors-link-4: #144bcc;
+  --colors-link-5: #2468f2;
+  --colors-link-6: #528eff;
+  --colors-link-7: #7dadff;
+  --colors-link-8: #a8caff;
+  --colors-link-9: #d4e5ff;
+  --colors-link-10: #e6f0ff;
+  --colors-info-1: #001259;
+  --colors-info-2: #001e80;
+  --colors-info-3: #0832a6;
+  --colors-info-4: #144bcc;
+  --colors-info-5: #2468f2;
+  --colors-info-6: #528eff;
+  --colors-info-7: #7dadff;
+  --colors-info-8: #a8caff;
+  --colors-info-9: #d4e5ff;
+  --colors-info-10: #e6f0ff;
  --colors-other-main: #2468f2;
  --colors-other-1: #001259;
  --colors-other-2: #001e80;
@ -73,50 +70,50 @@ $ns: 'dark-';
  --colors-other-8: #a8caff;
  --colors-other-9: #d4e5ff;
  --colors-other-10: #e6f0ff;
-  --colors-brand-1: #002566;
-  --colors-brand-2: #00388c;
-  --colors-brand-3: #004db3;
-  --colors-brand-4: #0065d9;
-  --colors-brand-5: #0983ff;
-  --colors-brand-6: #3ba0ff;
-  --colors-brand-7: #6cbaff;
-  --colors-brand-8: #9dd3ff;
-  --colors-brand-9: #ceeaff;
-  --colors-brand-10: #e6f4ff;
-  --colors-neutral-text-1: #070e14;
-  --colors-neutral-text-2: #f3f1f1;
-  --colors-neutral-text-3: #303840;
-  --colors-neutral-text-4: #6c6c6c;
-  --colors-neutral-text-5: #84888c;
+  --colors-brand-main: #1677ff;
+  --colors-brand-1: #4aaeff;
+  --colors-brand-2: #3da1ff;
+  --colors-brand-3: #3094ff;
+  --colors-brand-4: #2486ff;
+  --colors-brand-5: #1677ff;
+  --colors-brand-6: #0061f2;
+  --colors-brand-7: #0058e6;
+  --colors-brand-8: #004fd9;
+  --colors-brand-9: #0047cc;
+  --colors-brand-10: #0040bf;
+  --colors-neutral-text-1: #ffffff;
+  --colors-neutral-text-2: #f7f8fa;
+  --colors-neutral-text-3: #f2f3f5;
+  --colors-neutral-text-4: #e8e9eb;
+  --colors-neutral-text-5: #d4d6d9;
  --colors-neutral-text-6: #b8bbbf;
-  --colors-neutral-text-7: #d4d7d9;
-  --colors-neutral-text-8: #e8e9eb;
-  --colors-neutral-text-9: #f2f4f5;
-  --colors-neutral-text-10: #f7f9fa;
-  --colors-neutral-text-11: #ffffff;
-  --colors-neutral-fill-none: transparent;
-  --colors-neutral-fill-1: #070e14;
-  --colors-neutral-fill-2: #151e26;
-  --colors-neutral-fill-3: #303840;
-  --colors-neutral-fill-4: #5c6166;
-  --colors-neutral-fill-5: #84888c;
+  --colors-neutral-text-7: #84878c;
+  --colors-neutral-text-8: #5c6066;
+  --colors-neutral-text-9: #303640;
+  --colors-neutral-text-10: #151c26;
+  --colors-neutral-text-11: #070d14;
+  --colors-neutral-fill-1: #ffffff;
+  --colors-neutral-fill-2: #f7f8fa;
+  --colors-neutral-fill-3: #f2f3f5;
+  --colors-neutral-fill-4: #e8e9eb;
+  --colors-neutral-fill-5: #d4d6d9;
  --colors-neutral-fill-6: #b8bbbf;
-  --colors-neutral-fill-7: #d4d7d9;
-  --colors-neutral-fill-8: #e8e9eb;
-  --colors-neutral-fill-9: #f2f4f5;
-  --colors-neutral-fill-10: #f7f9fa;
-  --colors-neutral-fill-11: #ffffff;
-  --colors-neutral-line-1: #070e14;
-  --colors-neutral-line-2: #151e26;
-  --colors-neutral-line-3: #303840;
-  --colors-neutral-line-4: #5c6166;
-  --colors-neutral-line-5: #84888c;
+  --colors-neutral-fill-7: #84878c;
+  --colors-neutral-fill-8: #5c6066;
+  --colors-neutral-fill-9: #303640;
+  --colors-neutral-fill-10: #151c26;
+  --colors-neutral-fill-11: #070d14;
+  --colors-neutral-line-1: #ffffff;
+  --colors-neutral-line-2: #f7f8fa;
+  --colors-neutral-line-3: #f2f3f5;
+  --colors-neutral-line-4: #e8e9eb;
+  --colors-neutral-line-5: #d4d6d9;
  --colors-neutral-line-6: #b8bbbf;
-  --colors-neutral-line-7: #d4d7d9;
-  --colors-neutral-line-8: #e8e9eb;
-  --colors-neutral-line-9: #f2f4f5;
-  --colors-neutral-line-10: #f7f9fa;
-  --colors-neutral-line-11: #ffffff;
+  --colors-neutral-line-7: #84878c;
+  --colors-neutral-line-8: #5c6066;
+  --colors-neutral-line-9: #303640;
+  --colors-neutral-line-10: #151c26;
+  --colors-neutral-line-11: #070d14;
  --fonts-base-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica,
    'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB',
    'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN',
--- a/packages/amis-ui/scss/themes/dark.scss
+++ b/packages/amis-ui/scss/themes/dark.scss
@ -2,3 +2,26 @@
@import '../components';
@import './dark-variables';
@import './common';
+
+:root,
+.AMISCSSWrapper {
+  --switch-text-on-color: var(--colors-neutral-text-2);
+  --switch-text-off-color: var(--colors-neutral-text-2);
+  --switch-default-on-slider-color: var(--colors-neutral-fill-2);
+  --switch-default-off-slider-color: var(--colors-neutral-fill-2);
+  --button-primary-default-font-color: var(--colors-neutral-text-2);
+  --button-primary-hover-font-color: var(--colors-neutral-text-2);
+  --button-primary-active-font-color: var(--colors-neutral-text-2);
+  --button-info-default-font-color: var(--colors-neutral-text-2);
+  --button-info-hover-font-color: var(--colors-neutral-text-2);
+  --button-info-active-font-color: var(--colors-neutral-text-2);
+  --button-success-default-font-color: var(--colors-neutral-text-2);
+  --button-success-hover-font-color: var(--colors-neutral-text-2);
+  --button-success-active-font-color: var(--colors-neutral-text-2);
+  --button-warning-default-font-color: var(--colors-neutral-text-2);
+  --button-warning-hover-font-color: var(--colors-neutral-text-2);
+  --button-warning-active-font-color: var(--colors-neutral-text-2);
+  --button-danger-default-font-color: var(--colors-neutral-text-2);
+  --button-danger-hover-font-color: var(--colors-neutral-text-2);
+  --button-danger-active-font-color: var(--colors-neutral-text-2);
+}
--- a/packages/amis-ui/src/components/PickerContainer.tsx
+++ b/packages/amis-ui/src/components/PickerContainer.tsx
@ -131,6 +131,7 @@ export class PickerContainer extends React.Component<
      showTitle,
      headerClassName,
      bodyClassName,
+      className,
      translate: __,
      size,
      showFooter,
@ -157,6 +158,7 @@ export class PickerContainer extends React.Component<
          showTitle={showTitle}
          headerClassName={headerClassName}
          bodyClassName={bodyClassName}
+          className={className}
          showFooter={showFooter}
          beforeConfirm={this.confirm}
          popOverContainer={popOverContainer}
--- a/packages/amis-ui/src/icons/function.svg
+++ b/packages/amis-ui/src/icons/function.svg
@ -1,10 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>fx</title>
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="fx">
-            <rect x="0" y="0" width="16" height="16"></rect>
-            <path d="M6.85458095,1.4369501 C7.71952092,0.883033689 9.14623722,0.984136878 9.82754043,1.06050205 C10.1144049,1.09276903 10.7457242,1.15084958 10.6805277,1.77252664 C10.6294571,2.26943806 9.89599674,2.21888646 9.7014939,2.21888646 C9.48535769,2.21888646 9.2659886,2.19876183 9.04755999,2.18089337 L8.82959943,2.1646059 C7.92402473,2.10678268 7.05892911,2.21764793 6.53620481,4.11618461 L6.21348223,5.68866187 L7.84556744,5.68866187 C8.14547125,5.68866187 8.38887144,5.92958862 8.38887144,6.22644479 C8.38887144,6.52330096 8.14547125,6.76422771 7.84556744,6.76422771 L5.98203473,6.76422771 L4.51511393,13.8963048 C4.51511393,13.8963048 4.37385489,15.042858 3.66212666,14.9987598 C3.63797714,14.9972618 3.61487053,14.9948005 3.5927662,14.9914342 C3.56428372,14.9965963 3.53191413,15 3.49937138,15 L1.46666667,15 C1.20893378,15 1,14.7910662 1,14.5333333 L1,14.5005208 C0.999354255,14.259116 1.18292475,14.0570646 1.42329087,14.0346853 C1.93951851,13.9857578 2.38825526,13.9043655 2.76950112,13.7905085 C2.88970413,13.7546105 2.99265144,13.7126424 3.07834304,13.6646043 C3.13612492,13.6324776 3.19778289,13.6139204 3.25964158,13.6078865 L4.67484531,6.76422771 L2.46685786,6.76422771 C2.18325317,6.76422771 1.95723871,6.54696341 1.93333333,6.27269412 L1.945,6.342 L1.95324336,6.32324571 C1.96746558,6.3067537 1.99022114,6.29312987 1.99875447,6.27376968 C1.98595447,6.2576362 1.94115447,6.24365384 1.94115447,6.22644479 L1.941,6.319 L1.93333333,6.27269412 C1.95524659,5.81127637 2.14698763,5.70504184 2.39724012,5.69054037 L2.46685786,5.68866187 L4.90846603,5.68866187 L5.24857433,4.08391763 C5.48980131,2.9481201 5.98746777,1.99301764 6.85458095,1.4369501 Z M14.7335755,5.87796146 C14.9009132,5.96723342 14.9878418,6.07048774 14.9987079,6.18664885 C15.0084874,6.30280996 14.9628498,6.41681994 14.8585355,6.52975435 L12.8950348,8.6378634 L14.8324569,11.2676219 C14.8933069,11.3461382 14.9085194,11.440788 14.873748,11.5440423 C14.8433229,11.6494478 14.7064103,11.7225862 14.5249468,11.8193872 C14.3282708,11.9215659 14.1576733,11.9118858 14.0359732,11.8785433 C13.9175329,11.8441252 13.8110453,11.7666844 13.7219435,11.6494478 L12.0876851,9.50907173 L10.1046255,11.6386921 C9.86774493,11.8925256 9.59935275,11.9301704 9.2929293,11.7505509 C9.16688277,11.6774125 8.93652187,11.4063699 8.90935667,11.2837554 C8.88327808,11.1622164 8.93217544,11.0342241 9.05822197,10.8976272 L11.2509969,8.53568465 L9.65368315,6.44370909 C9.58740006,6.34798373 9.58088042,6.23612488 9.6330376,6.10920811 C9.68302157,5.98229134 9.80146184,5.90700173 9.92750837,5.83278769 C10.1089719,5.7316845 10.2752229,5.7284578 10.3980096,5.7381379 C10.5218829,5.74566686 10.6338036,5.81557864 10.7370313,5.94464654 L12.0648663,7.65802292 L13.6719595,5.92528635 C13.8110453,5.772556 13.9686035,5.71877771 14.1207286,5.67575508 C14.2717671,5.63273244 14.5705843,5.78761392 14.7335755,5.87796146 Z" id="形状结合备份" fill="#2C313C" fill-rule="nonzero"></path>
-        </g>
-    </g>
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path
+        d="M6.85458095,1.4369501 C7.71952092,0.883033689 9.14623722,0.984136878 9.82754043,1.06050205 C10.1144049,1.09276903 10.7457242,1.15084958 10.6805277,1.77252664 C10.6294571,2.26943806 9.89599674,2.21888646 9.7014939,2.21888646 C9.48535769,2.21888646 9.2659886,2.19876183 9.04755999,2.18089337 L8.82959943,2.1646059 C7.92402473,2.10678268 7.05892911,2.21764793 6.53620481,4.11618461 L6.21348223,5.68866187 L7.84556744,5.68866187 C8.14547125,5.68866187 8.38887144,5.92958862 8.38887144,6.22644479 C8.38887144,6.52330096 8.14547125,6.76422771 7.84556744,6.76422771 L5.98203473,6.76422771 L4.51511393,13.8963048 C4.51511393,13.8963048 4.37385489,15.042858 3.66212666,14.9987598 C3.63797714,14.9972618 3.61487053,14.9948005 3.5927662,14.9914342 C3.56428372,14.9965963 3.53191413,15 3.49937138,15 L1.46666667,15 C1.20893378,15 1,14.7910662 1,14.5333333 L1,14.5005208 C0.999354255,14.259116 1.18292475,14.0570646 1.42329087,14.0346853 C1.93951851,13.9857578 2.38825526,13.9043655 2.76950112,13.7905085 C2.88970413,13.7546105 2.99265144,13.7126424 3.07834304,13.6646043 C3.13612492,13.6324776 3.19778289,13.6139204 3.25964158,13.6078865 L4.67484531,6.76422771 L2.46685786,6.76422771 C2.18325317,6.76422771 1.95723871,6.54696341 1.93333333,6.27269412 L1.945,6.342 L1.95324336,6.32324571 C1.96746558,6.3067537 1.99022114,6.29312987 1.99875447,6.27376968 C1.98595447,6.2576362 1.94115447,6.24365384 1.94115447,6.22644479 L1.941,6.319 L1.93333333,6.27269412 C1.95524659,5.81127637 2.14698763,5.70504184 2.39724012,5.69054037 L2.46685786,5.68866187 L4.90846603,5.68866187 L5.24857433,4.08391763 C5.48980131,2.9481201 5.98746777,1.99301764 6.85458095,1.4369501 Z M14.7335755,5.87796146 C14.9009132,5.96723342 14.9878418,6.07048774 14.9987079,6.18664885 C15.0084874,6.30280996 14.9628498,6.41681994 14.8585355,6.52975435 L12.8950348,8.6378634 L14.8324569,11.2676219 C14.8933069,11.3461382 14.9085194,11.440788 14.873748,11.5440423 C14.8433229,11.6494478 14.7064103,11.7225862 14.5249468,11.8193872 C14.3282708,11.9215659 14.1576733,11.9118858 14.0359732,11.8785433 C13.9175329,11.8441252 13.8110453,11.7666844 13.7219435,11.6494478 L12.0876851,9.50907173 L10.1046255,11.6386921 C9.86774493,11.8925256 9.59935275,11.9301704 9.2929293,11.7505509 C9.16688277,11.6774125 8.93652187,11.4063699 8.90935667,11.2837554 C8.88327808,11.1622164 8.93217544,11.0342241 9.05822197,10.8976272 L11.2509969,8.53568465 L9.65368315,6.44370909 C9.58740006,6.34798373 9.58088042,6.23612488 9.6330376,6.10920811 C9.68302157,5.98229134 9.80146184,5.90700173 9.92750837,5.83278769 C10.1089719,5.7316845 10.2752229,5.7284578 10.3980096,5.7381379 C10.5218829,5.74566686 10.6338036,5.81557864 10.7370313,5.94464654 L12.0648663,7.65802292 L13.6719595,5.92528635 C13.8110453,5.772556 13.9686035,5.71877771 14.1207286,5.67575508 C14.2717671,5.63273244 14.5705843,5.78761392 14.7335755,5.87796146 Z"
+        fill="currentColor" fill-rule="nonzero"></path>
 </svg>
--- a/packages/amis-ui/src/icons/search.svg
+++ b/packages/amis-ui/src/icons/search.svg
@ -1,4 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18" version="1.1">
-    <path d="M2,8 C2,4.691 4.691,2 8,2 C11.309,2 14,4.691 14,8 C14,11.309 11.309,14 8,14 C4.691,14 2,11.309 2,8 L2,8 Z M18,16.586 L14.314,12.9 C15.367,11.545 16,9.849 16,8 C16,3.582 12.418,0 8,0 C3.582,0 0,3.582 0,8 C0,12.418 3.582,16 8,16 C9.849,16 11.545,15.367 12.9,14.314 L16.586,18 L18,16.586 Z"></path>
+    <path fill="currentColor"
+        d="M2,8 C2,4.691 4.691,2 8,2 C11.309,2 14,4.691 14,8 C14,11.309 11.309,14 8,14 C4.691,14 2,11.309 2,8 L2,8 Z M18,16.586 L14.314,12.9 C15.367,11.545 16,9.849 16,8 C16,3.582 12.418,0 8,0 C3.582,0 0,3.582 0,8 C0,12.418 3.582,16 8,16 C9.849,16 11.545,15.367 12.9,14.314 L16.586,18 L18,16.586 Z"></path>
 </svg>
--- a/packages/amis-ui/src/icons/trash.svg
+++ b/packages/amis-ui/src/icons/trash.svg
@ -1,8 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg  viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">

    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect  stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
-        <path d="M14,3.499 L14,4.5 L12.497,4.5 L12.498,14.5 L3.498,14.5 L3.497,4.5 L2,4.5 L2,3.499 L14,3.499 Z M11.498,4.5 L4.497,4.5 L4.497,13.5 L11.498,13.5 L11.498,4.5 Z M6.998,7.499 L6.998,11.499 L5.998,11.499 L5.998,7.499 L6.998,7.499 Z M9.998,7.499 L9.998,11.499 L8.998,11.499 L8.998,7.499 L9.998,7.499 Z M9.999,1.5 L9.999,2.499 L5.998,2.499 L5.998,1.5 L9.999,1.5 Z"  fill="#151B26"></path>
+        <path
+            d="M14,3.499 L14,4.5 L12.497,4.5 L12.498,14.5 L3.498,14.5 L3.497,4.5 L2,4.5 L2,3.499 L14,3.499 Z M11.498,4.5 L4.497,4.5 L4.497,13.5 L11.498,13.5 L11.498,4.5 Z M6.998,7.499 L6.998,11.499 L5.998,11.499 L5.998,7.499 L6.998,7.499 Z M9.998,7.499 L9.998,11.499 L8.998,11.499 L8.998,7.499 L9.998,7.499 Z M9.999,1.5 L9.999,2.499 L5.998,2.499 L5.998,1.5 L9.999,1.5 Z"
+            fill="currentColor"></path>
    </g>
 </svg>