Add light theme. (#219)

* Add light theme.

* Reload on theme change.

src/App.vue

@@ -1,5 +1,9 @@
 <template>
-    <div class="uk-container uk-container-expand uk-light uk-height-viewport" style="background: #0b0e0f">
+    <div
+        class="uk-container uk-container-expand uk-height-viewport"
+        :style="[{ background: backgroundColor, colour: foregroundColor }]"
+        :class="{ 'uk-light': darkMode }"
+    >
         <Navigation />
         <router-view />
 
@@ -34,10 +38,6 @@ b {
     text-align: start;
 }
 
-#app {
-    background: #0b0e0f;
-}
-
 ::-webkit-scrollbar {
     background-color: #15191a;
     color: #c5bcae;

src/components/Navigation.vue

@@ -1,11 +1,11 @@
 <template>
     <nav
-        class="uk-navbar-container uk-container-expand uk-position-relative uk-light"
+        class="uk-navbar-container uk-container-expand uk-position-relative"
-        style="background: #0b0e0f"
+        :style="[{ background: backgroundColor, colour: foregroundColor }]"
         uk-navbar
     >
         <div class="uk-navbar-left">
-            <router-link class="uk-navbar-item uk-logo uk-text-bold" to="/"
+            <router-link class="uk-navbar-item uk-logo uk-text-bold" :style="[{ colour: foregroundColor }]" to="/"
                 ><img alt="logo" src="/img/icons/logo.svg" height="32" width="32" />iped</router-link
             >
         </div>

src/components/Preferences.vue

@@ -31,6 +31,13 @@
     <br />
     <input class="uk-checkbox" v-model="skipMusicOffTopic" @change="onChange($event)" type="checkbox" />
     <br />
+    <b>Theme</b>
+    <br />
+    <select class="uk-select uk-width-auto" v-model="selectedTheme" @change="onChange($event)">
+        <option value="dark">Dark</option>
+        <option value="light">Light</option>
+    </select>
+    <br />
     <b>Autoplay Video</b>
     <br />
     <input class="uk-checkbox" v-model="autoPlayVideo" @change="onChange($event)" type="checkbox" />
@@ -95,6 +102,7 @@ export default {
             skipInteraction: true,
             skipSelfPromo: true,
             skipMusicOffTopic: true,
+            selectedTheme: "dark",
             autoPlayVideo: true,
             audioOnly: false,
             resolutions: [144, 240, 360, 480, 720, 1080, 1440, 2160, 4320],
@@ -159,6 +167,7 @@ export default {
                 });
             }
 
+            this.selectedTheme = localStorage.getItem("theme") || "dark";
             this.autoPlayVideo =
                 localStorage.getItem("playerAutoPlay") === null || localStorage.getItem("playerAutoPlay") === "true";
             this.audioOnly = localStorage.getItem("audioOnly") === "true";
@@ -169,6 +178,10 @@ export default {
     methods: {
         onChange() {
             if (localStorage) {
+                var shouldReload = false;
+
+                if (localStorage.getItem("playerAutoPlay") !== this.autoPlayVideo) shouldReload = true;
+
                 localStorage.setItem("instance", this.selectedInstance);
                 localStorage.setItem("sponsorblock", this.sponsorBlock);
 
@@ -181,10 +194,13 @@ export default {
                 if (this.skipMusicOffTopic) sponsorSelected.push("music_offtopic");
                 localStorage.setItem("selectedSkip", sponsorSelected);
 
+                localStorage.setItem("theme", this.selectedTheme);
                 localStorage.setItem("playerAutoPlay", this.autoPlayVideo);
                 localStorage.setItem("audioOnly", this.audioOnly);
                 localStorage.setItem("quality", this.defaultQuality);
                 localStorage.setItem("bufferGoal", this.bufferingGoal);
+
+                if (shouldReload) window.location.reload();
             }
         },
         sslScore(url) {

src/components/SearchResults.vue

@@ -20,12 +20,12 @@
 
     <div v-if="results" class="uk-grid-xl" uk-grid="parallax: 0">
         <div
-            style="background: #0b0e0f"
+            :style="[{ background: backgroundColor }]"
             class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
             v-bind:key="result.url"
             v-for="result in results.items"
         >
-            <div class="uk-text-secondary" style="background: #0b0e0f">
+            <div class="uk-text-secondary">
                 <router-link class="uk-text-emphasis" v-bind:to="result.url">
                     <img style="width: 100%" v-bind:src="result.thumbnail" loading="lazy" />
                     <p>

src/components/SearchSuggestions.vue

@@ -1,10 +1,13 @@
 <template>
-    <div class="uk-position-absolute uk-panel uk-box-shadow-large suggestions-container">
+    <div
+        class="uk-position-absolute uk-panel uk-box-shadow-large suggestions-container"
+        :style="[{ background: secondaryBackgroundColor }]"
+    >
         <ul class="uk-list uk-margin-remove uk-text-secondary">
             <li
                 v-for="(suggestion, i) in searchSuggestions"
                 :key="i"
-                :class="{ selected: selected === i }"
+                :style="[selected === i ? { background: secondaryForegroundColor } : {}]"
                 @mouseover="onMouseOver(i)"
                 @mousedown.stop="onClick(i)"
                 class="uk-margin-remove suggestion"
@@ -77,7 +80,6 @@ export default {
 
 <style>
 .suggestions-container {
-    background-color: #242727;
     left: 50%;
     transform: translateX(-50%);
     max-width: 640px;
@@ -88,9 +90,6 @@ export default {
 .suggestion {
     padding: 4px 15px;
 }
-.suggestion.selected {
-    background-color: #393d3d;
-}
 @media screen and (max-width: 959px) {
     .suggestions-container {
         max-width: calc(100% - 60px);

src/components/TrendingPage.vue

@@ -5,7 +5,7 @@
 
     <div class="uk-grid-xl" uk-grid="parallax: 0">
         <div
-            style="background: #0b0e0f"
+            :style="[{ background: backgroundColor }]"
             class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
             v-bind:key="video.url"
             v-for="video in videos"

src/components/VideoItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="uk-text-secondary" style="background: #0b0e0f">
+    <div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
         <router-link class="uk-text-emphasis" v-bind:to="video.url">
             <img
                 :height="height"

src/components/WatchVideo.vue

@@ -11,7 +11,7 @@
                 <a>{{ video.uploader }}</a>
             </router-link>
 
-            <p class="uk-dark">
+            <p :style="[{ colour: foregroundColor }]">
                 <font-awesome-icon icon="thumbs-up"></font-awesome-icon>
                 <b>{{ addCommas(video.likes) }}</b>
                 &nbsp;
@@ -28,7 +28,7 @@
             <a class="uk-button uk-button-small" style="background: #222" @click="showDesc = !showDesc">
                 {{ showDesc ? "+" : "-" }}
             </a>
-            <p v-show="showDesc" class="uk-light" v-html="video.description"></p>
+            <p v-show="showDesc" :style="[{ colour: foregroundColor }]" v-html="video.description"></p>
         </div>
 
         <a v-if="sponsors && sponsors.segments">Sponsors Segments: {{ sponsors.segments.length }}</a>
@@ -44,7 +44,7 @@
             <div class="uk-width-4-5@xl uk-width-3-4@l uk-width-2-3" v-if="comments" ref="comments">
                 <div
                     class="uk-tile-default uk-align-left uk-width-expand"
-                    style="background: #0b0e0f"
+                    :style="[{ background: backgroundColor }]"
                     v-bind:key="comment.commentId"
                     v-for="comment in comments.comments"
                 >
@@ -81,7 +81,7 @@
             <div class="uk-width-1-5@xl uk-width-1-4@l uk-width-1-3" v-if="video">
                 <div
                     class="uk-tile-default uk-width-auto"
-                    style="background: #0b0e0f"
+                    :style="[{ background: backgroundColor }]"
                     v-bind:key="related.url"
                     v-for="related in video.relatedStreams"
                 >

src/main.js

@@ -69,6 +69,23 @@ const mixin = {
             return DOMPurify.sanitize(original);
         }
     },
+    computed: {
+        backgroundColor() {
+            return localStorage.getItem("theme") === "light" ? "#fff" : "#0b0e0f"
+        },
+        secondaryBackgroundColor() {
+            return localStorage.getItem("theme") === "light" ? "#e5e5e5" : "#242727"
+        },
+        foregroundColor() {
+            return localStorage.getItem("theme") === "light" ? "#15191a" : "#0b0e0f"
+        },
+        secondaryForegroundColor() {
+            return localStorage.getItem("theme") === "light" ? "#666" : "#393d3d"
+        },
+        darkMode() {
+            return localStorage.getItem('theme') !== 'light'
+        }
+    }
 };
 
 const app = createApp(App);