mirror of https://github.com/VueTubeApp/VueTube
theme cleanup and startup fetch
This commit is contained in:
Nikita Krupin
parent
d18e265040
commit
0a7eb3e6cb
|
|
@ -2,7 +2,7 @@
|
|||
<v-bottom-navigation
|
||||
v-model="tabSelection"
|
||||
shift
|
||||
class="bottomNav py-4 background"
|
||||
class="bottomNav py-4 transparent"
|
||||
>
|
||||
<v-btn
|
||||
v-for="(item, i) in tabs"
|
||||
|
|
@ -74,7 +74,7 @@ export default {
|
|||
bottom: env(safe-area-inset-bottom) !important;
|
||||
/* bottom: 0; */
|
||||
padding: 0 !important;
|
||||
z-index: 99999;
|
||||
/* z-index: 99999; */
|
||||
}
|
||||
.navButton {
|
||||
width: 25vw !important;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
<div id="details">
|
||||
<a
|
||||
:href="
|
||||
this.$rendererUtils.getNavigationEndpoints(
|
||||
$rendererUtils.getNavigationEndpoints(
|
||||
video.shortBylineText.runs[0].navigationEndpoint
|
||||
)
|
||||
"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<template>
|
||||
<v-card
|
||||
style="height: 4rem !important; display: flex; box-shadow: none !important"
|
||||
color="background"
|
||||
class="rounded-0 pa-3 topNav"
|
||||
class="rounded-0 pa-3 topNav transparent"
|
||||
>
|
||||
<h3 v-show="!search" class="my-auto ml-4" v-text="page" />
|
||||
|
||||
|
|
@ -97,7 +96,7 @@ export default {
|
|||
top: env(safe-area-inset-top);
|
||||
/* top: 0; */
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
/* z-index: 999; */
|
||||
/*border-radius: 0 0 1em 1em !important;*/
|
||||
}
|
||||
.topNavSearch {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<v-app style="background: black !important">
|
||||
<v-app style="background: transparent !important">
|
||||
<topNavigation
|
||||
:search="search"
|
||||
:page="page"
|
||||
|
|
@ -9,16 +9,10 @@
|
|||
@scroll-to-top="$refs.pgscroll.scrollTop = 0"
|
||||
/>
|
||||
|
||||
<div class="background" style="height: 100%; margin-top: 4rem">
|
||||
<div style="height: 100%; margin-top: 4rem">
|
||||
<div
|
||||
v-show="!search"
|
||||
class="background"
|
||||
style="
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 8rem);
|
||||
transition-duration: 0.3s;
|
||||
transition-property: border-radius;
|
||||
"
|
||||
style="overflow: hidden; height: calc(100vh - 8rem)"
|
||||
:style="{
|
||||
borderRadius: `${roundTweak / 2}rem`,
|
||||
}"
|
||||
|
|
@ -32,14 +26,7 @@
|
|||
|
||||
<div
|
||||
v-show="search"
|
||||
class="background"
|
||||
style="
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 4rem);
|
||||
transition-duration: 0.3s;
|
||||
transition-property: border-radius;
|
||||
"
|
||||
style="padding: 0; overflow: hidden; height: calc(100vh - 4rem)"
|
||||
>
|
||||
<div class="scroll-y" style="height: 100%">
|
||||
<div v-if="search" style="min-width: 180px">
|
||||
|
|
@ -165,13 +152,14 @@ export default {
|
|||
|
||||
.scroll-y {
|
||||
overflow-y: scroll !important; /* has to be scroll, not auto */
|
||||
overflow-x: hidden !important;
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
/* padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
|
||||
margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important; */
|
||||
background: black;
|
||||
background: var(--v-background-base);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<v-app>
|
||||
<v-app style="background: transparent !important">
|
||||
<nuxt />
|
||||
</v-app>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -64,8 +64,8 @@ export default {
|
|||
background: "#ffffff",
|
||||
},
|
||||
dark: {
|
||||
primary: "#D32F2F",
|
||||
background: "#181818",
|
||||
primary: "#B71C1C",
|
||||
background: "#000000",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
<template>
|
||||
<center v-show="stateLoaded" class="container">
|
||||
<!-- <v-img
|
||||
<center v-show="themeFetched" class="container">
|
||||
<v-img
|
||||
src="/icon.svg"
|
||||
width="10em"
|
||||
style="margin-bottom: 1em"
|
||||
width="10rem"
|
||||
height="10rem"
|
||||
class="youspinmerightround"
|
||||
:class="$vuetify.theme.dark ? '' : 'invert'"
|
||||
/>
|
||||
<v-progress-circular size="50" indeterminate color="primary" /> -->
|
||||
hi
|
||||
<div style="height: 5rem" />
|
||||
<v-progress-linear rounded height="8" indeterminate color="primary" />
|
||||
</center>
|
||||
</template>
|
||||
|
||||
|
|
@ -16,50 +17,48 @@ export default {
|
|||
layout: "empty",
|
||||
|
||||
data: () => ({
|
||||
stateLoaded: false,
|
||||
themeFetched: false,
|
||||
}),
|
||||
|
||||
async beforeCreate() {
|
||||
// initializes UI tweaks to the saved state
|
||||
beforeCreate() {
|
||||
this.$store.commit("tweaks/initTweaks");
|
||||
// const { SplashScreen } = await require("@capacitor/splash-screen"); // This has to be imported here, otherwise NUXT won't import the package because its so early in the lifecycle -Front
|
||||
// This has to be imported here,otherwise NUXT won't import the package because its so early in the lifecycle -Front
|
||||
// const { SplashScreen } = await require("@capacitor/splash-screen");
|
||||
// await SplashScreen.hide();
|
||||
},
|
||||
//--- End Hide Splash Screen ---//
|
||||
|
||||
async mounted() {
|
||||
this.stateLoaded = true;
|
||||
//--- Theme Loader Moved From '~/layouts/default.vue' (because this only needs to be run once) -Front ---//
|
||||
setTimeout(() => {
|
||||
//Set timeout is required to make it load properly... dont ask me why -Front
|
||||
const darkTheme = localStorage.getItem("darkTheme");
|
||||
if (darkTheme == "true") {
|
||||
this.$vuetify.theme.dark = darkTheme;
|
||||
//this.$vuetube.statusBar.setDark(); //Not needed unless setLight() is used below -Front
|
||||
this.$vuetube.statusBar.setBackground(
|
||||
this.$vuetify.theme.themes.dark.background
|
||||
);
|
||||
|
||||
const isOled = localStorage.getItem("isOled");
|
||||
|
||||
if (isOled == "true") {
|
||||
(this.$vuetify.theme.themes.dark.background = "#000"),
|
||||
(this.$vuetify.theme.themes.dark.background = "#000"),
|
||||
(this.$vuetify.theme.themes.dark.background = "#000");
|
||||
} else {
|
||||
(this.$vuetify.theme.themes.dark.background = "#222"),
|
||||
(this.$vuetify.theme.themes.dark.background = "#222"),
|
||||
(this.$vuetify.theme.themes.dark.background = "#333");
|
||||
// Set timeout is required for $vuetify.theme... dont ask me why -Front
|
||||
const theming = new Promise((resolve) =>
|
||||
setTimeout(() => {
|
||||
const dark = localStorage.getItem("darkTheme");
|
||||
let bg = null;
|
||||
let pr = null;
|
||||
if (dark !== null) {
|
||||
bg = dark
|
||||
? localStorage.getItem("backgroundDark")
|
||||
: localStorage.getItem("backgroundLight");
|
||||
pr = dark
|
||||
? localStorage.getItem("primaryDark")
|
||||
: localStorage.getItem("primaryLight");
|
||||
this.$vuetify.theme.dark = dark === "true";
|
||||
if (pr !== null) this.$vuetify.theme.currentTheme.primary = pr;
|
||||
if (bg !== null) this.$vuetify.theme.currentTheme.background = bg;
|
||||
}
|
||||
} else {
|
||||
//this.$vuetube.statusBar.setLight() //Looks weird -Front
|
||||
this.$vuetube.statusBar.setBackground(
|
||||
this.$vuetify.theme.themes.light.background
|
||||
this.themeFetched = true;
|
||||
this.$vuetube.navigationBar.setTheme(
|
||||
this.$vuetify.theme.currentTheme.background,
|
||||
!dark
|
||||
);
|
||||
}
|
||||
}, 0);
|
||||
//-----------------------------------------------------------------------------------------------------------//
|
||||
this.$vuetube.statusBar.setTheme(
|
||||
this.$vuetify.theme.currentTheme.background,
|
||||
dark
|
||||
);
|
||||
resolve();
|
||||
}, 0)
|
||||
);
|
||||
|
||||
await theming;
|
||||
await this.$youtube.getAPI();
|
||||
this.$router.push(`/${localStorage.getItem("startPage") || "home"}`);
|
||||
},
|
||||
|
|
@ -76,4 +75,21 @@ export default {
|
|||
left: 50%;
|
||||
transform: translate(-50%, -80%);
|
||||
}
|
||||
.youspinmerightround {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
transition-property: opacity, transform;
|
||||
animation: likearecord 0.66s ease infinite alternate;
|
||||
}
|
||||
/* triangles aren't very good at spinning :c */
|
||||
@keyframes likearecord {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,14 @@
|
|||
<template>
|
||||
<div class="d-flex flex-column justify-end" style="min-height: 100%">
|
||||
<grid-video-renderer
|
||||
:video="themeExampleVideo"
|
||||
style="pointer-events: none"
|
||||
class="px-4"
|
||||
/>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<!-- <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-model="primaryColor"
|
||||
style="min-width: 100%"
|
||||
class="px-10 background"
|
||||
hide-mode-switch
|
||||
hide-sliders
|
||||
hide-canvas
|
||||
mode="hexa"
|
||||
>
|
||||
</v-color-picker> -->
|
||||
|
||||
<div
|
||||
<!-- <div
|
||||
class="py-1 mt-4 background"
|
||||
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
|
||||
/>
|
||||
/> -->
|
||||
|
||||
<h4 class="mx-8 mt-6 my-2">Colors</h4>
|
||||
|
||||
<!-- <h4 class="mx-8 mt-6 my-2">Background Colors</h4> -->
|
||||
|
||||
<h4 class="mx-8 mt-6 my-2">Background Color</h4>
|
||||
<v-radio-group
|
||||
v-model="$vuetify.theme.currentTheme.background"
|
||||
class="mt-0"
|
||||
|
|
@ -46,10 +19,10 @@
|
|||
style="max-width: 100%; overflow-x: auto"
|
||||
>
|
||||
<div
|
||||
v-for="theme in $vuetify.theme.dark
|
||||
v-for="background in $vuetify.theme.dark
|
||||
? backgroundsDark
|
||||
: backgroundsLight"
|
||||
:key="theme.color"
|
||||
:key="background.color"
|
||||
class="text-center"
|
||||
>
|
||||
<v-radio
|
||||
|
|
@ -57,17 +30,16 @@
|
|||
active-class="px-6 border-primary"
|
||||
style="transition-duration: 0.3s"
|
||||
:style="{
|
||||
background: theme.color,
|
||||
border: '2px solid ' + theme.color,
|
||||
background: background.color,
|
||||
border: '2px solid ' + background.color,
|
||||
}"
|
||||
class="py-4 px-4 ma-2 rounded-lg"
|
||||
:value="theme.color"
|
||||
:value="background.color"
|
||||
/>
|
||||
{{ theme.name }}
|
||||
{{ background.name }}
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<v-radio
|
||||
ref="experimentalBackground"
|
||||
color="primary"
|
||||
active-class="px-6 border-primary primary"
|
||||
style="transition-duration: 0.3s"
|
||||
|
|
@ -80,7 +52,7 @@
|
|||
: '2px solid var(--v-primary-lighten4)',
|
||||
}"
|
||||
class="py-4 px-4 ma-2 rounded-lg"
|
||||
:value="experimentalBackground"
|
||||
:value="$vuetify.theme.dark ? experimentalDark : experimentalLight"
|
||||
/>
|
||||
Adaptive <br />
|
||||
<div
|
||||
|
|
@ -94,36 +66,63 @@
|
|||
</div>
|
||||
</v-radio-group>
|
||||
|
||||
<!-- <div
|
||||
class="py-1 mt-4 background"
|
||||
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
|
||||
/> -->
|
||||
|
||||
<h4 class="mx-8 mt-6 mb-2">Accent Color</h4>
|
||||
<!-- <h4 class="mx-8 mt-6 my-2">Accent Colors</h4> -->
|
||||
|
||||
<v-radio-group
|
||||
v-model="$vuetify.theme.currentTheme.primary"
|
||||
class="mt-0 mx-2"
|
||||
style="margin-top: -1.5rem"
|
||||
class="mx-2"
|
||||
@change="adapt"
|
||||
>
|
||||
<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"
|
||||
v-for="color in $vuetify.theme.dark ? primaryDark : primaryLight"
|
||||
:key="color"
|
||||
color="background"
|
||||
on-icon="mdi-check"
|
||||
: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],
|
||||
background: color,
|
||||
border: '2px solid ' + color,
|
||||
}"
|
||||
class="mr-2 my-auto rounded-xl"
|
||||
:value="color[0]"
|
||||
:value="color"
|
||||
/>
|
||||
<v-dialog
|
||||
v-model="dialog"
|
||||
width="300"
|
||||
content-class="background rounded-lg"
|
||||
>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn
|
||||
icon
|
||||
class="background"
|
||||
style="height: 1.75rem; width: 1.75rem"
|
||||
:class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon>mdi-plus</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-color-picker
|
||||
v-model="$vuetify.theme.currentTheme.primary"
|
||||
style="min-width: 100%"
|
||||
class="background"
|
||||
hide-mode-switch
|
||||
dot-size="50"
|
||||
mode="hexa"
|
||||
flat
|
||||
>
|
||||
<!-- @input="(value) => primarySwitch(value)" -->
|
||||
</v-color-picker>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</v-radio-group>
|
||||
|
||||
|
|
@ -144,6 +143,7 @@
|
|||
</div>
|
||||
<v-spacer />
|
||||
<v-switch v-model="$vuetify.theme.dark" persistent-hint inset />
|
||||
<!-- @input="(value) => primarySwitch(value)" -->
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -152,162 +152,82 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
swatchesDark: [
|
||||
["#7cd6af"],
|
||||
["#fec89b"],
|
||||
["#FF7777"],
|
||||
["#77FF77"],
|
||||
["#77FFFF"],
|
||||
["#777FFF"],
|
||||
["#FF77FF"],
|
||||
],
|
||||
swatchesLight: [
|
||||
["#ff4444"],
|
||||
["#f88469"],
|
||||
["#22aa22"],
|
||||
["#4a9e90"],
|
||||
["#3F51B5"],
|
||||
["#777fff"],
|
||||
primaryDark: [
|
||||
"#B71C1C",
|
||||
"#FFBBFF",
|
||||
"#AAAFFF",
|
||||
"#AAFFFF",
|
||||
"#7CD6AF",
|
||||
"#FEC89B",
|
||||
],
|
||||
primaryLight: ["#E57373", "#F88469", "#22AA22", "#4A9E90", "#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: "",
|
||||
backgroundsLight: [{ name: "Normal", color: "#ffffff" }],
|
||||
experimentalLight: "",
|
||||
experimentalDark: "",
|
||||
dialog: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
let hex = window
|
||||
watch: {
|
||||
"$vuetify.theme.currentTheme.primary": {
|
||||
handler: function (value) {
|
||||
this.$vuetify.theme.dark
|
||||
? localStorage.setItem("primaryDark", value)
|
||||
: localStorage.setItem("primaryLight", value);
|
||||
console.log(value);
|
||||
let tempD = this.experimentalDark;
|
||||
let tempL = this.experimentalLight;
|
||||
this.$nextTick(() => {
|
||||
this.adapt();
|
||||
if (this.$vuetify.theme.currentTheme.background === tempD)
|
||||
this.$vuetify.theme.currentTheme.background = this.experimentalDark;
|
||||
if (this.$vuetify.theme.currentTheme.background === tempL)
|
||||
this.$vuetify.theme.currentTheme.background =
|
||||
this.experimentalLight;
|
||||
});
|
||||
},
|
||||
immediate: false,
|
||||
// deep: true,
|
||||
},
|
||||
"$vuetify.theme.currentTheme.background"(value) {
|
||||
this.$vuetify.theme.dark
|
||||
? localStorage.setItem("backgroundDark", value)
|
||||
: localStorage.setItem("backgroundLight", value);
|
||||
this.$vuetube.statusBar.setTheme(value, this.$vuetify.theme.dark);
|
||||
this.$vuetube.navigationBar.setTheme(value, !this.$vuetify.theme.dark);
|
||||
},
|
||||
"$vuetify.theme.dark"(value) {
|
||||
localStorage.setItem("darkTheme", value);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
adapt() {
|
||||
let hexR = window
|
||||
.getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--v-primary-darken4");
|
||||
let hexL = 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: {
|
||||
// the SPACE " " is stored as part of the CSS variable itself to be used for chaining
|
||||
this.experimentalDark = hexR.substring(1);
|
||||
this.experimentalLight = hexL.substring(1);
|
||||
},
|
||||
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)
|
||||
: (primary1[i] += 100);
|
||||
if (primary1[i] > 255) primary1[i] = 254;
|
||||
if (primary1[i] < 0) primary1[i] = 1;
|
||||
}
|
||||
for (const i in primary2) {
|
||||
localStorage.getItem("darkTheme") === "true"
|
||||
? (primary2[i] -= 200)
|
||||
: (primary2[i] += 200);
|
||||
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;
|
||||
},
|
||||
theme(bg) {
|
||||
console.log(bg);
|
||||
if (bg !== this.$vuetify.theme.currentTheme.primary.lighten2) {
|
||||
localStorage.setItem("darkTheme", bg !== "#ffffff");
|
||||
this.$vuetify.theme.dark = bg !== "#ffffff";
|
||||
bg !== "#ffffff"
|
||||
? this.$vuetube.statusBar.setDark()
|
||||
: this.$vuetube.statusBar.setLight();
|
||||
}
|
||||
this.$vuetify.theme.currentTheme.background = bg;
|
||||
console.log(this.$vuetify.theme.currentTheme);
|
||||
this.$vuetube.statusBar.setBackground(bg);
|
||||
this.$vuetube.navigationBar.setColor(bg, this.$vuetify.theme.dark);
|
||||
// localStorage.setItem("isOled", false)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.v-color-picker__color {
|
||||
width: 2rem !important;
|
||||
height: 2rem !important;
|
||||
border-radius: 1rem !important;
|
||||
}
|
||||
.v-color-picker__controls {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.v-color-picker__swatches > div {
|
||||
padding-right: 0 !important;
|
||||
justify-content: end !important;
|
||||
}
|
||||
.v-color-picker__color {
|
||||
margin-left: 0.5rem !important;
|
||||
margin-bottom: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
.border-primary {
|
||||
border: 2px solid var(--v-primary-base) !important;
|
||||
}
|
||||
.v-input--selection-controls__input {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.bordered {
|
||||
border: 2px solid var(--v-background-base);
|
||||
}
|
||||
.border-primary {
|
||||
border: 2px solid var(--v-primary-base) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -56,6 +56,12 @@ const module = {
|
|||
async setBackground(color) {
|
||||
return await StatusBar.setBackgroundColor({ color });
|
||||
},
|
||||
setTheme(color, dark) {
|
||||
StatusBar.setBackgroundColor({ color });
|
||||
dark
|
||||
? StatusBar.setStyle({ style: Style.Dark })
|
||||
: StatusBar.setStyle({ style: Style.Light });
|
||||
},
|
||||
},
|
||||
|
||||
navigationBar: {
|
||||
|
|
@ -65,7 +71,7 @@ const module = {
|
|||
async show() {
|
||||
return await NavigationBar.show();
|
||||
},
|
||||
async setColor(color, darkButtons) {
|
||||
async setTheme(color, darkButtons) {
|
||||
return await NavigationBar.setColor({ color, darkButtons });
|
||||
},
|
||||
async setTransparent() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="deploymentTargetDropDown">
|
||||
<targetSelectedWithDropDown>
|
||||
<Target>
|
||||
<type value="QUICK_BOOT_TARGET" />
|
||||
<deviceKey>
|
||||
<Key>
|
||||
<type value="VIRTUAL_DEVICE_PATH" />
|
||||
<value value="$USER_HOME$/.android/avd/Pixel_3a_API_31_arm64-v8a.avd" />
|
||||
</Key>
|
||||
</deviceKey>
|
||||
</Target>
|
||||
</targetSelectedWithDropDown>
|
||||
<timeTargetWasSelectedWithDropDown value="2022-03-30T18:40:14.226129Z" />
|
||||
</component>
|
||||
</project>
|
||||
Loading…
Reference in New Issue