change checkbox design

src/client/styles/scss/theme/_apply-colors.scss

@@ -21,11 +21,15 @@
 
 @each $theme-color, $color in $theme-colors {
   .custom-checkbox-#{$theme-color} {
-    input[type='checkbox']:checked + label:before {
+    .custom-control-label::before {
+      border-color: #d7d7d7;
+      transition: 0.3s ease-in-out;
+    }
+    .custom-control-input:checked + .custom-control-label::before {
       background-color: $color;
       border-color: $color;
     }
-    input[type='checkbox']:checked + label:after {
+    .custom-control-input:checked + .custom-control-label::after {
       color: white;
     }
     .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
@@ -36,7 +40,7 @@
     .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
       color: white;
       background-color: white;
-      border-color: $color;
+      border-color: #d7d7d7;
     }
   }
 }