add darkmode for slack button

public/images/icons/slack/slack-logo-dark-off.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448">
+  <defs>
+    <style>.cls-1{fill:#9BA5AF;}</style>
+  </defs>
+  <path class="cls-1" d="M94.12,283.1A47.06,47.06,0,1,1,47.06,236H94.12Zm23.72,0a47.06,47.06,0,1,1,94.12,0V400.94a47.06,47.06,0,1,1-94.12,0Zm47.06-189A47.06,47.06,0,1,1,212,47.06V94.12Zm0,23.72a47.06,47.06,0,0,1,0,94.12H47.06a47.06,47.06,0,0,1,0-94.12Zm189,47.06A47.06,47.06,0,1,1,400.94,212H353.88V164.9Zm-23.72,0a47.06,47.06,0,1,1-94.12,0V47.06a47.06,47.06,0,1,1,94.12,0V164.9Zm-47.06,189A47.06,47.06,0,1,1,236,400.94V353.88Zm0-23.72a47.06,47.06,0,0,1,0-94.12H400.94a47.06,47.06,0,0,1,0,94.12Z"/>
+</svg>

public/images/icons/slack/slack-logo-dark-on.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448">
+  <defs>
+    <style>.cls-1{fill:#DD80DE;}</style>
+  </defs>
+  <path class="cls-1" d="M94.12,283.1A47.06,47.06,0,1,1,47.06,236H94.12Zm23.72,0a47.06,47.06,0,1,1,94.12,0V400.94a47.06,47.06,0,1,1-94.12,0Zm47.06-189A47.06,47.06,0,1,1,212,47.06V94.12Zm0,23.72a47.06,47.06,0,0,1,0,94.12H47.06a47.06,47.06,0,0,1,0-94.12Zm189,47.06A47.06,47.06,0,1,1,400.94,212H353.88V164.9Zm-23.72,0a47.06,47.06,0,1,1-94.12,0V47.06a47.06,47.06,0,1,1,94.12,0V164.9Zm-47.06,189A47.06,47.06,0,1,1,236,400.94V353.88Zm0-23.72a47.06,47.06,0,0,1,0-94.12H400.94a47.06,47.06,0,0,1,0,94.12Z"/>
+</svg>

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

@@ -71,18 +71,6 @@ label.custom-control-label {
 }
 
 .custom-switch.custom-switch-slack {
-  .custom-control-label {
-    &::after {
-      background-image: url(/images/icons/slack/slack-logo-off.svg);
-      background-size: 15px;
-    }
-  }
-  .custom-control-input:checked ~ .custom-control-label {
-    &::after {
-      background-image: url(/images/icons/slack/slack-logo-on.svg);
-    }
-  }
-
   .input-group-addon {
     input {
       vertical-align: middle;

src/client/styles/scss/molecules/slack-notification.scss

@@ -1,6 +1,5 @@
 .grw-slack-notification {
   $input-height-slack: 1.8rem;
-  background-color: white;
   border-color: $gray-200;
 
   border-style: solid;

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

@@ -232,6 +232,33 @@ ul.pagination {
   }
 }
 
+.grw-slack-notification {
+  background-color: transparent;
+  $color-slack: #4b144c;
+
+  .custom-control-label {
+    &::before {
+      background-color: $secondary;
+      border-color: transparent;
+    }
+    &::after {
+      background-color: darken($color-slack, 5%);
+      background-image: url(/images/icons/slack/slack-logo-dark-off.svg);
+      background-size: 15px;
+    }
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::before {
+      background-color: lighten($color-slack, 10%);
+    }
+    &::after {
+      background-color: darken($color-slack, 5%);
+      background-image: url(/images/icons/slack/slack-logo-dark-on.svg);
+    }
+  }
+}
+
 /*
  * GROWI HandsontableModal
  */

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

@@ -167,6 +167,31 @@ $table-hover-bg: $bgcolor-table-hover;
   }
 }
 
+.grw-slack-notification {
+  background-color: white;
+  $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);
+    }
+  }
+}
+
 /*
  * GROWI HandsontableModal
  */

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

@@ -327,23 +327,25 @@ 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 {
+    //   background-color: transparent;
+    //   $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 {