better handling of the auto theme to prevent further bugs with it

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>

src/components/FooterComponent.vue

@@ -52,7 +52,4 @@ footer {
 .dark footer {
     @apply bg-dark-800;
 }
-.auto footer {
-    @apply dark:(bg-dark-800);
-}
 </style>

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

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