diff --git a/build/scss/_forms.scss b/build/scss/_forms.scss
index 8031c6021..de20b9f0c 100644
--- a/build/scss/_forms.scss
+++ b/build/scss/_forms.scss
@@ -311,3 +311,12 @@ body.text-sm {
     @include custom-range-variant($name, $color);
   }
 }
+
+// custom control input variations
+@each $name, $color in $theme-colors {
+  @include custom-control-input-variant($name, $color);
+}
+
+@each $name, $color in $colors {
+  @include custom-control-input-variant($name, $color);
+}
diff --git a/build/scss/mixins/_custom-forms.scss b/build/scss/mixins/_custom-forms.scss
index d821f190c..19c620b6c 100644
--- a/build/scss/mixins/_custom-forms.scss
+++ b/build/scss/mixins/_custom-forms.scss
@@ -79,3 +79,32 @@
     }
   }
 }
+
+
+// Custom Control Input Variant
+@mixin custom-control-input-variant($name, $color) {
+  .custom-control-input-#{$name} {
+    &:checked ~ .custom-control-label::before {
+      border-color: $color;
+      @include gradient-bg($color);
+    }
+
+    &:focus ~ .custom-control-label::before {
+      // the mixin is not used here to make sure there is feedback
+      @if $enable-shadows {
+        box-shadow: $input-box-shadow, 0 0 0 $input-btn-focus-width rgba($color, .25);
+      } @else {
+        box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .25);
+      }
+    }
+
+    &:focus:not(:checked) ~ .custom-control-label::before {
+      border-color: lighten($color, 25%);
+    }
+
+    &:not(:disabled):active ~ .custom-control-label::before {
+      background-color: lighten($color, 35%);
+      border-color: lighten($color, 35%);
+    }
+  }
+}