From 2f16882c1b75535378b6926355a938c505e10811 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Fri, 4 Oct 2019 19:38:20 -0400
Subject: [PATCH] Added auto theme

---
 assets/css/themes.scss | 47 ++++++++++++++++++++++++++++++++++++++++++
 pages/settings.vue     |  9 +++++++-
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/assets/css/themes.scss b/assets/css/themes.scss
index a9b9d60ed..b0e19e716 100644
--- a/assets/css/themes.scss
+++ b/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
diff --git a/pages/settings.vue b/pages/settings.vue
index d0904d6f5..018fde571 100644
--- a/pages/settings.vue
+++ b/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": ""