diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 4736154c9..f16410794 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -135,51 +135,59 @@ fieldset.blue legend {
 }
 
 fieldset.gray {
-  border-color: #9B9B9B;
+  border-color: #BCC2CD;
 }
 
 fieldset.gray legend {
-  color: #9B9B9B;
+  color: #BCC2CD;
 }
 
 fieldset.green {
-  border-color: #B8E986;
+  border-color: #50fa7b;
 }
 
 fieldset.green legend {
-  color: #B8E986;
+  color: #50fa7b;
 }
 
 fieldset.cyan {
-  border-color: #50E3C2;
+  border-color: #8be9fd;
 }
 
 fieldset.cyan legend {
-  color: #50E3C2;
-}
-
-fieldset.blue-dark {
-  border-color: #4A90E2;
-}
-
-fieldset.blue-dark legend {
-  color: #4A90E2;
+  color: #8be9fd;
 }
 
 fieldset.purple {
-  border-color: #C198FB;
+  border-color: #bd93f9;
 }
 
 fieldset.purple legend {
-  color: #C198FB;
+  color: #bd93f9;
 }
 
 fieldset.orange {
-  border-color: #F5A623;
+  border-color: #ffb86c;
 }
 
 fieldset.orange legend {
-  color: #F5A623;
+  color: #ffb86c;
+}
+
+fieldset.pink {
+  border-color: #ff79c6;
+}
+
+fieldset.pink legend {
+  color: #ff79c6;
+}
+
+fieldset.red {
+  border-color: #ff5555;
+}
+
+fieldset.red legend {
+  color: #ff5555;
 }
 
 .hidden {
diff --git a/assets/css/themes.scss b/assets/css/themes.scss
index d611740f3..5a9c5410f 100644
--- a/assets/css/themes.scss
+++ b/assets/css/themes.scss
@@ -7,21 +7,21 @@
 
 // Dark is the default theme variant.
 :root {
-  --bg-dark-color: #000000;
+  --bg-dark-color: #44475a;
   // Background color
-  --bg-color: #121212;
+  --bg-color: #282a36;
 	// Auto-complete color
-	--atc-color: #212121;
+	--atc-color: #3C4556;
   // Text color
-  --fg-color: #FFF;
+  --fg-color: #f8f8f2;
 
   // Error color
-  --err-color: #393939;
+  --err-color: #3C4556;
 
   // Active color
-  --ac-color: #51FF0D;
+  --ac-color: #50fa7b;
   // Active text color
-  --act-color: #121212;
+  --act-color: #282a36;
 }
 
 :root.light {
diff --git a/components/autocomplete.vue b/components/autocomplete.vue
index 0ec662627..a1482af45 100644
--- a/components/autocomplete.vue
+++ b/components/autocomplete.vue
@@ -1,190 +1,189 @@
 <template>
-	<div class="autocomplete-wrapper">
-		<label>
-			<slot />
-			<input type="text"
-						 :placeholder="placeholder"
-						 v-model="value"
-						 @input="updateSuggestions"
-						 @keyup="updateSuggestions"
-						 @click="updateSuggestions"
-						 @keydown="handleKeystroke"
-						 ref="acInput"
-						:spellcheck="spellcheck"
-						:autocapitalize="spellcheck"
-						:autocorrect="spellcheck">
+  <div class="autocomplete-wrapper">
+    <label>
+      <slot />
+      <input type="text" :placeholder="placeholder" v-model="value" @input="updateSuggestions" @keyup="updateSuggestions" @click="updateSuggestions" @keydown="handleKeystroke" ref="acInput" :spellcheck="spellcheck" :autocapitalize="spellcheck" :autocorrect="spellcheck">
 
-			<ul class="suggestions" v-if="suggestions.length > 0 && suggestionsVisible" :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }">
-				<li v-for="(suggestion, index) in suggestions" @click.prevent="forceSuggestion(suggestion)" :class="{ active: currentSuggestionIndex === index }">{{ suggestion }}</li>
-			</ul>
-		</label>
-	</div>
+      <ul class="suggestions" v-if="suggestions.length > 0 && suggestionsVisible" :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }">
+        <li v-for="(suggestion, index) in suggestions" @click.prevent="forceSuggestion(suggestion)" :class="{ active: currentSuggestionIndex === index }">{{ suggestion }}</li>
+      </ul>
+    </label>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-.autocomplete-wrapper {
+  .autocomplete-wrapper {
 
-	position: relative;
+    position: relative;
 
-	input:focus + ul.suggestions, ul.suggestions:hover {
-		display: block;
-	}
+    input:focus+ul.suggestions,
+    ul.suggestions:hover {
+      display: block;
+    }
 
-	ul.suggestions {
-		display: none;
-		background-color: var(--atc-color);
-		position: absolute;
-		top: 90%;
-		margin: 0 4px;
-		left: 0;
+    ul.suggestions {
+      display: none;
+      background-color: var(--atc-color);
+      position: absolute;
+      top: 90%;
+      margin: 0 4px;
+      left: 0;
 
-		padding: 0;
-		border-radius: 0 0 4px 4px;
-		z-index: 9999;
-		transition: transform 200ms ease-out;
+      padding: 0;
+      border-radius: 0 0 4px 4px;
+      z-index: 9999;
+      transition: transform 200ms ease-out;
 
-		li {
-			width: 100%;
-			display: block;
-			margin: 5px 0;
-			padding: 10px 10px;
-			font-weight: 700;
-			font-size: 18px;
-			font-family: monospace;
-			white-space: pre-wrap;
+      li {
+        width: 100%;
+        display: block;
+        padding: 8px 16px;
+        font-weight: 700;
+        font-size: 18px;
+        font-family: monospace;
+        white-space: pre-wrap;
 
-			&:hover, &.active {
-				background-color: var(--ac-color);
-			}
-		}
-	}
+        &:last-child {
+          border-radius: 0 0 4px 4px;
+        }
+
+        &:hover,
+        &.active {
+          background-color: var(--ac-color);
+          color: var(--act-color);
+          cursor: pointer;
+        }
+      }
+    }
+
+  }
 
-}
 </style>
 
 <script>
-	const KEY_TAB = 9;
-	const KEY_ESC = 27;
+  const KEY_TAB = 9;
+  const KEY_ESC = 27;
 
-	const KEY_ARROW_UP = 38;
-	const KEY_ARROW_DOWN = 40;
+  const KEY_ARROW_UP = 38;
+  const KEY_ARROW_DOWN = 40;
 
-	export default {
-	    props: {
-	        spellcheck: {
-	            type: Boolean,
-							default: true,
-							required: false
-					},
+  export default {
+    props: {
+      spellcheck: {
+        type: Boolean,
+        default: true,
+        required: false
+      },
 
-	        placeholder: {
-	            type: String,
-	            default: 'Start typing...',
-							required: false
-					},
+      placeholder: {
+        type: String,
+        default: 'Start typing...',
+        required: false
+      },
 
-					source: {
-	            type: Array,
-	            required: true
-					},
+      source: {
+        type: Array,
+        required: true
+      },
 
-					value: {}
-			},
+      value: {}
+    },
 
-			watch: {
-	        value () {
-	            this.$emit('input', this.value);
-					}
-			},
-
-			data () {
-	        return {
-	            value: "",
-
-							selectionStart: 0,
-							suggestionsOffsetLeft: 0,
-							currentSuggestionIndex: -1,
-							suggestionsVisible: false
-					}
-			},
-
-			methods: {
-          updateSuggestions (event) {
-							// Hide suggestions if ESC pressed.
-              if(event.which && event.which === KEY_ESC){
-                  event.preventDefault();
-                  this.suggestionsVisible = false;
-                  this.currentSuggestionIndex = -1;
-                  return;
-              }
-
-              // As suggestions is a reactive property, this implicitly
-              // causes suggestions to update.
-              this.selectionStart = this.$refs.acInput.selectionStart;
-              this.suggestionsOffsetLeft = (12 * this.selectionStart);
-              this.suggestionsVisible = true;
-					},
-
-					forceSuggestion (text) {
-              let input = this.value.substring(0, this.selectionStart);
-              this.value = input + text;
-
-              this.selectionStart = this.value.length;
-              this.suggestionsVisible = true;
-              this.currentSuggestionIndex = -1;
-					},
-
-					handleKeystroke (event) {
-              if(event.which === KEY_ARROW_UP){
-                  event.preventDefault();
-
-                  this.currentSuggestionIndex = this.currentSuggestionIndex - 1 >= 0
-											? this.currentSuggestionIndex - 1
-											: 0;
-							}else if(event.which === KEY_ARROW_DOWN){
-                  event.preventDefault();
-
-                  this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1
-                      ? this.currentSuggestionIndex + 1
-                      : this.suggestions.length - 1;
-							}
-
-	            if(event.which === KEY_TAB){
-	                event.preventDefault();
-
-	                let activeSuggestion = this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0];
-                  if(activeSuggestion){
-										let input = this.value.substring(0, this.selectionStart);
-										this.value = input + activeSuggestion;
-									}
-							}
-					}
-			},
-
-			computed: {
-				/**
-				 * Gets the suggestions list to be displayed under the input box.
-				 *
-				 * @returns {default.props.source|{type, required}}
-				 */
-				suggestions () {
-				    let input = this.value.substring(0, this.selectionStart);
-
-				    return this.source.filter((entry) => {
-				        return entry.toLowerCase().startsWith(input.toLowerCase())
-										&& input.toLowerCase() !== entry.toLowerCase();
-						})
-							// Cut off the part that's already been typed.
-							.map((entry) => entry.substring(this.selectionStart))
-							// We only want the top 3 suggestions.
-							.slice(0, 3);
-				}
-			},
-
-			mounted () {
-	        this.updateSuggestions({
-							target: this.$refs.acInput
-					});
+    watch: {
+      value() {
+        this.$emit('input', this.value);
       }
+    },
+
+    data() {
+      return {
+        value: "",
+
+        selectionStart: 0,
+        suggestionsOffsetLeft: 0,
+        currentSuggestionIndex: -1,
+        suggestionsVisible: false
+      }
+    },
+
+    methods: {
+      updateSuggestions(event) {
+        // Hide suggestions if ESC pressed.
+        if (event.which && event.which === KEY_ESC) {
+          event.preventDefault();
+          this.suggestionsVisible = false;
+          this.currentSuggestionIndex = -1;
+          return;
+        }
+
+        // As suggestions is a reactive property, this implicitly
+        // causes suggestions to update.
+        this.selectionStart = this.$refs.acInput.selectionStart;
+        this.suggestionsOffsetLeft = (12 * this.selectionStart);
+        this.suggestionsVisible = true;
+      },
+
+      forceSuggestion(text) {
+        let input = this.value.substring(0, this.selectionStart);
+        this.value = input + text;
+
+        this.selectionStart = this.value.length;
+        this.suggestionsVisible = true;
+        this.currentSuggestionIndex = -1;
+      },
+
+      handleKeystroke(event) {
+        if (event.which === KEY_ARROW_UP) {
+          event.preventDefault();
+
+          this.currentSuggestionIndex = this.currentSuggestionIndex - 1 >= 0 ?
+            this.currentSuggestionIndex - 1 :
+            0;
+        } else if (event.which === KEY_ARROW_DOWN) {
+          event.preventDefault();
+
+          this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1 ?
+            this.currentSuggestionIndex + 1 :
+            this.suggestions.length - 1;
+        }
+
+        if (event.which === KEY_TAB) {
+          event.preventDefault();
+
+          let activeSuggestion = this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0];
+          if (activeSuggestion) {
+            let input = this.value.substring(0, this.selectionStart);
+            this.value = input + activeSuggestion;
+          }
+        }
+      }
+    },
+
+    computed: {
+      /**
+       * Gets the suggestions list to be displayed under the input box.
+       *
+       * @returns {default.props.source|{type, required}}
+       */
+      suggestions() {
+        let input = this.value.substring(0, this.selectionStart);
+
+        return this.source.filter((entry) => {
+            return entry.toLowerCase().startsWith(input.toLowerCase()) &&
+              input.toLowerCase() !== entry.toLowerCase();
+          })
+          // Cut off the part that's already been typed.
+          .map((entry) => entry.substring(this.selectionStart))
+          // We only want the top 3 suggestions.
+          .slice(0, 3);
+      }
+    },
+
+    mounted() {
+      this.updateSuggestions({
+        target: this.$refs.acInput
+      });
+    }
   }
+
 </script>
diff --git a/nuxt.config.js b/nuxt.config.js
index b4f46aaf6..059b1c493 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -51,7 +51,7 @@ export default {
 
       // Windows phone tile icon
       { name: 'msapplication-TileImage', content: `${routerBase.router.base}icons/icon-144x144.png` },
-      { name: 'msapplication-TileColor', content: '#121212' },
+      { name: 'msapplication-TileColor', content: '#282a36' },
       { name: 'msapplication-tap-highlight', content: 'no' },
 
       // OpenGraph
@@ -119,8 +119,8 @@ export default {
         description: meta.shortDescription,
 
         display: "standalone",
-        theme_color: "#121212",
-        background_color: "#121212",
+        theme_color: "#282a36",
+        background_color: "#282a36",
 
         icons: ((sizes) => {
           let icons = [];
diff --git a/pages/index.vue b/pages/index.vue
index 7a90bf5a0..f5f6feadc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <pw-section class="blue" label="Request" ref="request">
+    <pw-section class="cyan" label="Request" ref="request">
       <ul>
         <li>
           <label for="method">Method</label>
@@ -48,7 +48,7 @@
         </li>
       </ul>
     </pw-section>
-    <pw-section class="blue-dark" label="Request Code" ref="requestCode" v-if="!isHidden">
+    <pw-section class="blue" label="Request Code" ref="requestCode" v-if="!isHidden">
       <ul>
         <li>
           <label for="requestType">Request Type</label>
@@ -76,7 +76,7 @@
         </li>
       </ul>
     </pw-section>
-    <pw-section class="blue-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'">
+    <pw-section class="blue" label="Request Body" v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'">
       <ul>
         <li>
           <autocomplete :source="validContentTypes" :spellcheck="false" v-model="contentType">Content Type
@@ -212,7 +212,7 @@
         </li>
       </ul>
     </pw-section>
-    <pw-section class="cyan" collapsed label="Parameters">
+    <pw-section class="pink" collapsed label="Parameters">
       <ol v-for="(param, index) in params">
         <li>
           <label :for="'param'+index">Key {{index + 1}}</label>
diff --git a/pages/settings.vue b/pages/settings.vue
index e16dce280..625b3f0ca 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="page">
-		<pw-section class="blue" label="Theme">
+		<pw-section class="cyan" label="Theme">
 			<ul>
 				<li>
 					<h3 class="title">Background</h3>
@@ -77,12 +77,12 @@
                 //        You should copy the existing light theme as a template and then just
                 //        set the relevant values.
                 themes: [{
-                    "color": "#121212",
+                    "color": "#282a36",
                     "name": "Dark (Default)",
                     "class": ""
                 },
                     {
-                        "color": "#DFDFDF",
+                        "color": "#F6F8FA",
                         "name": "Light",
                         "vibrant": true,
                         "class": "light"
@@ -92,34 +92,44 @@
                 colors: [
                     // If the color is vibrant, black is used as the active foreground color.
                     {
-                        "color": "#51ff0d",
-                        "name": "Lime (Default)",
+                        "color": "#50fa7b",
+                        "name": "Green (Default)",
                         "vibrant": true
                     },
                     {
-                        "color": "#FFC107",
+                        "color": "#f1fa8c",
                         "name": "Yellow",
                         "vibrant": true
                     },
                     {
-                        "color": "#E91E63",
+                        "color": "#ff79c6",
                         "name": "Pink",
-                        "vibrant": false
+                        "vibrant": true
                     },
                     {
-                        "color": "#e74c3c",
+                        "color": "#ff5555",
                         "name": "Red",
                         "vibrant": false
                     },
                     {
-                        "color": "#9b59b6",
+                        "color": "#bd93f9",
                         "name": "Purple",
-                        "vibrant": false
+                        "vibrant": true
                     },
                     {
-                        "color": "#2980b9",
+                        "color": "#ffb86c",
+                        "name": "Orange",
+                        "vibrant": true
+                    },
+                    {
+                        "color": "#8be9fd",
+                        "name": "Cyan",
+                        "vibrant": true
+                    },
+                    {
+                        "color": "#57b5f9",
                         "name": "Blue",
-                        "vibrant": false
+                        "vibrant": true
                     },
                 ],
 
@@ -162,7 +172,7 @@
                 // By default, the color is vibrant.
                 if (vibrant == null) vibrant = true;
                 document.documentElement.style.setProperty('--ac-color', color);
-                document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff');
+                document.documentElement.style.setProperty('--act-color', vibrant ? '#282a36' : '#f8f8f2');
                 this.applySetting('THEME_COLOR', color.toUpperCase());
                 this.applySetting('THEME_COLOR_VIBRANT', vibrant);
             },
diff --git a/pages/websocket.vue b/pages/websocket.vue
index eb731ac24..775b69458 100644
--- a/pages/websocket.vue
+++ b/pages/websocket.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <pw-section class="blue" label="Request" ref="request">
+    <pw-section class="cyan" label="Request" ref="request">
       <ul>
         <li>
           <label for="url">URL</label>
@@ -104,7 +104,7 @@
         this.communication.log = [{
           payload: `Connecting to ${this.url}...`,
           source: 'info',
-          color: 'lime'
+          color: 'var(--ac-color)'
         }];
         try {
           this.socket = new WebSocket(this.url);
@@ -113,7 +113,7 @@
             this.communication.log = [{
               payload: `Connected to ${this.url}.`,
               source: 'info',
-              color: 'lime',
+              color: 'var(--ac-color)',
               ts: (new Date()).toLocaleTimeString()
             }];
           };
@@ -125,7 +125,7 @@
             this.communication.log.push({
               payload: `Disconnected from ${this.url}.`,
               source: 'info',
-              color: 'red',
+              color: '#ff5555',
               ts: (new Date()).toLocaleTimeString()
             });
           };