Improve theming, and make auto theme work with media query.

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full min-h-screen h-full px-1vw reset" :class="{ dark: darkMode }">
+    <div class="w-full min-h-screen h-full px-1vw reset" :class="[theme]">
         <Navigation />
         <router-view v-slot="{ Component }">
             <keep-alive :max="5">
@@ -132,33 +132,65 @@ b {
     @apply text-white bg-dark-900;
 }
 
+.input,
+.select,
+.btn {
+    @apply w-auto h-full text-gray-600 bg-gray-300;
+}
+
 .dark .input,
 .dark .select,
 .dark .btn {
-    @apply text-gray-400 bg-dark-400 w-auto h-full;
+    @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;
 }
 
+hr {
+    @apply !mt-2 !mb-3 border-gray-300;
+}
+
 .dark hr {
     @apply border-dark-100;
 }
 
+.auto hr {
+    @apply dark:border-dark-100;
+}
+
 h1 {
     @apply m-0 !text-5xl font-bold;
 }
 
-hr {
-    @apply !mt-2 !mb-3;
-}
-
 .link {
     @apply hover:(text-dark-300 underline underline-dark-300);
 }
 
+.link-secondary {
+    @apply hover:(text-dark-400 underline underline-dark-400);
+}
+
 .dark .link {
     @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));
+}
 </style>

src/components/Navigation.vue

@@ -117,5 +117,3 @@ export default {
     },
 };
 </script>
-
-<style></style>

src/components/SearchResults.vue

@@ -34,7 +34,7 @@
         <div v-for="result in results.items" :key="result.url">
             <VideoItem v-if="shouldUseVideoItem(result)" :video="result" height="94" width="168" />
             <div v-if="!shouldUseVideoItem(result)" class="uk-text-secondary">
-                <router-link class="uk-text-emphasis" :to="result.url">
+                <router-link :to="result.url">
                     <div class="relative">
                         <img style="width: 100%" :src="result.thumbnail" loading="lazy" />
                     </div>

src/components/SearchSuggestions.vue

@@ -1,11 +1,11 @@
 <template>
-    <div class="absolute suggestions-container" :style="[{ background: secondaryBackgroundColor }]">
+    <div class="absolute suggestions-container">
         <ul>
             <li
                 v-for="(suggestion, i) in searchSuggestions"
                 :key="i"
-                :style="[selected === i ? { background: secondaryForegroundColor } : {}]"
                 class="suggestion"
+                :class="{ 'suggestion-selected': selected === i }"
                 @mouseover="onMouseOver(i)"
                 @mousedown.stop="onClick(i)"
             >
@@ -76,7 +76,27 @@ export default {
 
 <style>
 .suggestions-container {
-    @apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border p-y-1.25 z-10 <md:max-w-[calc(100%-0.5rem)];
+    @apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border p-y-1.25 z-10 <md:max-w-[calc(100%-0.5rem)] bg-gray-300;
+}
+
+.dark .suggestions-container {
+    @apply bg-dark-400;
+}
+
+.auto .suggestions-container {
+    @apply dark:bg-dark-400;
+}
+
+.suggestion-selected {
+    @apply bg-gray-200;
+}
+
+.dark .suggestion-selected {
+    @apply bg-dark-100;
+}
+
+.auto .suggestion-selected {
+    @apply dark:bg-dark-100;
 }
 
 .suggestion {

src/components/VideoItem.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="uk-text-secondary">
+    <div>
-        <router-link class="uk-text-emphasis" :to="video.url">
+        <router-link :to="video.url">
             <img :height="height" :width="width" class="w-full" :src="video.thumbnail" alt="" loading="lazy" />
             <div class="relative text-sm">
                 <span v-if="video.duration" class="thumbnail-overlay bottom-5px right-5px" style="padding: 0 5px">{{
@@ -37,7 +37,7 @@
         </div>
 
         <div class="flex" style="flex-flow: row">
-            <router-link class="uk-link-muted" :to="video.uploaderUrl">
+            <router-link :to="video.uploaderUrl">
                 <img
                     v-if="video.uploaderAvatar"
                     :src="video.uploaderAvatar"
@@ -52,7 +52,7 @@
             <div class="w-[calc(100%-32px-1rem)]">
                 <router-link
                     v-if="video.uploaderUrl && video.uploaderName && !hideChannel"
-                    class="uk-link-muted overflow-hidden block"
+                    class="link-secondary overflow-hidden block"
                     :to="video.uploaderUrl"
                     :title="video.uploaderName"
                 >

src/main.js

@@ -148,13 +148,6 @@ const mixin = {
         apiUrl() {
             return this.getPreferenceString("instance", "https://pipedapi.kavin.rocks");
         },
-        getEffectiveTheme() {
-            var theme = this.getPreferenceString("theme", "dark");
-            if (theme === "auto")
-                theme =
-                    window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-            return theme;
-        },
         getAuthToken() {
             return this.getPreferenceString("authToken" + this.hashCode(this.apiUrl()));
         },
@@ -191,22 +184,7 @@ const mixin = {
     },
     computed: {
         theme() {
-            return this.getEffectiveTheme();
+            return this.getPreferenceString("theme", "dark");
-        },
-        backgroundColor() {
-            return this.getEffectiveTheme() === "light" ? "#fff" : "#0b0e0f";
-        },
-        secondaryBackgroundColor() {
-            return this.getEffectiveTheme() === "light" ? "#e5e5e5" : "#242727";
-        },
-        foregroundColor() {
-            return this.getEffectiveTheme() === "light" ? "#15191a" : "#0b0e0f";
-        },
-        secondaryForegroundColor() {
-            return this.getEffectiveTheme() === "light" ? "#666" : "#393d3d";
-        },
-        darkMode() {
-            return this.getEffectiveTheme() !== "light";
         },
         authenticated(_this) {
             return _this.getAuthToken() !== undefined;