Merge pull request #1537 from Bnyro/auto

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

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);
@@ -108,10 +127,6 @@ b {
     @apply text-black bg-white;
 }
 
-.auto {
-    @apply dark:(text-white bg-dark-900);
-}
-
 .dark {
     @apply text-white bg-dark-900;
 }
@@ -137,12 +152,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 +169,6 @@ hr {
     @apply border-dark-100;
 }
 
-.auto hr {
-    @apply dark:border-dark-100;
-}
-
 h1,
 h2 {
     @apply m-0 font-bold;
@@ -193,18 +198,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 +209,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

@@ -238,9 +238,6 @@ const mixin = {
         },
     },
     computed: {
-        theme() {
-            return this.getPreferenceString("theme", "dark");
-        },
         authenticated(_this) {
             return _this.getAuthToken() !== undefined;
         },