TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add light theme. (#219)

Browse source 
* Add light theme.

* Reload on theme change.
This commit is contained in:
FireMasterK 2021-06-29 01:15:03 +05:30 • committed by GitHub
parent 7c66035f41
commit 18752c7de7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 54 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/App.vue
View file

@ -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;

6
src/components/Navigation.vue
View file

@ -1,11 +1,11 @@
<template>
<nav
class="uk-navbar-container uk-container-expand uk-position-relative uk-light"
style="background: #0b0e0f"
class="uk-navbar-container uk-container-expand uk-position-relative"
: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>

16
src/components/Preferences.vue
View file

@ -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) {

4
src/components/SearchResults.vue
View file

@ -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>

11
src/components/SearchSuggestions.vue
View file

@ -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);

2
src/components/TrendingPage.vue
View file

@ -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"

2
src/components/VideoItem.vue
View file

@ -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"

8
src/components/WatchVideo.vue
View file

@ -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"
>

17
src/main.js
View file

@ -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);