feat: Color Theme page UI + color picker + toggle

client/scss/components/color-picker.scss

@@ -0,0 +1,32 @@
+.colorpicker {
+  display: flex;
+  align-items: center;
+  height: 60px;
+
+  &-choice {
+    width: 50px;
+    height: 50px;
+    border: 1px solid #FFF;
+    transition: all .2s ease;
+    cursor: pointer;
+
+    &.is-active, &:hover {
+      border-width: 5px;
+      width: 60px;
+      height: 60px;
+    }
+
+    @each $color, $colorvalue in $material-colors {
+		  &.is-#{$color} {
+        background-color: mc($color, '500');
+        border-color: mc($color,'500');
+
+        &.is-active, &:hover {
+          border-color: mc($color,'300');
+        }
+      }
+    }
+
+  }
+
+}

client/scss/components/toggle.scss

@@ -0,0 +1,53 @@
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  cursor: pointer;
+  margin: 5px 5px 5px 0;
+
+  & + & {
+    margin-left: 15px;
+  }
+
+  &-container {
+    display: inline-flex;
+    align-items: center;
+    height: 24px;
+    width: 50px;
+    background-color: mc('grey', '300');
+    border-radius: 12px;
+    padding: 2px;
+    transition: background-color .5s ease;
+  }
+
+  &-pin {
+    display: flex;
+    background-color: #FFF;
+    border-radius:10px;
+    height: 20px;
+    width: 20px;
+    transition: all .5s ease;
+  }
+
+  &-text {
+    padding-left: 10px;
+    color: mc('grey', '700');
+    font-size: 12px;
+  }
+
+  &:hover {
+    .toggle-container {
+      background-color: mc('grey', '400');
+    }
+  }
+
+  &.is-active {
+    .toggle-container {
+      background-color: mc('indigo', '500');
+    }
+    .toggle-pin {
+      margin-left: 28px;
+    }
+  }
+
+}