💄 Minor stylings

assets/css/themes.scss

@@ -1,18 +1,82 @@
 /**
   Main Themes:
 
-  - auto
   - dark (default)
   - light
   - black
+  - auto
  */
 
+// Dark is the default theme variant.
+:root {
+  // Dark Background color
+  --bg-dark-color: rgb(41, 42, 45);
+  // Background color
+  --bg-color: rgb(37, 38, 40);
+  // Auto-complete color
+  --atc-color: rgb(49, 49, 55);
+  // Text color
+  --fg-color: rgb(247, 248, 248);
+  // Light Text color
+  --fg-light-color: rgb(150, 155, 160);
+  // Border color
+  --brd-color: rgb(48, 47, 55);
+  // Error color
+  --err-color: rgb(41, 42, 45);
+  // Acent color
+  --ac-color: #50fa7b;
+  // Active text color
+  --act-color: rgb(37, 38, 40);
+}
+
+:root.light {
+  // Dark Background color
+  --bg-dark-color: #e8f0fe;
+  // Background color
+  --bg-color: #ffffff;
+  // Auto-complete color
+  --atc-color: #ebebeb;
+  // Text color
+  --fg-color: #525252;
+  // Light Text color
+  --fg-light-color: rgb(150, 155, 160);
+  // Border color
+  --brd-color: #f2f2f2;
+  // Error color
+  --err-color: invert(#303341, 1);
+  // Acent color
+  --ac-color: #57b5f9;
+  // Active text color
+  --act-color: #ffffff;
+}
+
+:root.black {
+  // Dark Background color
+  --bg-dark-color: rgb(23, 24, 26);
+  // Background color
+  --bg-color: #000000;
+  // Auto-complete color
+  --atc-color: rgb(49, 49, 55);
+  // Text color
+  --fg-color: rgb(247, 248, 248);
+  // Light Text color
+  --fg-light-color: rgb(150, 155, 160);
+  // Border color
+  --brd-color: rgb(48, 47, 55);
+  // Error color
+  --err-color: rgb(41, 42, 45);
+  // Acent color
+  --ac-color: #50fa7b;
+  // Active text color
+  --act-color: rgb(37, 38, 40);
+}
+
 @media(prefers-color-scheme: light) {
   :root.auto {
     // Dark Background color
     --bg-dark-color: #e8f0fe;
     // Background color
-    --bg-color: #fff;
+    --bg-color: #ffffff;
     // Auto-complete color
     --atc-color: #ebebeb;
     // Text color
@@ -52,67 +116,3 @@
     --act-color: rgb(37, 38, 40);
   }
 }
-
-// Dark is the default theme variant.
-:root {
-  // Dark Background color
-  --bg-dark-color: rgb(41, 42, 45);
-  // Background color
-  --bg-color: rgb(37, 38, 40);
-  // Auto-complete color
-  --atc-color: rgb(49, 49, 55);
-  // Text color
-  --fg-color: rgb(247, 248, 248);
-  // Light Text color
-  --fg-light-color: rgb(150, 155, 160);
-  // Border color
-  --brd-color: rgb(48, 47, 55);
-  // Error color
-  --err-color: rgb(41, 42, 45);
-  // Acent color
-  --ac-color: #50fa7b;
-  // Active text color
-  --act-color: rgb(37, 38, 40);
-}
-
-:root.black {
-  // Dark Background color
-  --bg-dark-color: rgb(23, 24, 26);
-  // Background color
-  --bg-color: #000;
-  // Auto-complete color
-  --atc-color: rgb(49, 49, 55);
-  // Text color
-  --fg-color: rgb(247, 248, 248);
-  // Light Text color
-  --fg-light-color: rgb(150, 155, 160);
-  // Border color
-  --brd-color: rgb(48, 47, 55);
-  // Error color
-  --err-color: rgb(41, 42, 45);
-  // Acent color
-  --ac-color: #50fa7b;
-  // Active text color
-  --act-color: rgb(37, 38, 40);
-}
-
-:root.light {
-  // Dark Background color
-  --bg-dark-color: #e8f0fe;
-  // Background color
-  --bg-color: #fff;
-  // Auto-complete color
-  --atc-color: #ebebeb;
-  // Text color
-  --fg-color: #525252;
-  // Light Text color
-  --fg-light-color: rgb(150, 155, 160);
-  // Border color
-  --brd-color: #f2f2f2;
-  // Error color
-  --err-color: invert(#303341, 1);
-  // Acent color
-  --ac-color: #57b5f9;
-  // Active text color
-  --act-color: #fff;
-}

components/autocomplete.vue

@@ -1,32 +1,30 @@
 <template>
   <div class="autocomplete-wrapper">
-    <label>
+    <input
-      <input
+      type="text"
-        type="text"
+      :placeholder="placeholder"
-        :placeholder="placeholder"
+      v-model="value"
-        v-model="value"
+      @input="updateSuggestions"
-        @input="updateSuggestions"
+      @keyup="updateSuggestions"
-        @keyup="updateSuggestions"
+      @click="updateSuggestions"
-        @click="updateSuggestions"
+      @keydown="handleKeystroke"
-        @keydown="handleKeystroke"
+      ref="acInput"
-        ref="acInput"
+      :spellcheck="spellcheck"
-        :spellcheck="spellcheck"
+      :autocapitalize="spellcheck"
-        :autocapitalize="spellcheck"
+      :autocorrect="spellcheck"
-        :autocorrect="spellcheck"
+    />
-      />
+    <ul
-      <ul
+      class="suggestions"
-        class="suggestions"
+      v-if="suggestions.length > 0 && suggestionsVisible"
-        v-if="suggestions.length > 0 && suggestionsVisible"
+      :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }"
-        :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }"
+    >
-      >
+      <li
-        <li
+        v-for="(suggestion, index) in suggestions"
-          v-for="(suggestion, index) in suggestions"
+        @click.prevent="forceSuggestion(suggestion)"
-          @click.prevent="forceSuggestion(suggestion)"
+        :class="{ active: currentSuggestionIndex === index }"
-          :class="{ active: currentSuggestionIndex === index }"
+        :key="index"
-          :key="index"
+      >{{ suggestion }}</li>
-        >{{ suggestion }}</li>
+    </ul>
-      </ul>
-    </label>
   </div>
 </template>
 
@@ -43,7 +41,7 @@
     display: none;
     background-color: var(--atc-color);
     position: absolute;
-    top: 90%;
+    top: calc(100% - 4px);
     margin: 0 4px;
     left: 0;
     padding: 0;
@@ -55,7 +53,6 @@
       width: 100%;
       display: block;
       padding: 8px 16px;
-      font-weight: 700;
       font-size: 18px;
       font-family: monospace;
       white-space: pre-wrap;

components/settings/swatch.vue

@@ -37,7 +37,7 @@
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
-          color: #fff;
+          color: #ffffff;
       }
     }
   }

layouts/default.vue

@@ -174,7 +174,7 @@
         let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT;
         if (vibrant == null) vibrant = true;
         document.documentElement.style.setProperty('--ac-color', color);
-        document.documentElement.style.setProperty('--act-color', vibrant ? 'rgb(37, 38, 40)' : '#fff');
+        document.documentElement.style.setProperty('--act-color', vibrant ? 'rgb(37, 38, 40)' : '#ffffff');
       })();
     },
 

pages/settings.vue

@@ -79,15 +79,9 @@
         //        You should copy the existing light theme as a template and then just
         //        set the relevant values.
         themes: [
-          {
-            "color": "",
-            "name": "Auto",
-            "vibrant": window.matchMedia('(prefers-color-scheme: light)').matches,
-            "class": "auto"
-          },
           {
             "color": "rgb(37, 38, 40)",
-            "name": "Dark (default)",
+            "name": "Dark",
             "class": ""
           },
           {
@@ -98,8 +92,14 @@
           },
           {
             "color": "#000",
-            name: "Black",
+            "name": "Black",
             "class": "black"
+          },
+          {
+            "color": "var(--bg-color)",
+            "name": "Auto (system)",
+            "vibrant": window.matchMedia('(prefers-color-scheme: light)').matches,
+            "class": "auto"
           }
         ],
         // You can define a new color here! It will simply store the color value.
@@ -107,7 +107,7 @@
           // If the color is vibrant, black is used as the active foreground color.
           {
             "color": "#50fa7b",
-            "name": "Green (default)",
+            "name": "Green",
             "vibrant": true
           },
           {