diff --git a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
index 2e775007a..ecb45e240 100644
--- a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
+++ b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
@@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-cell__value">
           <div class="van-switch van-switch--on" style="font-size: 24px;">
             <div class="van-switch__node">
-              <div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+              <div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
             </div>
           </div>
         </div>
diff --git a/packages/switch/index.tsx b/packages/switch/index.tsx
index 0cf0622b2..23d9abce8 100644
--- a/packages/switch/index.tsx
+++ b/packages/switch/index.tsx
@@ -1,5 +1,5 @@
 import { use } from '../utils';
-import { BLUE } from '../utils/color';
+import { BLUE, GRAY_DARK } from '../utils/color';
 import { switchProps, SharedSwitchProps } from './shared';
 import { emit, inherit } from '../utils/functional';
 import Loading from '../loading';
@@ -20,13 +20,24 @@ function Switch(
   slots: DefaultSlots,
   ctx: RenderContext<SharedSwitchProps>
 ) {
-  const { value, loading, disabled, activeValue, inactiveValue } = props;
+  const {
+    size,
+    value,
+    loading,
+    disabled,
+    activeColor,
+    activeValue,
+    inactiveColor,
+    inactiveValue
+  } = props;
 
-  const style = {
-    fontSize: props.size,
-    backgroundColor: value ? props.activeColor : props.inactiveColor
+  const switchStyle = {
+    fontSize: size,
+    backgroundColor: value ? activeColor : inactiveColor
   };
 
+  const loadingColor = value ? activeColor || BLUE : inactiveColor || GRAY_DARK;
+
   function onClick() {
     if (!disabled && !loading) {
       const newValue = value === activeValue ? inactiveValue : activeValue;
@@ -41,12 +52,12 @@ function Switch(
         on: value === activeValue,
         disabled
       })}
-      style={style}
+      style={switchStyle}
       onClick={onClick}
       {...inherit(ctx)}
     >
       <div class={bem('node')}>
-        {loading && <Loading class={bem('loading')} color={props.activeColor || BLUE} />}
+        {loading && <Loading class={bem('loading')} color={loadingColor} />}
       </div>
     </div>
   );
diff --git a/packages/switch/test/__snapshots__/demo.spec.js.snap b/packages/switch/test/__snapshots__/demo.spec.js.snap
index 8046a37e9..ea58099e8 100644
--- a/packages/switch/test/__snapshots__/demo.spec.js.snap
+++ b/packages/switch/test/__snapshots__/demo.spec.js.snap
@@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-switch van-switch--on" style="font-size: 30px;">
       <div class="van-switch__node">
-        <div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+        <div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
       </div>
     </div>
   </div>