diff --git a/assets/css/themes.scss b/assets/css/themes.scss
index b8f11e888..4428f363c 100644
--- a/assets/css/themes.scss
+++ b/assets/css/themes.scss
@@ -10,8 +10,8 @@
   --bg-dark-color: #44475a;
   // Background color
   --bg-color: #282a36;
-	// Auto-complete color
-	--atc-color: #3C4556;
+  // Auto-complete color
+  --atc-color: #3C4556;
   // Text color
   --fg-color: #f8f8f2;
 
@@ -25,19 +25,19 @@
 }
 
 :root.light {
-  --bg-dark-color: #ffffff;
+  --bg-dark-color: #e1e4eb;
   // Background color
-  --bg-color: #F6F8FA;
-	// Auto-complete color
-	--atc-color: #F1F1F1;
+  --bg-color: #ebeef5;
+  // Auto-complete color
+  --atc-color: #e1e4eb;
   // Text color
-  --fg-color: #121212;
+  --fg-color: #5d5d5f;
 
   // Error color
-  --err-color: invert(#393939, 1);
+  --err-color: invert(#3C4556, 1);
 
   // Active color
-  --ac-color: #50fa7b;
+  --ac-color: #57b5f9;
   // Active text color
-  --act-color: #121212;
+  --act-color: #ebeef5;
 }
diff --git a/pages/settings.vue b/pages/settings.vue
index 625b3f0ca..c5e0d2665 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,37 +1,37 @@
 <template>
-	<div class="page">
-		<pw-section class="cyan" label="Theme">
-			<ul>
-				<li>
-					<h3 class="title">Background</h3>
-					<div class="backgrounds">
+  <div class="page">
+    <pw-section class="cyan" label="Theme">
+      <ul>
+        <li>
+          <h3 class="title">Background</h3>
+          <div class="backgrounds">
             <span :key="theme.class" @click="applyTheme(theme.class)" v-for="theme in themes">
               <swatch :active="settings.THEME_CLASS === theme.class" :class="{ vibrant: theme.vibrant }" :color="theme.color" :name="theme.name"></swatch>
             </span>
-					</div>
-				</li>
-			</ul>
-			<ul>
-				<li>
-					<h3 class="title">Color</h3>
-					<div class="colors">
+          </div>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <h3 class="title">Color</h3>
+          <div class="colors">
             <span :key="entry.color" @click.prevent="setActiveColor(entry.color, entry.vibrant)" v-for="entry in colors">
               <swatch :active="settings.THEME_COLOR === entry.color.toUpperCase()" :class="{ vibrant: entry.vibrant }" :color="entry.color" :name="entry.name" />
             </span>
-					</div>
-				</li>
-			</ul>
-			<ul>
-				<li>
-					<h3 class="title">Frames</h3>
-					<pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
-						Multi-color {{ settings.DISABLE_FRAME_COLORS ? "disabled" : "enabled" }}
-					</pw-toggle>
-				</li>
-			</ul>
-		</pw-section>
+          </div>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <h3 class="title">Frames</h3>
+          <pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
+            Multi-color {{ settings.DISABLE_FRAME_COLORS ? "disabled" : "enabled" }}
+          </pw-toggle>
+        </li>
+      </ul>
+    </pw-section>
 
-		<!--
+    <!--
 		PROXY SETTINGS
 		--------------
 		This feature is currently not finished.
@@ -57,151 +57,151 @@
 			</ul>
 		</pw-section>
 		-->
-	</div>
+  </div>
 </template>
 <script>
-    import section from "../components/section";
-    import swatch from "../components/settings/swatch";
-    import toggle from "../components/toggle";
+  import section from "../components/section";
+  import swatch from "../components/settings/swatch";
+  import toggle from "../components/toggle";
 
-    export default {
-        components: {
-            'pw-section': section,
-            'pw-toggle': toggle,
-            'swatch': swatch
-        },
+  export default {
+    components: {
+      'pw-section': section,
+      'pw-toggle': toggle,
+      'swatch': swatch
+    },
 
-        data() {
-            return {
-                // NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
-                //        You should copy the existing light theme as a template and then just
-                //        set the relevant values.
-                themes: [{
-                    "color": "#282a36",
-                    "name": "Dark (Default)",
-                    "class": ""
-                },
-                    {
-                        "color": "#F6F8FA",
-                        "name": "Light",
-                        "vibrant": true,
-                        "class": "light"
-                    }
-                ],
-                // You can define a new color here! It will simply store the color value.
-                colors: [
-                    // If the color is vibrant, black is used as the active foreground color.
-                    {
-                        "color": "#50fa7b",
-                        "name": "Green (Default)",
-                        "vibrant": true
-                    },
-                    {
-                        "color": "#f1fa8c",
-                        "name": "Yellow",
-                        "vibrant": true
-                    },
-                    {
-                        "color": "#ff79c6",
-                        "name": "Pink",
-                        "vibrant": true
-                    },
-                    {
-                        "color": "#ff5555",
-                        "name": "Red",
-                        "vibrant": false
-                    },
-                    {
-                        "color": "#bd93f9",
-                        "name": "Purple",
-                        "vibrant": true
-                    },
-                    {
-                        "color": "#ffb86c",
-                        "name": "Orange",
-                        "vibrant": true
-                    },
-                    {
-                        "color": "#8be9fd",
-                        "name": "Cyan",
-                        "vibrant": true
-                    },
-                    {
-                        "color": "#57b5f9",
-                        "name": "Blue",
-                        "vibrant": true
-                    },
-                ],
+    data() {
+      return {
+        // NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
+        //        You should copy the existing light theme as a template and then just
+        //        set the relevant values.
+        themes: [{
+            "color": "#282a36",
+            "name": "Dark (Default)",
+            "class": ""
+          },
+          {
+            "color": "#ebeef5",
+            "name": "Light",
+            "vibrant": true,
+            "class": "light"
+          }
+        ],
+        // You can define a new color here! It will simply store the color value.
+        colors: [
+          // If the color is vibrant, black is used as the active foreground color.
+          {
+            "color": "#50fa7b",
+            "name": "Green (Default)",
+            "vibrant": true
+          },
+          {
+            "color": "#f1fa8c",
+            "name": "Yellow",
+            "vibrant": true
+          },
+          {
+            "color": "#ff79c6",
+            "name": "Pink",
+            "vibrant": true
+          },
+          {
+            "color": "#ff5555",
+            "name": "Red",
+            "vibrant": false
+          },
+          {
+            "color": "#bd93f9",
+            "name": "Purple",
+            "vibrant": true
+          },
+          {
+            "color": "#ffb86c",
+            "name": "Orange",
+            "vibrant": true
+          },
+          {
+            "color": "#8be9fd",
+            "name": "Cyan",
+            "vibrant": true
+          },
+          {
+            "color": "#57b5f9",
+            "name": "Blue",
+            "vibrant": false
+          },
+        ],
 
-                settings: {
-                    THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
-                    THEME_COLOR: '',
-                    THEME_COLOR_VIBRANT: true,
+        settings: {
+          THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
+          THEME_COLOR: '',
+          THEME_COLOR_VIBRANT: true,
 
-                    DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false,
-                    PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
-                    PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || '',
-                    PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ''
-                }
-            }
-        },
-
-        watch: {
-            proxySettings: {
-                deep: true,
-                handler (value) {
-                    this.applySetting('PROXY_URL', value.url);
-                    this.applySetting('PROXY_KEY', value.key);
-                }
-            }
-        },
-
-        methods: {
-            applyTheme(name) {
-                this.applySetting('THEME_CLASS', name);
-                document.documentElement.className = name;
-                let imgGitHub = document.getElementById("imgGitHub");
-                imgGitHub.style['filter'] = "";
-                imgGitHub.style['webkit-filter'] = "invert(100%)";
-                if (name.includes("light")){
-                    imgGitHub.style['filter'] = "invert(100%)";
-                    imgGitHub.style['webkit-filter'] = "invert(100%)";
-                }
-            },
-            setActiveColor(color, vibrant) {
-                // 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 ? '#282a36' : '#f8f8f2');
-                this.applySetting('THEME_COLOR', color.toUpperCase());
-                this.applySetting('THEME_COLOR_VIBRANT', vibrant);
-            },
-            getActiveColor() {
-                // This strips extra spaces and # signs from the strings.
-                const strip = (str) => str.replace(/#/g, '').replace(/ /g, '');
-                return `#${strip(window.getComputedStyle(document.documentElement).getPropertyValue('--ac-color')).toUpperCase()}`;
-            },
-            applySetting(key, value) {
-                this.settings[key] = value;
-                this.$store.commit('postwoman/applySetting', [key, value]);
-            },
-            toggleSetting(key) {
-                this.settings[key] = !this.settings[key];
-                this.$store.commit('postwoman/applySetting', [key, this.settings[key]]);
-            }
-        },
-        beforeMount() {
-            this.settings.THEME_COLOR = this.getActiveColor();
-        },
-
-        computed: {
-            proxySettings () {
-                return {
-                    url: this.settings.PROXY_URL,
-                    key: this.settings.PROXY_KEY
-                }
-            }
+          DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false,
+          PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
+          PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || '',
+          PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ''
         }
+      }
+    },
+
+    watch: {
+      proxySettings: {
+        deep: true,
+        handler(value) {
+          this.applySetting('PROXY_URL', value.url);
+          this.applySetting('PROXY_KEY', value.key);
+        }
+      }
+    },
+
+    methods: {
+      applyTheme(name) {
+        this.applySetting('THEME_CLASS', name);
+        document.documentElement.className = name;
+        let imgGitHub = document.getElementById("imgGitHub");
+        imgGitHub.style['filter'] = "";
+        imgGitHub.style['webkit-filter'] = "invert(100%)";
+        if (name.includes("light")) {
+          imgGitHub.style['filter'] = "invert(100%)";
+          imgGitHub.style['webkit-filter'] = "invert(100%)";
+        }
+      },
+      setActiveColor(color, vibrant) {
+        // 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 ? '#282a36' : '#f8f8f2');
+        this.applySetting('THEME_COLOR', color.toUpperCase());
+        this.applySetting('THEME_COLOR_VIBRANT', vibrant);
+      },
+      getActiveColor() {
+        // This strips extra spaces and # signs from the strings.
+        const strip = (str) => str.replace(/#/g, '').replace(/ /g, '');
+        return `#${strip(window.getComputedStyle(document.documentElement).getPropertyValue('--ac-color')).toUpperCase()}`;
+      },
+      applySetting(key, value) {
+        this.settings[key] = value;
+        this.$store.commit('postwoman/applySetting', [key, value]);
+      },
+      toggleSetting(key) {
+        this.settings[key] = !this.settings[key];
+        this.$store.commit('postwoman/applySetting', [key, this.settings[key]]);
+      }
+    },
+    beforeMount() {
+      this.settings.THEME_COLOR = this.getActiveColor();
+    },
+
+    computed: {
+      proxySettings() {
+        return {
+          url: this.settings.PROXY_URL,
+          key: this.settings.PROXY_KEY
+        }
+      }
     }
+  }
 
 </script>