From 77010ccac429dd1ea59de1dc63c416de1d6b18e6 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Tue, 28 Dec 2021 00:04:20 +0000
Subject: [PATCH] Improve theming, and make auto theme work with media query.

---
 src/App.vue                          | 44 ++++++++++++++++++++++++----
 src/components/Navigation.vue        |  2 --
 src/components/SearchResults.vue     |  2 +-
 src/components/SearchSuggestions.vue | 26 ++++++++++++++--
 src/components/VideoItem.vue         |  8 ++---
 src/main.js                          | 24 +--------------
 6 files changed, 67 insertions(+), 39 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 52740579..09e509ed 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index abc899d7..e2326f96 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -117,5 +117,3 @@ export default {
     },
 };
 </script>
-
-<style></style>
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 27fd0aee..38261a5b 100644
--- a/src/components/SearchResults.vue
+++ b/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>
diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue
index 49e30871..9c368f06 100644
--- a/src/components/SearchSuggestions.vue
+++ b/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 {
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index a2a55fcd..66dfeab8 100644
--- a/src/components/VideoItem.vue
+++ b/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"
                 >
diff --git a/src/main.js b/src/main.js
index 5ba11dd6..35b466ba 100644
--- a/src/main.js
+++ b/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();
-        },
-        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";
+            return this.getPreferenceString("theme", "dark");
         },
         authenticated(_this) {
             return _this.getAuthToken() !== undefined;