From c7595049bd6bb6a928b9d06b043049c0bc67cb02 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Thu, 6 Oct 2022 19:58:31 +0200
Subject: [PATCH 1/3] better handling of the auto theme to prevent further bugs
 with it

---
 src/App.vue                          | 26 --------------------------
 src/components/FooterComponent.vue   |  3 ---
 src/components/SearchSuggestions.vue |  8 --------
 src/main.js                          |  8 ++++++++
 4 files changed, 8 insertions(+), 37 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f3e7bb92..9e9d889d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -108,10 +108,6 @@ b {
     @apply text-black bg-white;
 }
 
-.auto {
-    @apply dark:(text-white bg-dark-900);
-}
-
 .dark {
     @apply text-white bg-dark-900;
 }
@@ -137,12 +133,6 @@ b {
     @apply text-gray-400 bg-dark-400;
 }
 
-.auto .input,
-.auto .select,
-.auto .btn {
-    @apply dark:(text-gray-400 bg-dark-400);
-}
-
 .input {
     @apply pl-2.5;
 }
@@ -160,10 +150,6 @@ hr {
     @apply border-dark-100;
 }
 
-.auto hr {
-    @apply dark:border-dark-100;
-}
-
 h1,
 h2 {
     @apply m-0 font-bold;
@@ -193,18 +179,10 @@ h2 {
     @apply hover:(text-gray-300 underline underline-gray-300);
 }
 
-.auto .link {
-    @apply dark:hover:(text-gray-300 underline underline-gray-300);
-}
-
 .dark .link-secondary {
     @apply text-gray-300 hover:(text-gray-400 underline underline-gray-400);
 }
 
-.auto .link-secondary {
-    @apply dark:(text-gray-300 hover:(text-gray-400 underline underline-gray-400));
-}
-
 .line {
     @apply px-2.5 py-0.25 my-0.45 rounded-xl bg-dark-900;
 }
@@ -212,8 +190,4 @@ h2 {
 .dark .line {
     @apply bg-white;
 }
-
-.auto .line {
-    @apply dark:(bg-white);
-}
 </style>
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
index b65bc79e..1381c495 100644
--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -52,7 +52,4 @@ footer {
 .dark footer {
     @apply bg-dark-800;
 }
-.auto footer {
-    @apply dark:(bg-dark-800);
-}
 </style>
diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue
index 2b5f9d80..794085db 100644
--- a/src/components/SearchSuggestions.vue
+++ b/src/components/SearchSuggestions.vue
@@ -89,10 +89,6 @@ export default {
     @apply bg-dark-400;
 }
 
-.auto .suggestions-container {
-    @apply dark:bg-dark-400;
-}
-
 .suggestion-selected {
     @apply bg-gray-200;
 }
@@ -101,10 +97,6 @@ export default {
     @apply bg-dark-100;
 }
 
-.auto .suggestion-selected {
-    @apply dark:bg-dark-100;
-}
-
 .suggestion {
     @apply p-y-1;
 }
diff --git a/src/main.js b/src/main.js
index c7437bbf..d4325921 100644
--- a/src/main.js
+++ b/src/main.js
@@ -239,6 +239,13 @@ const mixin = {
     },
     computed: {
         theme() {
+            this.refreshTheme; // forces Vue to recompute the value when the var gets changed
+            if (this.getPreferenceString("theme", "dark") == "auto") {
+                const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
+                // Forces the app to recompute the theme class
+                darkModePreference.addEventListener("change", () => this.refreshTheme++);
+                return darkModePreference.matches ? "dark" : "light";
+            }
             return this.getPreferenceString("theme", "dark");
         },
         authenticated(_this) {
@@ -269,6 +276,7 @@ const mixin = {
         return {
             TimeAgo: TimeAgo,
             TimeAgoConfig: timeAgo,
+            refreshTheme: 0,
         };
     },
 };

From 9621c346c0b1d242da13346c92105820cb0b861f Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Thu, 6 Oct 2022 21:20:35 +0200
Subject: [PATCH 2/3] fix stacked listeners

---
 src/main.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/main.js b/src/main.js
index d4325921..5538c39d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -64,6 +64,7 @@ import "@unocss/reset/tailwind.css";
 import "uno.css";
 
 const timeAgo = new TimeAgo("en-US");
+const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
 
 import("./registerServiceWorker");
 
@@ -240,13 +241,11 @@ const mixin = {
     computed: {
         theme() {
             this.refreshTheme; // forces Vue to recompute the value when the var gets changed
-            if (this.getPreferenceString("theme", "dark") == "auto") {
-                const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
-                // Forces the app to recompute the theme class
-                darkModePreference.addEventListener("change", () => this.refreshTheme++);
+            let themePref = this.getPreferenceString("theme", "dark");
+            if (themePref == "auto") {
                 return darkModePreference.matches ? "dark" : "light";
             }
-            return this.getPreferenceString("theme", "dark");
+            return themePref;
         },
         authenticated(_this) {
             return _this.getAuthToken() !== undefined;
@@ -279,6 +278,10 @@ const mixin = {
             refreshTheme: 0,
         };
     },
+    mounted() {
+        // Forces the app to recompute the theme class
+        darkModePreference.addEventListener("change", () => this.refreshTheme++);
+    },
 };
 
 const i18n = createI18n({

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 3/3] 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({