diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts
index a24463de94..cb8829f00f 100644
--- a/src/packages/configprovider/types.ts
+++ b/src/packages/configprovider/types.ts
@@ -56,6 +56,7 @@ export type NutCSSVariables =
   | 'nutuiColorTextDisabled'
   | 'nutuiColorTextDark'
   | 'nutuiColorTextLink'
+  | 'nutuiColorPrimaryText'
   | 'nutuiFontSizeXxxs'
   | 'nutuiFontSizeXxs'
   | 'nutuiFontSizeXs'
@@ -360,7 +361,8 @@ export type NutCSSVariables =
   | 'nutuiSwitchInactiveLineBackgroundColor'
   | 'nutuiSwitchWidth'
   | 'nutuiSwitchHeight'
-  | 'nutuiSwitchLineHeight'
+  | 'nutuiSwitchInsideWidth'
+  | 'nutuiSwitchInsideHeight'
   | 'nutuiSwitchBorderRadius'
   | 'nutuiSwitchBorderWidth'
   | 'nutuiSwitchInsideBorderRadius'
diff --git a/src/packages/switch/doc.en-US.md b/src/packages/switch/doc.en-US.md
index 3495efdb10..cb66e27fa0 100644
--- a/src/packages/switch/doc.en-US.md
+++ b/src/packages/switch/doc.en-US.md
@@ -101,17 +101,18 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-switch-active-background-color | Switch on status background color | `$color-primary` |
 | \--nutui-switch-inactive-background-color | Switch off status background color | `$color-text-disabled` |
 | \--nutui-switch-active-disabled-background-color | Switch toggle on the background color disabled | `$color-primary-disabled-special` |
-| \--nutui-switch-inactive-disabled-background-color | Turn off the background color disabled | `$color-background` |
-| \--nutui-switch-inactive-line-bg-color | Switch Off Internal Button Line Color | `#ffffff` |
-| \--nutui-switch-width | Switch Width | `46px` |
-| \--nutui-switch-height | Switch height | `28px` |
-| \--nutui-switch-line-height | Switch line height | `28px` |
+| \--nutui-switch-inactive-disabled-background-color | Turn off the background color disabled | `var(--nutui-color-background-component)` |
+| \--nutui-switch-inactive-line-background-color | Switch Off Internal Button Line Color | `$color-primary-text` |
+| \--nutui-switch-width | Switch Width | `56px` |
+| \--nutui-switch-height | Switch height | `24px` |
+| \--nutui-switch-inside-width | Switch internal button width | `32px` |
+| \--nutui-switch-inside-height | Switch internal button height | `20px` |
 | \--nutui-switch-border-radius | Switch rounded corner size | `$radius-circle` |
 | \--nutui-switch-border-width | Switch border width | `2px` |
-| \--nutui-switch-inside-border-radius | Switch internal button rounded corner size | `$radius-full` |
-| \--nutui-switch-inside-box-shadow | Switch Internal Button Shadow | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
+| \--nutui-switch-inside-border-radius | Switch internal button rounded corner size | `$radius-circle` |
+| \--nutui-switch-inside-box-shadow | Switch Internal Button Shadow | `0px 4px 8px 0px rgba(0, 0, 0, 0.12)` |
 | \--nutui-switch-label-text-color | Switch internal text color | `$color-primary-text` |
-| \--nutui-switch-label-font-size | Switch internal text size | `$font-size-s` |
+| \--nutui-switch-label-font-size | Switch internal text size | `$font-size-xs` |
 | \--nutui-switch-inactive-disabled-label-text-color | Turn off and disable internal text color | `$color-text-disabled` |
 
 <Contribution name="Switch" />
diff --git a/src/packages/switch/doc.md b/src/packages/switch/doc.md
index 3a9e7b2afc..5bb44a9b91 100644
--- a/src/packages/switch/doc.md
+++ b/src/packages/switch/doc.md
@@ -101,17 +101,18 @@ import { Switch } from '@nutui/nutui-react'
 | \--nutui-switch-active-background-color | 开关打开状态背景颜色 | `$color-primary` |
 | \--nutui-switch-inactive-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
 | \--nutui-switch-active-disabled-background-color | 开关打开状态禁用的背景颜色 | `$color-primary-disabled-special` |
-| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `$color-background` |
-| \--nutui-switch-inactive-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` |
-| \--nutui-switch-width | 开关宽度 | `46px` |
-| \--nutui-switch-height | 开关高度 | `28px` |
-| \--nutui-switch-line-height | 开关行高 | `28px` |
+| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `var(--nutui-color-background-component)` |
+| \--nutui-switch-inactive-line-background-color | 开关关闭状态内部按钮线条颜色 | `$color-primary-text` |
+| \--nutui-switch-width | 开关宽度 | `56px` |
+| \--nutui-switch-height | 开关高度 | `24px` |
+| \--nutui-switch-inside-width | 开关内部按钮宽度 | `32px` |
+| \--nutui-switch-inside-height | 开关内部按钮高度 | `20px` |
 | \--nutui-switch-border-radius | 开关圆角大小 | `$radius-circle` |
 | \--nutui-switch-border-width | 开关边框宽度 | `2px` |
-| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-full` |
-| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
+| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-circle` |
+| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 4px 8px 0px rgba(0, 0, 0, 0.12)` |
 | \--nutui-switch-label-text-color | 开关内部文字颜色 | `$color-primary-text` |
-| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-s` |
+| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-xs` |
 | \--nutui-switch-inactive-disabled-label-text-color | 开关关闭禁用内部文字颜色 | `$color-text-disabled` |
 
 <Contribution name="Switch" />
diff --git a/src/packages/switch/doc.taro.md b/src/packages/switch/doc.taro.md
index c11f5a5581..2a701b6bc9 100644
--- a/src/packages/switch/doc.taro.md
+++ b/src/packages/switch/doc.taro.md
@@ -101,17 +101,18 @@ import { Switch } from '@nutui/nutui-react-taro'
 | \--nutui-switch-active-background-color | 开关打开状态背景颜色 | `$color-primary` |
 | \--nutui-switch-inactive-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
 | \--nutui-switch-active-disabled-background-color | 开关打开状态禁用的背景颜色 | `$color-primary-disabled-special` |
-| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `$color-background` |
-| \--nutui-switch-inactive-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` |
-| \--nutui-switch-width | 开关宽度 | `46px` |
-| \--nutui-switch-height | 开关高度 | `28px` |
-| \--nutui-switch-line-height | 开关行高 | `28px` |
+| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `var(--nutui-color-background-component)` |
+| \--nutui-switch-inactive-line-background-color | 开关关闭状态内部按钮线条颜色 | `$color-primary-text` |
+| \--nutui-switch-width | 开关宽度 | `56px` |
+| \--nutui-switch-height | 开关高度 | `24px` |
+| \--nutui-switch-inside-width | 开关内部按钮宽度 | `32px` |
+| \--nutui-switch-inside-height | 开关内部按钮高度 | `20px` |
 | \--nutui-switch-border-radius | 开关圆角大小 | `$radius-circle` |
 | \--nutui-switch-border-width | 开关边框宽度 | `2px` |
-| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-full` |
-| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
+| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-circle` |
+| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 4px 8px 0px rgba(0, 0, 0, 0.12)` |
 | \--nutui-switch-label-text-color | 开关内部文字颜色 | `$color-primary-text` |
-| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-s` |
+| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-xs` |
 | \--nutui-switch-inactive-disabled-label-text-color | 开关关闭禁用内部文字颜色 | `$color-text-disabled` |
 
 <Contribution name="Switch" />
diff --git a/src/packages/switch/doc.zh-TW.md b/src/packages/switch/doc.zh-TW.md
index e392e58924..0ef7446960 100644
--- a/src/packages/switch/doc.zh-TW.md
+++ b/src/packages/switch/doc.zh-TW.md
@@ -101,17 +101,18 @@ import { Switch } from '@nutui/nutui-react'
 | \--nutui-switch-active-background-color | 開關打開狀態背景顏色 | `$color-primary` |
 | \--nutui-switch-inactive-background-color | 開關關閉狀態背景顏色 | `$color-text-disabled` |
 | \--nutui-switch-active-disabled-background-color | 開關打開狀態禁用的背景顏色 | `$color-primary-disabled-special` |
-| \--nutui-switch-inactive-disabled-background-color | 開關關閉狀態禁用的背景顏色 | `$color-background` |
-| \--nutui-switch-inactive-line-bg-color | 開關關閉狀態內部按鈕線條顏色 | `#ffffff` |
-| \--nutui-switch-width | 開關寬度 | `46px` |
-| \--nutui-switch-height | 開關高度 | `28px` |
-| \--nutui-switch-line-height | 開關行高 | `28px` |
+| \--nutui-switch-inactive-disabled-background-color | 開關關閉狀態禁用的背景顏色 | `var(--nutui-color-background-component)` |
+| \--nutui-switch-inactive-line-background-color | 開關關閉狀態內部按鈕線條顏色 | `$color-primary-text` |
+| \--nutui-switch-width | 開關寬度 | `56px` |
+| \--nutui-switch-height | 開關高度 | `24px` |
+| \--nutui-switch-inside-width | 開關內部按鈕寬度 | `32px` |
+| \--nutui-switch-inside-height | 開關內部按鈕高度 | `20px` |
 | \--nutui-switch-border-radius | 開關圓角大小 | `$radius-circle` |
 | \--nutui-switch-border-width | 開關邊框寬度 | `2px` |
-| \--nutui-switch-inside-border-radius | 開關內部按鈕圓角大小 | `$radius-full` |
-| \--nutui-switch-inside-box-shadow | 開關內部按鈕陰影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
+| \--nutui-switch-inside-border-radius | 開關內部按鈕圓角大小 | `$radius-circle` |
+| \--nutui-switch-inside-box-shadow | 開關內部按鈕陰影 | `0px 4px 8px 0px rgba(0, 0, 0, 0.12)` |
 | \--nutui-switch-label-text-color | 開關內部文字顏色 | `$color-primary-text` |
-| \--nutui-switch-label-font-size | 開關內部文字大小 | `$font-size-s` |
+| \--nutui-switch-label-font-size | 開關內部文字大小 | `$font-size-xs` |
 | \--nutui-switch-inactive-disabled-label-text-color | 開關關閉禁用內部文字顏色 | `$color-text-disabled` |
 
 <Contribution name="Switch" />
diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss
index 089f6688ca..5ebd9e6b1d 100644
--- a/src/packages/switch/switch.scss
+++ b/src/packages/switch/switch.scss
@@ -1,4 +1,11 @@
 .nut-switch {
+  --nut-switch-height: #{$switch-height};
+  --nut-switch-inside-width: #{$switch-inside-width};
+  --nut-switch-border-width: #{$switch-border-width};
+  --nut-switch-label-margin-offset: calc(
+    var(--nut-switch-inside-width) + var(--nut-switch-border-width) + 3px
+  );
+
   cursor: pointer;
   position: relative;
   /* #ifdef dynamic*/
@@ -11,13 +18,12 @@
   align-items: center;
   min-width: $switch-width;
   height: $switch-height;
-  line-height: $switch-line-height;
   background-color: $switch-active-background-color;
   border-radius: $switch-border-radius;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center center;
-  flex: 0 0 auto; // 防止被压缩
+  flex: 0 0 auto;
 
   &-button {
     position: absolute;
@@ -27,41 +33,48 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    height: calc($switch-height - $switch-border-width * 2);
-    width: calc($switch-height - $switch-border-width * 2);
+    height: $switch-inside-height;
+    width: $switch-inside-width;
     border-radius: $switch-inside-border-radius;
     background: $color-primary-text;
     transition: left 0.3s linear;
     box-shadow: $switch-inside-box-shadow;
     &-open {
-      left: calc(100% - $switch-height + $switch-border-width);
+      left: calc(
+        100% - var(--nut-switch-inside-width) - var(--nut-switch-border-width)
+      );
       &-rtl {
-        left: $switch-border-width;
+        left: var(--nut-switch-border-width);
       }
     }
     &-close {
-      left: $switch-border-width;
+      left: var(--nut-switch-border-width);
       &-rtl {
-        left: calc(100% - $switch-height + $switch-border-width);
+        left: calc(
+          100% - var(--nut-switch-inside-width) - var(--nut-switch-border-width)
+        );
       }
     }
-    .nut-icon {
-      width: calc(($switch-height - $switch-border-width * 2) / 2);
-      height: calc(($switch-height - $switch-border-width * 2) / 2);
-      color: $switch-active-disabled-background-color;
-    }
   }
 
   &-close {
     background-color: $switch-inactive-background-color;
     &-line {
-      width: calc(($switch-height - $switch-border-width * 2) / 2);
+      width: calc(
+        (var(--nut-switch-height) - var(--nut-switch-border-width) * 2) * 0.5
+      );
       height: 2px;
       background: $switch-inactive-line-background-color;
       border-radius: 2px;
     }
   }
 
+  .nut-icon {
+    width: calc(var(--nut-switch-height) * 0.5);
+    height: calc(var(--nut-switch-height) * 0.5);
+    color: $switch-active-disabled-background-color;
+  }
+
   &-label {
     /* #ifdef dynamic*/
     display: flex;
@@ -78,16 +91,16 @@
       color: $switch-label-text-color;
     }
     &-open {
-      margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
+      margin: 0 var(--nut-switch-label-margin-offset) 0 7px;
       &-rtl {
-        margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
+        margin: 0 7px 0 var(--nut-switch-label-margin-offset);
       }
     }
 
     &-close {
-      margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
+      margin: 0 7px 0 var(--nut-switch-label-margin-offset);
       &-rtl {
-        margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
+        margin: 0 var(--nut-switch-label-margin-offset) 0 7px;
       }
     }
 
diff --git a/src/styles/theme-dark.scss b/src/styles/theme-dark.scss
index 1a6ae5cdf2..df66b6eb15 100644
--- a/src/styles/theme-dark.scss
+++ b/src/styles/theme-dark.scss
@@ -123,7 +123,7 @@ page,
   // --nutui-white-10: rgba(255, 255, 255, 0.7);
   // --nutui-white-11: rgba(255, 255, 255, 0.8);
   --nutui-white-12: rgba(31, 31, 31, 0.9);
-  // --nutui-white-13: rgba(255, 255, 255, 1);
+  --nutui-white-13: rgba(255, 255, 255, 1);
 
   // 品牌颜色语义化
   // 品牌主色调默认态，主要功能控件的背景、边框、镂空状态下的文字等
@@ -133,7 +133,7 @@ page,
   // 品牌渐变色右端
   --nutui-color-primary-stop-2: var(--nutui-brand-stop-2);
   // 品牌主色调或其他深色背景下的文字
-  --nutui-color-primary-text: var(--nutui-gray-1);
+  --nutui-color-primary-text: var(--nutui-white-13);
   // 品牌主色调点击态，背景、边框、镂空状态下的文字
   --nutui-color-primary-pressed: var(--nutui-red-7);
   // 品牌主色调禁用态，背景、边框、镂空状态下的文字
diff --git a/src/styles/theme-default.scss b/src/styles/theme-default.scss
index 24aef40b07..c0cc2dde20 100644
--- a/src/styles/theme-default.scss
+++ b/src/styles/theme-default.scss
@@ -132,7 +132,7 @@ page {
   // 品牌渐变色右端
   --nutui-color-primary-stop-2: var(--nutui-brand-stop-2); // TODO 删掉
   // 品牌主色调或其他深色背景下的文字
-  --nutui-color-primary-text: var(--nutui-gray-1);// TODO white
+  --nutui-color-primary-text: var(--nutui-white-13);
   // 品牌主色调点击态，背景、边框、镂空状态下的文字
   --nutui-color-primary-pressed: var(--nutui-red-7);
   // 品牌主色调禁用态，背景、边框、镂空状态下的文字
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 81322d1ac3..84851b9e7e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -151,7 +151,7 @@ $color-border-disabled: var(--nutui-color-border-disabled, #c2c4cc) !default;
 $color-title: var(--nutui-color-title, #1a1a1a) !default;
 $color-text: var(--nutui-color-text, #505259) !default;
 $color-text-help: var(--nutui-color-text-help, #888b94) !default;
-$color-text-disabled: var(--nutui-color-text-disabled, #c2c4cc) !default;
+$color-text-disabled: var(--nutui-color-text-disabled, #b4b8bf) !default;
 $color-text-dark: var(
   --nutui-color-text-dark,
   rgba(255, 255, 255, 0.9)
@@ -159,7 +159,7 @@ $color-text-dark: var(
 $color-text-link: var(--nutui-color-text-link, #0c82f7) !default;
 
 // 与品牌色一起使用，默认为白色，不区分暗黑与明亮模式。
-$color-primary-text: #ffffff !default;
+$color-primary-text: var(--nutui-color-primary-text, #ffffff) !default;
 $white: #ffffff !default;
 $black: #000000 !default;
 
@@ -1040,15 +1040,16 @@ $switch-active-disabled-background-color: var(
 ) !default;
 $switch-inactive-disabled-background-color: var(
   --nutui-switch-inactive-disabled-background-color,
-  $color-background
+  var(--nutui-color-background-component)
 ) !default;
 $switch-inactive-line-background-color: var(
   --nutui-switch-inactive-line-background-color,
-  #ffffff
+  $color-primary-text
 ) !default;
-$switch-width: var(--nutui-switch-width, scale-px(46px)) !default;
-$switch-height: var(--nutui-switch-height, scale-px(28px)) !default;
-$switch-line-height: var(--nutui-switch-line-height, scale-px(28px)) !default;
+$switch-width: var(--nutui-switch-width, scale-px(56px)) !default;
+$switch-height: var(--nutui-switch-height, scale-px(24px)) !default;
+$switch-inside-width: var(--nutui-switch-inside-width, scale-px(32px)) !default;
+$switch-inside-height: var(--nutui-switch-inside-height, scale-px(20px)) !default;
 $switch-border-radius: var(
   --nutui-switch-border-radius,
   $radius-circle
@@ -1056,29 +1057,19 @@ $switch-border-radius: var(
 $switch-border-width: var(--nutui-switch-border-width, scale-px(2px)) !default;
 $switch-inside-border-radius: var(
   --nutui-switch-inside-border-radius,
-  $radius-full
-) !default;
-/* #ifdef harmony */
-$switch-inside-box-shadow: var(
-  --nutui-switch-inside-box-shadow,
-  0px scale-px(2px) scale-px(6px) 0px rgba(0, 0, 0, 0.1)
+  $radius-circle
 ) !default;
-/* #endif */
-/* #ifndef harmony */
 $switch-inside-box-shadow: var(
   --nutui-switch-inside-box-shadow,
-  0px scale-px(2px) scale-px(1px) 0px rgba(0, 0, 0, 0.06),
-  0px scale-px(2px) scale-px(6px) 0px rgba(0, 0, 0, 0.1),
-  0px 0px 0px scale-px(1px) rgba(0, 0, 0, 0.02)
+  0px scale-px(4px) scale-px(8px) 0px rgba(0, 0, 0, 0.12)
 ) !default;
-/* #endif */
 $switch-label-text-color: var(
   --nutui-switch-label-text-color,
   $color-primary-text
 ) !default;
 $switch-label-font-size: var(
   --nutui-switch-label-font-size,
-  $font-size-s
+  $font-size-xs
 ) !default;
 $switch-inactive-disabled-label-text-color: var(
   --nutui-switch-inactive-disabled-label-text-color,