feat(Switch): change loading color when background color change (#2067)

packages/common/color.ts

@@ -4,3 +4,4 @@ export const WHITE = '#fff';
 export const GREEN = '#07c160';
 export const ORANGE = '#ff976a';
 export const GRAY = '#323233';
+export const GRAY_DARK = '#969799';

packages/switch/index.ts

@@ -1,4 +1,5 @@
 import { VantComponent } from '../common/component';
+import { BLUE, GRAY_DARK } from '../common/color';
 
 VantComponent({
   field: true,
@@ -27,15 +28,24 @@ VantComponent({
 
   watch: {
     checked(value) {
-      this.setData({ value });
+      const loadingColor = this.getLoadingColor(value);
+      this.setData({ value, loadingColor });
     }
   },
 
   created() {
-    this.setData({ value: this.data.checked });
+    const { checked: value } = this.data;
+    const loadingColor = this.getLoadingColor(value);
+
+    this.setData({ value, loadingColor });
   },
 
   methods: {
+    getLoadingColor(checked) {
+      const { activeColor, inactiveColor } = this.data;
+      return checked ? activeColor || BLUE : inactiveColor || GRAY_DARK;
+    },
+
     onClick() {
       const { activeValue, inactiveValue } = this.data;
       if (!this.data.disabled && !this.data.loading) {

packages/switch/index.wxml

@@ -6,6 +6,6 @@
   bind:tap="onClick"
 >
   <view class="van-switch__node node-class">
-    <van-loading wx:if="{{ loading }}" size="50%" custom-class="van-switch__loading" />
+    <van-loading wx:if="{{ loading }}" color="{{ loadingColor }}" size="50%" custom-class="van-switch__loading" />
   </view>
 </view>