defaultThemeだけできた。

src/client/js/components/PageEditor/OptionsSelector.jsx

@@ -247,9 +247,9 @@ class OptionsSelector extends React.Component {
   render() {
     return (
       <div className="d-flex flex-row">
-        <span className="ml-2">{this.renderThemeSelector()}</span>
-        <span className="ml-2">{this.renderKeymapModeSelector()}</span>
-        <span className="ml-2">{this.renderConfigurationDropdown()}</span>
+        <span className="ml-3">{this.renderThemeSelector()}</span>
+        <span className="ml-4">{this.renderKeymapModeSelector()}</span>
+        <span className="ml-4">{this.renderConfigurationDropdown()}</span>
       </div>
     );
   }

src/client/styles/scss/atoms/_buttons.scss

@@ -13,6 +13,20 @@
   }
 }
 
+.btn.btn-outline-secondary {
+  color: $secondary !important;
+
+  &.active,
+  &:hover {
+    background-color: lighten($secondary, 50%) !important;
+  }
+
+  &:not(:hover):not(.active) {
+    background-color: white !important;
+  }
+  border-color: $light !important;
+}
+
 .btn-copy,
 .btn-edit {
   opacity: 0.3;

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

@@ -165,6 +165,11 @@ $table-hover-bg: $bgcolor-table-hover;
   #slack-mark-white {
     display: none;
   }
+
+  .input-group-text {
+    color: $secondary !important;
+    border-color: $light;
+  }
 }
 
 /*