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

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">
-        <router-link class="uk-text-emphasis" :to="video.url">
+    <div>
+        <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"
                 >