From 9b79a9c8489958a92e8b70f2b8f63343160b1be6 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Tue, 6 Jul 2021 00:03:00 +0530
Subject: [PATCH] Add auto theme option.

---
 src/components/Preferences.vue |  1 +
 src/main.js                    | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Preferences.vue b/src/components/Preferences.vue
index 558e2baa..27f437b5 100644
--- a/src/components/Preferences.vue
+++ b/src/components/Preferences.vue
@@ -34,6 +34,7 @@
     <b>Theme</b>
     <br />
     <select class="uk-select uk-width-auto" v-model="selectedTheme" @change="onChange($event)">
+        <option value="auto">Auto</option>
         <option value="dark">Dark</option>
         <option value="light">Light</option>
     </select>
diff --git a/src/main.js b/src/main.js
index 1ea58aed..2df74d7e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -129,22 +129,29 @@ const mixin = {
         apiUrl() {
             return this.getPreferenceString("instance", "https://pipedapi.kavin.rocks");
         },
+        getEffectiveTheme() {
+            var theme = this.getPreferenceString("theme", "dark");
+            if (theme === "auto")
+                theme =
+                    window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+            return theme;
+        },
     },
     computed: {
         backgroundColor() {
-            return this.getPreferenceString("theme", "dark") === "light" ? "#fff" : "#0b0e0f";
+            return this.getEffectiveTheme() === "light" ? "#fff" : "#0b0e0f";
         },
         secondaryBackgroundColor() {
-            return this.getPreferenceString("theme", "dark") === "light" ? "#e5e5e5" : "#242727";
+            return this.getEffectiveTheme() === "light" ? "#e5e5e5" : "#242727";
         },
         foregroundColor() {
-            return this.getPreferenceString("theme", "dark") === "light" ? "#15191a" : "#0b0e0f";
+            return this.getEffectiveTheme() === "light" ? "#15191a" : "#0b0e0f";
         },
         secondaryForegroundColor() {
-            return this.getPreferenceString("theme", "dark") === "light" ? "#666" : "#393d3d";
+            return this.getEffectiveTheme() === "light" ? "#666" : "#393d3d";
         },
         darkMode() {
-            return this.getPreferenceString("theme", "dark") !== "light";
+            return this.getEffectiveTheme() !== "light";
         },
     },
 };