From 43e69ff284cefc49bc0c631cc254d8a78ae749ed Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Mon, 27 Dec 2021 14:46:34 +0000
Subject: [PATCH] Implement theming in a better manner.

---
 public/index.html                |  2 +-
 src/App.vue                      | 12 ++++++++++--
 src/components/Comment.vue       |  1 -
 src/components/FeedPage.vue      |  2 +-
 src/components/HistoryPage.vue   |  2 +-
 src/components/Navigation.vue    |  5 +----
 src/components/SearchResults.vue |  2 +-
 src/components/TrendingPage.vue  |  2 +-
 src/components/WatchVideo.vue    |  8 +-------
 9 files changed, 17 insertions(+), 19 deletions(-)
diff --git a/public/index.html b/public/index.html
index 48498aed..54531da6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html style="background: #0b0e0f" lang="en">
+<html style="background: #0F0F0F" lang="en">
     <head>
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
diff --git a/src/App.vue b/src/App.vue
index b0794622..2ed96e39 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full" :style="[{ background: backgroundColor, colour: foregroundColor }]" :class="{ dark: darkMode }">
+    <div class="w-full min-h-screen h-full" :class="{ dark: darkMode, reset: !darkMode }">
         <Navigation />
         <router-view v-slot="{ Component }">
             <keep-alive :max="5">
@@ -120,8 +120,12 @@ b {
     @apply py-2 px-4 rounded;
 }
 
+.reset {
+    @apply text-black bg-white;
+}
+
 .dark {
-    @apply text-white bg-dark-800 bg-opacity-70;
+    @apply text-white bg-dark-900;
 }
 
 .dark .input,
@@ -147,6 +151,10 @@ hr {
 }
 
 .link {
+    @apply hover:(text-dark-300 underline underline-dark-300);
+}
+
+.dark .link {
     @apply hover:(text-gray-300 underline underline-gray-300);
 }
 </style>
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index e08c652a..59fcdfcd 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -54,7 +54,6 @@
                     v-for="reply in replies"
                     :key="reply.commentId"
                     class="uk-tile-default uk-align-left uk-width-expand"
-                    :style="[{ background: backgroundColor }]"
                 >
                     <Comment :comment="reply" :uploader="uploader" :video-id="videoId" />
                 </div>
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 94b9def3..b304bdc0 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -22,7 +22,7 @@
     <hr />
 
     <div class="video-grid">
-        <div v-for="video in videos" :key="video.url" :style="[{ background: backgroundColor }]">
+        <div v-for="video in videos" :key="video.url">
             <VideoItem :video="video" />
         </div>
     </div>
diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
index 2964b1a6..dea9260d 100644
--- a/src/components/HistoryPage.vue
+++ b/src/components/HistoryPage.vue
@@ -18,7 +18,7 @@
     <hr />
 
     <div class="video-grid">
-        <div v-for="video in videos" :key="video.url" :style="[{ background: backgroundColor }]">
+        <div v-for="video in videos" :key="video.url">
             <VideoItem :video="video" />
         </div>
     </div>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 479bcef1..53cd484d 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -1,10 +1,7 @@
 <template>
     <nav class="grid grid-cols-3 px-2 sm:px-4 py-2.5 w-full relative">
         <div>
-            <router-link
-                class="flex font-bold text-3xl items-center font-sans font-bold"
-                :style="[{ colour: foregroundColor }]"
-                to="/"
+            <router-link class="flex font-bold text-3xl items-center font-sans font-bold" to="/"
                 ><img
                     alt="logo"
                     src="/img/icons/logo.svg"
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 02387cb4..50ce89d7 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -31,7 +31,7 @@
     </div>
 
     <div v-if="results" class="video-grid">
-        <div v-for="result in results.items" :key="result.url" :style="[{ background: backgroundColor }]">
+        <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">
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index f54236f3..217e6f6b 100644
--- a/src/components/TrendingPage.vue
+++ b/src/components/TrendingPage.vue
@@ -4,7 +4,7 @@
     <hr />
 
     <div class="video-grid">
-        <div v-for="video in videos" :key="video.url" :style="[{ background: backgroundColor }]">
+        <div v-for="video in videos" :key="video.url">
             <VideoItem :video="video" height="118" width="210" />
         </div>
     </div>
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index e3799039..24b84c11 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -85,12 +85,7 @@
                 {{ showDesc ? $t("actions.minimize_description") : $t("actions.show_description") }}
             </button>
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <p
-                v-show="showDesc"
-                class="break-words"
-                :style="[{ colour: foregroundColor }]"
-                v-html="purifyHTML(video.description)"
-            ></p>
+            <p v-show="showDesc" class="break-words" v-html="purifyHTML(video.description)"></p>
             <div v-if="showDesc && sponsors && sponsors.segments">
                 {{ $t("video.sponsor_segments") }}: {{ sponsors.segments.length }}
             </div>
@@ -142,7 +137,6 @@
                     v-show="showRecs || !smallView"
                     :key="related.url"
                     class="uk-tile-default w-auto"
-                    :style="[{ background: backgroundColor }]"
                 >
                     <VideoItem :video="related" height="94" width="168" />
                 </div>
