[fix] Switch support for custom colors when disabled

Close #2164
Fix #1758

packages/examples/pages/switch/index.js

@@ -24,6 +24,14 @@ export default function SwitchPage() {
         <Switch disabled={true} value={false} />
         <Divider />
         <Switch disabled={true} value={true} />
+        <Divider />
+        <Switch activeThumbColor="#fff" activeTrackColor="#E0245E" disabled={true} value={true} />
+        <Divider />
+        <Switch disabled={true} thumbColor="#fff" trackColor="#E0245E" value={false} />
+        <Divider />
+        <Switch disabled={true} trackColor={{ true: '#E0245E', false: '#1DA1F2' }} value={false} />
+        <Divider />
+        <Switch disabled={true} trackColor={{ true: '#E0245E', false: '#1DA1F2' }} value={true} />
       </View>
       <View style={styles.row}>
         <Switch value={false} />

packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided false value of trackColor 1`] = `
+<div
+  class="css-view-1dbjc4n r-bottom-1p0dtai r-forcedColorAdjust-1c6unfx r-height-1dernwh r-left-1d2f490 r-margin-ywje51 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-transitionDuration-13tjlyg r-width-13qz1uu"
+  style="background-color: rgb(29, 161, 242); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"
+/>
+`;
+
+exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided thumbColor 1`] = `
+<div
+  class="css-view-1dbjc4n r-alignSelf-k200y r-borderRadius-1j16mh1 r-boxShadow-1ewcgjf r-forcedColorAdjust-1c6unfx r-left-1fe0xdi r-transform-1sncvnh r-transitionDuration-13tjlyg"
+  style="background-color: rgb(255, 255, 255); height: 20px; margin-left: 0px; width: 20px;"
+/>
+`;
+
+exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided trackColor 1`] = `
+<div
+  class="css-view-1dbjc4n r-bottom-1p0dtai r-forcedColorAdjust-1c6unfx r-height-1dernwh r-left-1d2f490 r-margin-ywje51 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-transitionDuration-13tjlyg r-width-13qz1uu"
+  style="background-color: rgb(224, 36, 94); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"
+/>
+`;
+
+exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided activeThumbColor 1`] = `
+<div
+  class="css-view-1dbjc4n r-alignSelf-k200y r-borderRadius-1j16mh1 r-boxShadow-1ewcgjf r-forcedColorAdjust-1c6unfx r-left-7b7h2f r-transform-1sncvnh r-transitionDuration-13tjlyg"
+  style="background-color: rgb(255, 255, 255); height: 20px; margin-left: -20px; width: 20px;"
+/>
+`;
+
+exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided activeTrackColor 1`] = `
+<div
+  class="css-view-1dbjc4n r-bottom-1p0dtai r-forcedColorAdjust-1c6unfx r-height-1dernwh r-left-1d2f490 r-margin-ywje51 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-transitionDuration-13tjlyg r-width-13qz1uu"
+  style="background-color: rgb(224, 36, 94); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"
+/>
+`;
+
+exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided true value of trackColor 1`] = `
+<div
+  class="css-view-1dbjc4n r-bottom-1p0dtai r-forcedColorAdjust-1c6unfx r-height-1dernwh r-left-1d2f490 r-margin-ywje51 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-transitionDuration-13tjlyg r-width-13qz1uu"
+  style="background-color: rgb(224, 36, 94); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"
+/>
+`;

packages/react-native-web/src/exports/Switch/__tests__/index-test.js

@@ -8,6 +8,14 @@ function findCheckbox(container) {
   return container.firstChild.querySelector('input');
 }
 
+function findSwitchTrack(container) {
+  return container.firstChild.querySelector('div');
+}
+
+function findSwitchThumb(container) {
+  return container.firstChild.childNodes[1];
+}
+
 describe('components/Switch', () => {
   test('accessibilityLabel is applied to native checkbox', () => {
     const { container } = render(<Switch accessibilityLabel="switch" />);
@@ -24,6 +32,40 @@ describe('components/Switch', () => {
       const { container } = render(<Switch disabled />);
       expect(findCheckbox(container).disabled).toBe(true);
     });
+
+    test('when "true" and value="true", a disabled checkbox is rendered with provided activeTrackColor', () => {
+      const { container } = render(<Switch activeTrackColor="#E0245E" disabled value={true} />);
+      expect(findSwitchTrack(container)).toMatchSnapshot();
+    });
+
+    test('when "true" and value="true", a disabled checkbox is rendered with provided activeThumbColor', () => {
+      const { container } = render(<Switch activeThumbColor="#fff" disabled value={true} />);
+      expect(findSwitchThumb(container)).toMatchSnapshot();
+    });
+
+    test('when "true" and value="false", a disabled checkbox is rendered with provided trackColor', () => {
+      const { container } = render(<Switch disabled trackColor="#E0245E" value={false} />);
+      expect(findSwitchTrack(container)).toMatchSnapshot();
+    });
+
+    test('when "true" and value="false", a disabled checkbox is rendered with provided thumbColor', () => {
+      const { container } = render(<Switch disabled thumbColor="#fff" value={false} />);
+      expect(findSwitchThumb(container)).toMatchSnapshot();
+    });
+
+    test('when "true" and value="true", a disabled checkbox is rendered with provided true value of trackColor', () => {
+      const { container } = render(
+        <Switch disabled={true} trackColor={{ true: '#E0245E', false: '#1DA1F2' }} value={true} />
+      );
+      expect(findSwitchTrack(container)).toMatchSnapshot();
+    });
+
+    test('when "true" and value="false", a disabled checkbox is rendered with provided false value of trackColor', () => {
+      const { container } = render(
+        <Switch disabled={true} trackColor={{ true: '#E0245E', false: '#1DA1F2' }} value={false} />
+      );
+      expect(findSwitchTrack(container)).toMatchSnapshot();
+    });
   });
 
   describe('onValueChange', () => {

packages/react-native-web/src/exports/Switch/index.js

@@ -31,19 +31,27 @@ const emptyObject = {};
 const thumbDefaultBoxShadow = '0px 1px 3px rgba(0,0,0,0.5)';
 const thumbFocusedBoxShadow = `${thumbDefaultBoxShadow}, 0 0 0 10px rgba(0,0,0,0.1)`;
 
+const defaultActiveTrackColor = '#A3D3CF';
+const defaultTrackColor = '#939393';
+const defaultDisabledTrackColor = '#D5D5D5';
+
+const defaultActiveThumbColor = '#009688';
+const defaultThumbColor = '#FAFAFA';
+const defaultDisabledThumbColor = '#BDBDBD';
+
 const Switch: React.AbstractComponent<
   SwitchProps,
   React.ElementRef<typeof View>
 > = React.forwardRef((props, forwardedRef) => {
   const {
     accessibilityLabel,
-    activeThumbColor = '#009688',
+    activeThumbColor,
-    activeTrackColor = '#A3D3CF',
+    activeTrackColor,
     disabled = false,
     onValueChange,
     style = emptyObject,
-    thumbColor = '#FAFAFA',
+    thumbColor,
-    trackColor = '#939393',
+    trackColor,
     value = false,
     ...other
   } = props;
@@ -69,31 +77,74 @@ const Switch: React.AbstractComponent<
   const minWidth = multiplyStyleLengthValue(height, 2);
   const width = styleWidth > minWidth ? styleWidth : minWidth;
   const trackBorderRadius = multiplyStyleLengthValue(height, 0.5);
+
   const trackCurrentColor = (function () {
     if (value === true) {
       if (trackColor != null && typeof trackColor === 'object') {
         return trackColor.true;
       } else {
-        return activeTrackColor;
+        return activeTrackColor ?? defaultActiveTrackColor;
       }
     } else {
       if (trackColor != null && typeof trackColor === 'object') {
         return trackColor.false;
       } else {
-        return trackColor;
+        return trackColor ?? defaultTrackColor;
       }
     }
   })();
-  const thumbCurrentColor = value ? activeThumbColor : thumbColor;
+
+  const thumbCurrentColor = value
+    ? activeThumbColor ?? defaultActiveThumbColor
+    : thumbColor ?? defaultThumbColor;
+
   const thumbHeight = height;
   const thumbWidth = thumbHeight;
 
   const rootStyle = [styles.root, style, disabled && styles.cursorDefault, { height, width }];
 
+  const disabledTrackColor = (function () {
+    if (value === true) {
+      if (
+        (typeof activeTrackColor === 'string' && activeTrackColor != null) ||
+        (typeof trackColor === 'object' && trackColor?.true)
+      ) {
+        return trackCurrentColor;
+      } else {
+        return defaultDisabledTrackColor;
+      }
+    } else {
+      if (
+        (typeof trackColor === 'string' && trackColor != null) ||
+        (typeof trackColor === 'object' && trackColor?.false)
+      ) {
+        return trackCurrentColor;
+      } else {
+        return defaultDisabledTrackColor;
+      }
+    }
+  })();
+
+  const disabledThumbColor = (function () {
+    if (value === true) {
+      if (activeThumbColor == null) {
+        return defaultDisabledThumbColor;
+      } else {
+        return thumbCurrentColor;
+      }
+    } else {
+      if (thumbColor == null) {
+        return defaultDisabledThumbColor;
+      } else {
+        return thumbCurrentColor;
+      }
+    }
+  })();
+
   const trackStyle = [
     styles.track,
     {
-      backgroundColor: disabled ? '#D5D5D5' : trackCurrentColor,
+      backgroundColor: disabled ? disabledTrackColor : trackCurrentColor,
       borderRadius: trackBorderRadius
     }
   ];
@@ -102,7 +153,7 @@ const Switch: React.AbstractComponent<
     styles.thumb,
     value && styles.thumbActive,
     {
-      backgroundColor: disabled ? '#BDBDBD' : thumbCurrentColor,
+      backgroundColor: disabled ? disabledThumbColor : thumbCurrentColor,
       height: thumbHeight,
       marginStart: value ? multiplyStyleLengthValue(thumbWidth, -1) : 0,
       width: thumbWidth