--- a/client/src/components/systemconfiguration/ColorSettings.vue	Tue Jul 09 16:52:19 2019 +0200
+++ b/client/src/components/systemconfiguration/ColorSettings.vue	Tue Jul 09 17:00:33 2019 +0200
@@ -29,6 +29,9 @@
       <a @click.prevent="submit" class="btn btn-info btn-sm text-white">
         <translate>Send</translate>
       </a>
+      <a @click.prevent="reset" class="btn btn-outline-info btn-sm ml-2">
+        <translate>Reset to defaults</translate>
+      </a>
     </div>
   </div>
 </template>
@@ -66,7 +69,8 @@
  */
 import { Chrome, Compact } from "vue-color";
 import { HTTP } from "@/lib/http";
-import { displayError } from "@/lib/errors";
+import { displayError, displayInfo } from "@/lib/errors";
+import defaults from "./defaults";
 
 export default {
   name: "colorsettings",
@@ -83,33 +87,42 @@
     "compact-picker": Compact
   },
   methods: {
+    reset() {
+      this.strokeColor = defaults.feature_colours_bottlenecks_stroke;
+      this.fillColor = defaults.feature_colours_bottlenecks_fill;
+    },
     submit() {
-      HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.rgba, {
-        headers: {
-          "X-Gemma-Auth": localStorage.getItem("token"),
-          "Content-type": "application/json"
-        }
-      })
-        .then()
+      Promise.all([
+        HTTP.put(
+          "/system/style/Bottlenecks/stroke",
+          this.strokeColor.rgba || this.strokeColor,
+          {
+            headers: {
+              "X-Gemma-Auth": localStorage.getItem("token"),
+              "Content-type": "application/json"
+            }
+          }
+        ),
+        HTTP.put(
+          "/system/style/Bottlenecks/fill",
+          this.fillColor.rgba || this.fillColor,
+          {
+            headers: {
+              "X-Gemma-Auth": localStorage.getItem("token"),
+              "Content-type": "application/json"
+            }
+          }
+        )
+      ])
+        .then(() => {
+          displayInfo({
+            message: "Configuration saved!"
+          });
+        })
         .catch(error => {
           const { status, data } = error.response;
           displayError({
-            title: this.$gettext("Backend Error"),
-            message: `${status}: ${data.message || data}`
-          });
-        });
-
-      HTTP.put("/system/style/Bottlenecks/fill", this.fillColor.rgba, {
-        headers: {
-          "X-Gemma-Auth": localStorage.getItem("token"),
-          "Content-type": "application/json"
-        }
-      })
-        .then()
-        .catch(error => {
-          const { status, data } = error.response;
-          displayError({
-            title: this.$gettext("Backend Error"),
+            title: "Backend Error",
             message: `${status}: ${data.message || data}`
           });
         });