diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.sass b/packages/vuetify/src/components/VSwitch/VSwitch.sass
index 3c81be92089..219af1772ec 100644
--- a/packages/vuetify/src/components/VSwitch/VSwitch.sass
+++ b/packages/vuetify/src/components/VSwitch/VSwitch.sass
@@ -80,7 +80,7 @@
     .v-switch--inset &
       height: $switch-inset-thumb-height
       width: $switch-inset-thumb-width
-      transform: scale(calc($switch-inset-thumb-off-height / $switch-inset-thumb-height))
+      transform: scale(var(--v-switch-inset-thumb-off-scale, #{$switch-inset-thumb-off-scale}))
 
       &--filled
         transform: none
@@ -89,6 +89,68 @@
       transform: none
       transition: .15s .05s transform settings.$decelerated-easing
 
+  .v-switch--inset-material
+    .v-switch__track
+      opacity: $switch-inset-track-opacity
+      background-color: $switch-inset-unselected-track-color
+      border: $switch-inset-border-width solid $switch-inset-unselected-thumb-color
+
+    .v-switch__thumb
+      background-color: $switch-inset-unselected-thumb-color
+      color: $switch-inset-unselected-track-color
+
+    .v-selection-control--dirty
+      .v-switch__track
+        border-color: transparent
+        background-color: $switch-inset-selected-track-color
+
+      .v-switch__thumb
+        background-color: $switch-inset-selected-thumb-color
+        color: $switch-inset-selected-track-color
+
+    .v-selection-control__input:active .v-switch__thumb
+      transform: scale(var(--v-switch-inset-thumb-pressed-scale, #{$switch-inset-thumb-pressed-scale}))
+
+    .v-selection-control__input:before
+      --v-hover-opacity: 0.08
+      z-index: 1
+
+    // focus is the track outline, so drop the overlay's focus state layer
+    .v-selection-control--focus-visible
+      .v-selection-control__input:before
+        opacity: 0
+
+      .v-switch__track
+        outline: $switch-focus-outline-width solid $switch-focus-outline-color
+        outline-offset: $switch-focus-outline-offset
+
+    .v-selection-control--disabled
+      opacity: 1
+
+      .v-label
+        opacity: var(--v-disabled-opacity)
+
+      .v-switch__track
+        background-color: $switch-inset-disabled-unselected-track-color
+        border-color: $switch-inset-disabled-unselected-border-color
+
+      .v-switch__thumb
+        background-color: $switch-inset-disabled-unselected-thumb-color
+
+        .v-icon
+          opacity: .8
+
+    .v-selection-control--disabled.v-selection-control--dirty
+      .v-switch__track
+        background-color: $switch-inset-disabled-selected-track-color
+        border-color: transparent
+
+      .v-switch__thumb
+        background-color: $switch-inset-disabled-selected-thumb-color
+
+        .v-icon
+          opacity: .4
+
   .v-switch
     $switch-thumb-transform: $switch-track-width * .5 - $switch-thumb-width * .5 + $switch-thumb-offset
 
@@ -102,6 +164,9 @@
       border-radius: 50%
       transition: $switch-control-input-transition
       position: absolute
+      height: calc(var(--v-switch-thumb-height) * 1.666666667)
+      width: calc(var(--v-switch-thumb-height) * 1.666666667)
+
       @include tools.ltr()
         transform: translateX(-$switch-thumb-transform)
       @include tools.rtl()
diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.tsx b/packages/vuetify/src/components/VSwitch/VSwitch.tsx
index 07432932784..f0942361d48 100644
--- a/packages/vuetify/src/components/VSwitch/VSwitch.tsx
+++ b/packages/vuetify/src/components/VSwitch/VSwitch.tsx
@@ -10,6 +10,7 @@ import { VProgressCircular } from '@/components/VProgressCircular'
 import { makeVSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'
 
 // Composables
+import { useBackgroundColor } from '@/composables/color'
 import { useFocus } from '@/composables/focus'
 import { forwardRefs } from '@/composables/forwardRefs'
 import { LoaderSlot, useLoader } from '@/composables/loader'
@@ -20,7 +21,7 @@ import { ref, toRef, useId } from 'vue'
 import { filterInputAttrs, genericComponent, propsFactory, SUPPORTS_MATCH_MEDIA, useRender } from '@/util'
 
 // Types
-import type { ComputedRef, Ref } from 'vue'
+import type { ComputedRef, PropType, Ref } from 'vue'
 import type { VInputSlots } from '@/components/VInput/VInput'
 import type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'
 import type { IconValue } from '@/composables/icons'
@@ -43,8 +44,12 @@ export type VSwitchSlots =
   }
 
 export const makeVSwitchProps = propsFactory({
-  inset: Boolean,
+  inset: {
+    type: [Boolean, String] as PropType<boolean | 'tonal' | 'material'>,
+    default: false,
+  },
   flat: Boolean,
+  thumbColor: String,
   loading: {
     type: [Boolean, String],
     default: false,
@@ -78,6 +83,10 @@ export const VSwitch = genericComponent<new <T>(
     const model = useProxiedModel(props, 'modelValue')
     const { loaderClasses } = useLoader(props)
     const { isFocused, focus, blur } = useFocus(props)
+    const {
+      backgroundColorClasses: thumbColorClasses,
+      backgroundColorStyles: thumbColorStyles,
+    } = useBackgroundColor(() => props.thumbColor)
     const control = ref<VSelectionControl>()
     const inputRef = ref<VInput>()
     const isForcedColorsModeActive = SUPPORTS_MATCH_MEDIA && window.matchMedia('(forced-colors: active)').matches
@@ -106,6 +115,8 @@ export const VSwitch = genericComponent<new <T>(
       const [rootAttrs, controlAttrs] = filterInputAttrs(attrs)
       const inputProps = VInput.filterProps(props)
       const controlProps = VSelectionControl.filterProps(props)
+      const isMaterial = ['material', 'square'].includes(String(props.inset))
+      const hasThumbColor = !isForcedColorsModeActive && !!props.thumbColor
 
       return (
         <VInput
@@ -113,7 +124,8 @@ export const VSwitch = genericComponent<new <T>(
           class={[
             'v-switch',
             { 'v-switch--flat': props.flat },
-            { 'v-switch--inset': props.inset },
+            { 'v-switch--inset': !!props.inset },
+            { 'v-switch--inset-material': props.inset === 'material' },
             { 'v-switch--indeterminate': indeterminate.value },
             loaderClasses.value,
             props.class,
@@ -179,23 +191,43 @@ export const VSwitch = genericComponent<new <T>(
                         )}
                       </div>
                     ),
-                    input: ({ inputNode, icon, backgroundColorClasses, backgroundColorStyles }) => (
+                    input: ({
+                      inputNode,
+                      icon,
+                      model: isSelected,
+                      backgroundColorClasses,
+                      backgroundColorStyles,
+                      textColorClasses,
+                      textColorStyles,
+                    }) => (
                       <>
                         { inputNode }
                         <div
                           class={[
                             'v-switch__thumb',
                             { 'v-switch__thumb--filled': icon || props.loading },
-                            props.inset || isForcedColorsModeActive ? undefined : backgroundColorClasses.value,
+                            isForcedColorsModeActive ? undefined
+                            : (hasThumbColor && isSelected.value) ? thumbColorClasses.value
+                            : isMaterial ? backgroundColorClasses.value
+                            : props.inset ? undefined
+                            : backgroundColorClasses.value,
+                          ]}
+                          style={[
+                            (hasThumbColor && isSelected.value) ? thumbColorStyles.value
+                            : isMaterial
+                              ? (backgroundColorClasses.value.length || backgroundColorStyles.value.backgroundColor
+                                ? { backgroundColor: 'currentColor' }
+                                : undefined)
+                              : props.inset ? undefined
+                              : backgroundColorStyles.value,
                           ]}
-                          style={ props.inset ? undefined : backgroundColorStyles.value }
                         >
                           { slots.thumb ? (
                             <VDefaultsProvider
                               defaults={{
                                 VIcon: {
                                   icon,
-                                  size: 'x-small',
+                                  size: isMaterial ? 16 : 'x-small',
                                 },
                               }}
                             >
@@ -207,8 +239,10 @@ export const VSwitch = genericComponent<new <T>(
                                 (icon && (
                                   <VIcon
                                     key={ String(icon) }
+                                    class={ isMaterial ? textColorClasses.value : undefined }
+                                    style={ isMaterial ? textColorStyles.value : undefined }
                                     icon={ icon }
-                                    size="x-small"
+                                    size={ isMaterial ? 16 : 'x-small' }
                                   />
                                 ))) : (
                                 <LoaderSlot
diff --git a/packages/vuetify/src/components/VSwitch/_variables.scss b/packages/vuetify/src/components/VSwitch/_variables.scss
index 4aaa7775db5..4e35dde525c 100644
--- a/packages/vuetify/src/components/VSwitch/_variables.scss
+++ b/packages/vuetify/src/components/VSwitch/_variables.scss
@@ -10,9 +10,30 @@ $switch-inset-thumb-height: 24px !default;
 $switch-inset-thumb-width: 24px !default;
 $switch-inset-thumb-off-height: 16px !default;
 $switch-inset-thumb-off-width: 16px !default;
+$switch-inset-thumb-off-scale: calc(#{$switch-inset-thumb-off-height} / #{$switch-inset-thumb-height}) !default;
+$switch-inset-thumb-pressed-scale: calc(28px / #{$switch-inset-thumb-height}) !default;
 $switch-inset-track-border-radius: 9999px !default;
 $switch-inset-track-height: 32px !default;
 $switch-inset-track-width: 52px !default;
+$switch-inset-track-opacity: 1 !default;
+$switch-inset-border-width: 2px !default;
+
+$switch-inset-unselected-track-color: color-mix(in srgb, rgb(var(--v-theme-on-surface-variant)) 50%, #888) !default;
+$switch-inset-unselected-thumb-color: color-mix(in srgb, rgb(var(--v-theme-surface-variant)) 50%, #888) !default;
+$switch-inset-unselected-border-color: $switch-inset-unselected-thumb-color !default;
+
+$switch-inset-selected-track-color: color-mix(in srgb, rgb(var(--v-theme-surface-variant)) 90%, white) !default;
+$switch-inset-selected-thumb-color: color-mix(in srgb, rgb(var(--v-theme-on-surface-variant)) 80%, white) !default;
+
+$switch-focus-outline-color: rgb(var(--v-theme-primary)) !default;
+$switch-focus-outline-width: 2px !default;
+$switch-focus-outline-offset: 2px !default;
+
+$switch-inset-disabled-unselected-track-color: color-mix(in srgb, #{$switch-inset-unselected-track-color} 12%, transparent) !default;
+$switch-inset-disabled-unselected-thumb-color: rgba(var(--v-theme-on-surface), .38) !default;
+$switch-inset-disabled-unselected-border-color: rgba(var(--v-theme-on-surface), .12) !default;
+$switch-inset-disabled-selected-track-color: rgba(var(--v-theme-on-surface), .12) !default;
+$switch-inset-disabled-selected-thumb-color: rgb(var(--v-theme-surface)) !default;
 
 $switch-label-margin-inline-start: 10px !default;
 $switch-loader-color: rgb(var(--v-theme-surface)) !default;