diff --git a/docs/pages/api-docs/switch.json b/docs/pages/api-docs/switch.json
index 2c9f0422029c13..5aa06ebbc06972 100644
--- a/docs/pages/api-docs/switch.json
+++ b/docs/pages/api-docs/switch.json
@@ -8,7 +8,7 @@
         "name": "union",
         "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
       },
-      "default": "'secondary'"
+      "default": "'primary'"
     },
     "defaultChecked": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" } },
diff --git a/docs/src/pages/components/switches/ColorSwitches.js b/docs/src/pages/components/switches/ColorSwitches.js
index dde29fd16f8747..db07e1a948709c 100644
--- a/docs/src/pages/components/switches/ColorSwitches.js
+++ b/docs/src/pages/components/switches/ColorSwitches.js
@@ -4,13 +4,13 @@ import { green } from '@material-ui/core/colors';
 import Switch from '@material-ui/core/Switch';
 
 const GreenSwitch = styled(Switch)(({ theme }) => ({
-  '& .MuiSwitch-input.Mui-checked': {
+  '& .MuiSwitch-switchBase.Mui-checked': {
     color: green[600],
     '&:hover': {
       backgroundColor: alpha(green[600], theme.palette.action.hoverOpacity),
     },
   },
-  '& .MuiSwitch-input.Mui-checked + .MuiSwitch-track': {
+  '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
     backgroundColor: green[600],
   },
 }));
@@ -21,7 +21,7 @@ export default function ColorSwitches() {
   return (
     <div>
       <Switch {...label} defaultChecked />
-      <Switch {...label} defaultChecked color="primary" />
+      <Switch {...label} defaultChecked color="secondary" />
       <Switch {...label} defaultChecked color="default" />
       <GreenSwitch {...label} defaultChecked />
     </div>
diff --git a/docs/src/pages/components/switches/ColorSwitches.tsx b/docs/src/pages/components/switches/ColorSwitches.tsx
index dde29fd16f8747..db07e1a948709c 100644
--- a/docs/src/pages/components/switches/ColorSwitches.tsx
+++ b/docs/src/pages/components/switches/ColorSwitches.tsx
@@ -4,13 +4,13 @@ import { green } from '@material-ui/core/colors';
 import Switch from '@material-ui/core/Switch';
 
 const GreenSwitch = styled(Switch)(({ theme }) => ({
-  '& .MuiSwitch-input.Mui-checked': {
+  '& .MuiSwitch-switchBase.Mui-checked': {
     color: green[600],
     '&:hover': {
       backgroundColor: alpha(green[600], theme.palette.action.hoverOpacity),
     },
   },
-  '& .MuiSwitch-input.Mui-checked + .MuiSwitch-track': {
+  '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
     backgroundColor: green[600],
   },
 }));
@@ -21,7 +21,7 @@ export default function ColorSwitches() {
   return (
     <div>
       <Switch {...label} defaultChecked />
-      <Switch {...label} defaultChecked color="primary" />
+      <Switch {...label} defaultChecked color="secondary" />
       <Switch {...label} defaultChecked color="default" />
       <GreenSwitch {...label} defaultChecked />
     </div>
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index c8fd66a0168d6b..a46c17d608eeb2 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -1278,6 +1278,13 @@ As the core components use emotion as a styled engine, the props used by emotion
   }
   ```
 
+- The switch color prop is now "primary" by default. To continue using the "secondary" color, you must explicitly indicate `secondary`. This brings the switch closer to the Material Design specification.
+
+  ```diff
+  -<Switch />
+  +<Switch color="secondary" />
+  ```
+
 ### Table
 
 - The customization of the table pagination's actions labels must be done with the `getItemAriaLabel` prop. This increases consistency with the `Pagination` component.
diff --git a/packages/material-ui/src/Switch/Switch.d.ts b/packages/material-ui/src/Switch/Switch.d.ts
index 99fb72bfdb132b..63fc13540ed7d8 100644
--- a/packages/material-ui/src/Switch/Switch.d.ts
+++ b/packages/material-ui/src/Switch/Switch.d.ts
@@ -47,7 +47,7 @@ export interface SwitchProps
   };
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
-   * @default 'secondary'
+   * @default 'primary'
    */
   color?: OverridableStringUnion<'primary' | 'secondary' | 'default', SwitchPropsColorOverrides>;
   /**
diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js
index 6cfa60b0f3f6d5..ac5e262a4ce9d7 100644
--- a/packages/material-ui/src/Switch/Switch.js
+++ b/packages/material-ui/src/Switch/Switch.js
@@ -205,7 +205,7 @@ const SwitchThumb = experimentalStyled(
 
 const Switch = React.forwardRef(function Switch(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiSwitch' });
-  const { className, color = 'secondary', edge = false, size = 'medium', sx, ...other } = props;
+  const { className, color = 'primary', edge = false, size = 'medium', sx, ...other } = props;
 
   const styleProps = {
     ...props,
@@ -259,7 +259,7 @@ Switch.propTypes /* remove-proptypes */ = {
   className: PropTypes.string,
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
-   * @default 'secondary'
+   * @default 'primary'
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
     PropTypes.oneOf(['default', 'primary', 'secondary']),