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] 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,
         };
     },
 };