change _apply-colors.scss

src/client/styles/scss/atoms/_custom_control.scss

@@ -71,13 +71,23 @@ label.custom-control-label {
 }
 
 .custom-switch.custom-switch-slack {
+  $color-slack: #4b144c;
+
   .custom-control-label {
+    &::before {
+      background-color: $gray-200;
+      border-color: transparent;
+    }
     &::after {
+      background-color: white;
       background-image: url(/images/icons/slack/slack-logo-off.svg);
       background-size: 15px;
     }
   }
   .custom-control-input:checked ~ .custom-control-label {
+    &::before {
+      background-color: lighten($color-slack, 60%);
+    }
     &::after {
       background-image: url(/images/icons/slack/slack-logo-on.svg);
     }

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

@@ -327,23 +327,24 @@ body.on-edit {
     .page-editor-footer {
       border-top-color: $border-color-theme;
     }
-    .grw-slack-notification {
-      $color-slack: #4b144c;
-      .custom-control-label {
-        &::before {
-          background-color: $gray-200;
-          border-color: transparent;
-        }
-        &::after {
-          background-color: white;
-        }
-      }
-      .custom-control-input:checked ~ .custom-control-label {
-        &::before {
-          background-color: lighten($color-slack, 60%);
-        }
-      }
-    }
+
+    //   .grw-slack-notification {
+    //     $color-slack: #4b144c;
+    //     .custom-control-label {
+    //       &::before {
+    //         background-color: $gray-200;
+    //         border-color: transparent;
+    //       }
+    //       &::after {
+    //         background-color: white;
+    //       }
+    //     }
+    //     .custom-control-input:checked ~ .custom-control-label {
+    //       &::before {
+    //         background-color: lighten($color-slack, 60%);
+    //       }
+    //     }
+    //   }
   }
 
   .grw-editor-navbar-bottom {