From 2fb5aa2becd7f8d4fe3fbcf919a8f636a5e43b75 Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Mon, 10 Oct 2022 10:13:21 +0100
Subject: [PATCH] Move theme handling away from mixin.

---
 src/App.vue | 19 +++++++++++++++++++
 src/main.js | 14 --------------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9e9d889d..f324e374 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,12 +15,31 @@
 <script>
 import NavBar from "./components/NavBar.vue";
 import FooterComponent from "./components/FooterComponent.vue";
+
+const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
+
 export default {
     components: {
         NavBar,
         FooterComponent,
     },
+    data() {
+        return {
+            theme: "dark",
+        };
+    },
+    methods: {
+        setTheme() {
+            let themePref = this.getPreferenceString("theme", "dark");
+            if (themePref == "auto") this.theme = darkModePreference.matches ? "dark" : "light";
+            else this.theme = themePref;
+        },
+    },
     mounted() {
+        this.setTheme();
+        darkModePreference.addEventListener("change", () => {
+            this.setTheme();
+        });
         if (this.getPreferenceBoolean("watchHistory", false))
             if ("indexedDB" in window) {
                 const request = indexedDB.open("piped-db", 1);
diff --git a/src/main.js b/src/main.js
index 5538c39d..9ea9cf48 100644
--- a/src/main.js
+++ b/src/main.js
@@ -64,7 +64,6 @@ import "@unocss/reset/tailwind.css";
 import "uno.css";
 
 const timeAgo = new TimeAgo("en-US");
-const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
 
 import("./registerServiceWorker");
 
@@ -239,14 +238,6 @@ const mixin = {
         },
     },
     computed: {
-        theme() {
-            this.refreshTheme; // forces Vue to recompute the value when the var gets changed
-            let themePref = this.getPreferenceString("theme", "dark");
-            if (themePref == "auto") {
-                return darkModePreference.matches ? "dark" : "light";
-            }
-            return themePref;
-        },
         authenticated(_this) {
             return _this.getAuthToken() !== undefined;
         },
@@ -275,13 +266,8 @@ const mixin = {
         return {
             TimeAgo: TimeAgo,
             TimeAgoConfig: timeAgo,
-            refreshTheme: 0,
         };
     },
-    mounted() {
-        // Forces the app to recompute the theme class
-        darkModePreference.addEventListener("change", () => this.refreshTheme++);
-    },
 };
 
 const i18n = createI18n({