etc
/
VueTube
mirror of https://github.com/VueTubeApp/VueTube
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

theme refactoring finally complete

This commit is contained in:
Nikita Krupin 2022-03-29 22:37:54 -04:00
parent cc155e4f0d
commit e64cfe27c8
4 changed files with 194 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
NUXT/components/bottomNavigation.vue
View File

@ -14,8 +14,20 @@
>
<span v-text="item.name" />
<v-icon
:color="tabSelection == i ? 'primary' : 'grey'"
:class="tabSelection == i ? 'tab primary lighten-1' : ''"
:color="
tabSelection == i
? 'primary'
: $vuetify.theme.dark
? 'background lighten-4'
: 'background darken-4'
"
:class="
tabSelection == i
? $vuetify.theme.dark
? 'tab primary darken-4'
: 'tab primary lighten-4'
: ''
"
v-text="item.icon"
/>
<!--

6
NUXT/components/gridRenderers/gridVideoRenderer.vue
View File

@ -53,7 +53,11 @@
{{ title.text }}
</div>
<div class="grey--text caption" v-text="parseBottom(video)" />
<div
class="background--text text--lighten-5 caption"
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
v-text="parseBottom(video)"
/>
</v-card-text>
</div>
</v-card>

30
NUXT/nuxt.config.js
View File

@ -57,37 +57,15 @@ export default {
dark: true,
options: {
customProperties: true,
// themeCache: {
// get: (key) => localStorage.getItem(key),
// set: (key, value) => localStorage.setItem(key, value),
// },
},
themes: {
light: {
primary: {
base: "#E57373",
lighten1: "#FFAAAA",
lighten2: "#FFCDD2",
},
background: {
base: "#ffffff",
lighten1: "#eee",
lighten2: "#e0e0e0",
lighten4: "#aaaaaa",
},
primary: "#E57373",
background: "#ffffff",
},
dark: {
primary: {
base: "#D32F2F",
lighten1: "#533",
lighten2: "#300",
},
background: {
base: "#181818",
lighten1: "#222",
lighten2: "#282828",
lighten4: "#424242",
},
primary: "#D32F2F",
background: "#181818",
},
},
},

311
NUXT/pages/mods/theme.vue
View File

@ -1,74 +1,24 @@
<template>
<div class="d-flex flex-column justify-end" style="min-height: 100%">
<!-- TODO: replace with a component with dummy video object passed as prop -->
<grid-video-renderer
:video="{
videoId: '3_Rxnb_E_TI',
title: {
runs: [
{
text: 'This is a theme preview',
},
],
},
publishedTimeText: {
runs: [
{
text: '13 months ago',
},
],
},
shortBylineText: {
runs: [
{
text: 'VueTube',
navigationEndpoint: {
clickTrackingParams: 'CIUBEJQ1GAAiEwjQlsXmxOf2AhXDdisKHcBnCcc=',
browseEndpoint: {
browseId: 'UClvgyQvIplPQU8N73vPlFUA',
canonicalBaseUrl: '/c/Ashstudio7HD',
},
},
},
],
},
channelThumbnail: {
thumbnails: [
{
url: 'https://imgs.search.brave.com/z7w4T33dzLGFn3u67ymQTyeWz_jvldkQ7MTQmPDF7s0/rs:fit:540:540:1/g:ce/aHR0cHM6Ly9zMTg2/NzAucGNkbi5jby93/cC1jb250ZW50L3Vw/bG9hZHMvY2F0LXR5/cGluZy5naWY.gif',
width: 69,
height: 69,
},
],
},
shortViewCountText: {
runs: [
{
text: '69M views',
},
],
},
}"
:video="themeExampleVideo"
style="pointer-events: none"
class="px-4"
/>
<!-- <div class="py-1 background lighten-2" /> -->
<v-spacer />
<div class="py-1 background lighten-1" />
<h4 class="mx-8 mt-6 mb-2">Accent Color</h4>
<v-color-picker
v-model="primaryColor"
<!-- <v-color-picker
v-model="$vuetify.theme.currentTheme.primary.base"
style="min-width: 100%"
class="px-8 mt-2 background"
:swatches="$vuetify.theme.dark ? swatchesDark : swatchesLight"
show-swatches
hide-canvas
hide-inputs
@input="(value) => primarySwitch(value)"
>
</v-color-picker>
</v-color-picker> -->
<!-- <v-color-picker
v-model="primaryColor"
style="min-width: 100%"
@ -80,98 +30,121 @@
>
</v-color-picker> -->
<div class="py-1 mt-4 background lighten-1" />
<div
class="py-1 mt-4 background"
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
/>
<h4 class="mx-8 mt-6 my-2">Background Color</h4>
<v-radio-group
v-model="backgroundColor"
v-model="$vuetify.theme.currentTheme.background"
class="mt-0"
@change="theme(backgroundColor)"
>
<!-- @change="theme(backgroundColor)" -->
<div
class="d-flex flex-row px-6 no-wrap"
style="max-width: 100%; overflow-x: auto"
>
<div v-show="false" class="text-center">
<!-- on-icon="mdi-brightness-1" -->
<div
v-for="theme in $vuetify.theme.dark
? backgroundsDark
: backgroundsLight"
:key="theme.color"
class="text-center"
>
<v-radio
light
color="primary"
active-class="pl-6 pr-4 border-primary"
style="
transition-duration: 0.3s;
background: white;
border: 2px solid white;
"
class="py-4 pl-4 pr-2 ma-2 rounded-lg"
value="#ffffff"
active-class="px-6 border-primary"
style="transition-duration: 0.3s"
:style="{
background: theme.color,
border: '2px solid ' + theme.color,
}"
class="py-4 px-4 ma-2 rounded-lg"
:value="theme.color"
/>
Day
{{ theme.name }}
</div>
<div class="text-center">
<!-- on-icon="mdi-brightness-2" -->
<v-radio
dark
ref="experimentalBackground"
color="primary"
active-class="pl-6 pr-4 border-primary"
style="
transition-duration: 0.3s;
background: #181818;
border: 2px solid #181818;
"
class="py-4 pl-4 pr-2 ma-2 rounded-lg"
value="#181818"
active-class="px-6 border-primary primary"
style="transition-duration: 0.3s"
:style="{
background: $vuetify.theme.dark
? 'var(--v-primary-darken4) !important'
: 'var(--v-primary-lighten4) !important',
border: $vuetify.theme.dark
? '2px solid var(--v-primary-darken4)'
: '2px solid var(--v-primary-lighten4)',
}"
class="py-4 px-4 ma-2 rounded-lg"
:value="experimentalBackground"
/>
Dark
</div>
<div class="text-center">
<!-- on-icon="mdi-brightness-3" -->
<v-radio
dark
color="primary"
active-class="pl-6 pr-4 border-primary"
style="
transition-duration: 0.3s;
background: black;
border: 2px solid black;
"
class="py-4 pl-4 pr-2 ma-2 rounded-lg"
value="#000000"
/>
Black
</div>
<div class="text-center">
<!-- on-icon="mdi-brightness-3" -->
<!-- off-icon="mdi-view-grid-plus" -->
<v-radio
dark
color="primary"
active-class="pl-6 pr-4 border-primary primary"
style="
transition-duration: 0.3s;
background: var(--v-primary-lighten2) !important;
border: 2px solid var(--v-primary-lighten2);
"
class="py-4 pl-4 pr-2 ma-2 rounded-lg"
:value="$vuetify.theme.currentTheme.primary.lighten2"
/>
Custom <br />
<div class="grey--text" style="font-size: 0.5rem">(Experimental)</div>
Adaptive <br />
<div
class="background--text"
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
style="font-size: 0.5rem"
>
(Experimental)
</div>
</div>
</div>
</v-radio-group>
<div class="py-1 background lighten-1" />
<!-- <div
class="py-1 mt-4 background"
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
/> -->
<v-switch
v-model="$vuetify.theme.dark"
class="mx-8 mt-6 mb-6"
label="Dark Theme"
hint="Bravo Six, Going Dark."
persistent-hint
inset
@click="saveTheme($vuetify.theme.dark)"
/>
<h4 class="mx-8 mt-6 mb-2">Accent Color</h4>
<v-radio-group
v-model="$vuetify.theme.currentTheme.primary"
class="mt-0 mx-2"
>
<div
class="d-flex flex-row px-6 no-wrap py-3 align-center"
style="max-width: 100%; overflow-x: auto"
>
<v-radio
v-for="color in $vuetify.theme.dark ? swatchesDark : swatchesLight"
:key="color[0]"
color="primary"
:light="$vuetify.theme.dark"
:dark="!$vuetify.theme.dark"
active-class="border-primary"
style="transition-duration: 0.3s"
:style="{
background: color[0],
border: '2px solid ' + color[0],
}"
class="mr-2 my-auto rounded-xl"
:value="color[0]"
/>
</div>
</v-radio-group>
<v-card
flat
class="d-flex flex-row justify-between mx-8 mb-4 px-4 background rounded-lg"
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
>
<div class="my-auto">
<div>Dark Mode</div>
<div
class="background--text"
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
style="font-size: 0.75rem; margin-top: -0.25rem !important"
>
Bravo Six, Going Dark.
</div>
</div>
<v-spacer />
<v-switch v-model="$vuetify.theme.dark" persistent-hint inset />
</v-card>
</div>
</template>
@ -179,8 +152,6 @@
export default {
data() {
return {
backgroundColor: this.$vuetify.theme.currentTheme.background.base,
primaryColor: this.$vuetify.theme.currentTheme.primary.base,
swatchesDark: [
["#7cd6af"],
["#fec89b"],
@ -193,21 +164,86 @@ export default {
swatchesLight: [
["#ff4444"],
["#f88469"],
["#FFC107"],
["#22aa22"],
["#4a9e90"],
["#3F51B5"],
["#777fff"],
],
backgroundsDark: [
{ name: "Dark", color: "#181818" },
{ name: "Black", color: "#000000" },
],
backgroundsLight: [
{ name: "Bright", color: "#ffffff" },
{ name: "Dim", color: "#eeeeee" },
],
themeExampleVideo: {
videoId: "3_Rxnb_E_TI",
title: {
runs: [
{
text: "This is a theme preview",
},
],
},
publishedTimeText: {
runs: [
{
text: "13 months ago",
},
],
},
shortBylineText: {
runs: [
{
text: "VueTube",
navigationEndpoint: {
clickTrackingParams: "CIUBEJQ1GAAiEwjQlsXmxOf2AhXDdisKHcBnCcc=",
browseEndpoint: {
browseId: "UClvgyQvIplPQU8N73vPlFUA",
canonicalBaseUrl: "/c/Ashstudio7HD",
},
},
},
],
},
channelThumbnail: {
thumbnails: [
{
url: "https://imgs.search.brave.com/z7w4T33dzLGFn3u67ymQTyeWz_jvldkQ7MTQmPDF7s0/rs:fit:540:540:1/g:ce/aHR0cHM6Ly9zMTg2/NzAucGNkbi5jby93/cC1jb250ZW50L3Vw/bG9hZHMvY2F0LXR5/cGluZy5naWY.gif",
width: 69,
height: 69,
},
],
},
shortViewCountText: {
runs: [
{
text: "69M views",
},
],
},
},
experimentalBackground: "",
};
},
watch: {
primaryColor: function (val) {
mounted() {
this.$nextTick(() => {
let hex = window
.getComputedStyle(document.documentElement)
.getPropertyValue("--v-primary-lighten4");
// the menace above returns a hex string with A SPACE " " in front of it, that's why substring(1)
this.experimentalBackground = hex.substring(1);
});
},
methods: {
saveTheme() {
navigator.vibrate([10, 100, 5]);
},
primarySwitch(val) {
this.$vuetify.theme.currentTheme.primary.base = val;
let primary1 = this.$vuetube.hexToRgb(val);
let primary2 = this.$vuetube.hexToRgb(val);
for (const i in primary1) {
localStorage.getItem("darkTheme") === "true"
? (primary1[i] -= 100)
@ -222,19 +258,11 @@ export default {
if (primary2[i] > 255) primary2[i] = 254;
if (primary2[i] < 0) primary2[i] = 1;
}
primary1 = this.$vuetube.rgbToHex(primary1.r, primary1.g, primary1.b);
primary2 = this.$vuetube.rgbToHex(primary2.r, primary2.g, primary2.b);
this.$vuetify.theme.currentTheme.primary.lighten1 = primary1;
this.$vuetify.theme.currentTheme.primary.lighten2 = primary2;
},
},
methods: {
saveTheme() {
navigator.vibrate([10, 100, 5]);
},
theme(bg) {
console.log(bg);
if (bg !== this.$vuetify.theme.currentTheme.primary.lighten2) {
@ -273,6 +301,9 @@ export default {
margin-right: 0 !important;
margin-top: 0 !important;
}
.v-input--selection-controls__input {
margin-right: 0 !important;
}
.bordered {
border: 2px solid var(--v-background-base);
}