diff --git a/scss/_variables.scss b/scss/_variables.scss
index bea1f73fe4..3ad989a419 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -692,11 +692,11 @@ $form-check-padding-start: $form-check-input-width + .5em !defaul
$form-check-margin-bottom: .125rem !default;
$form-check-label-color: null !default;
$form-check-label-cursor: null !default;
-$form-check-transition: background-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$form-check-transition: null !default;
$form-check-input-active-filter: brightness(90%) !default;
-$form-check-input-bg: $body-bg !default;
+$form-check-input-bg: $input-bg !default;
$form-check-input-border: 1px solid rgba(0, 0, 0, .25) !default;
$form-check-input-border-radius: .25em !default;
$form-check-radio-border-radius: 50% !default;
@@ -723,6 +723,7 @@ $form-switch-width: 2em !default;
$form-switch-padding-start: $form-switch-width + .5em !default;
$form-switch-bg-image: url("data:image/svg+xml,") !default;
$form-switch-border-radius: $form-switch-width !default;
+$form-switch-transition: background-position .15s ease-in-out !default;
$form-switch-focus-color: $input-focus-border-color !default;
$form-switch-focus-bg-image: url("data:image/svg+xml,") !default;
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 1d6d87363d..b34250a710 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -113,6 +113,7 @@
background-image: escape-svg($form-switch-bg-image);
background-position: left center;
@include border-radius($form-switch-border-radius);
+ @include transition($form-switch-transition);
&:focus {
background-image: escape-svg($form-switch-focus-bg-image);