Added auto theme

assets/css/themes.scss

@@ -1,11 +1,58 @@
 /**
   Main Themes:
 
+  - auto
   - dark (default)
   - light
   - black
  */
 
+@media(prefers-color-scheme: light) {
+  :root.auto {
+    // 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;
+  }
+}
+
+@media(prefers-color-scheme: dark) {
+  :root.auto {
+    // 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);
+  }
+}
+
 // Dark is the default theme variant.
 :root {
   // Dark Background color

pages/settings.vue

@@ -78,7 +78,14 @@
         // 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: [{
+        themes: [
+          {
+            "color": "",
+            "name": "Auto",
+            "vibrant": window.matchMedia('(prefers-color-scheme: light)').matches,
+            "class": "auto"
+          },
+          {
             "color": "rgb(37, 38, 40)",
             "name": "Dark (default)",
             "class": ""