etc/VueTube
0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-11-22 03:05:15 +00:00
Code Issues Projects Releases Wiki Activity

amoled theme

Browse source
This commit is contained in:
Nikita Krupin 2022-02-24 19:33:03 -05:00
parent c6581ac069
commit 42287c41df
3 changed files with 57 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
NUXT/layouts/default.vue
View file

@ -1,33 +1,27 @@
<template>
<v-app>
<v-card class="topNav rounded-0" style="display: flex;" color="accent">
<v-app class="background">
<v-card class="topNav rounded-0" style="display: flex;" color="accent white--text">
<h2 v-text="page" />
<v-spacer />
<v-btn text class="toolbarAction"><v-icon>mdi-magnify</v-icon></v-btn>
<v-btn text class="toolbarAction" color="white"><v-icon>mdi-magnify</v-icon></v-btn>
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn text class="toolbarAction" v-bind="attrs" v-on="on"><v-icon>mdi-dots-vertical</v-icon></v-btn>
</template>
<v-list>
<v-list-item v-for="(item, index) in dropdownMenu" :key="index">
<nuxt-link :to="item.link" style="text-decoration: none;" class="info--text">{{ item.title }}</nuxt-link>
</v-list-item>
</v-list>
</v-menu>
<v-menu offset-y content-class="mt-4">
<template v-slot:activator="{ on, attrs }">
<v-btn text class="toolbarAction" v-bind="attrs" v-on="on" color="white" style="padding-right: 0 !important;"><v-icon>mdi-dots-vertical</v-icon></v-btn>
</template>
<v-list>
<v-list-item v-for="(item, index) in dropdownMenu" :key="index">
<nuxt-link :to="item.link" style="text-decoration: none;" class="info--text">{{ item.title }}</nuxt-link>
</v-list-item>
</v-list>
</v-menu>
</v-card>
<div>
<div class="background" style="min-height: 100%">
<nuxt />
</div>
<v-bottom-navigation v-model="tabSelection" class="bottomNav rounded-0">
<v-bottom-navigation v-model="tabSelection" shift class="bottomNav background rounded-0">
<v-btn v-for="(item, i) in tabs" :key="i" class="navButton" :to="item.link">
<span v-text="item.name" />

2
NUXT/nuxt.config.js
View file

@ -44,11 +44,13 @@ export default {
dark: false,
themes: {
light: {
background: colors.white,
primary: colors.red.lighten1,
accent: "#E62117",
info: "#000"
},
dark: {
background: colors.grey.darken9,
primary: colors.red.darken2, //colors.blue.darken2
accent: colors.grey.darken3,
secondary: colors.amber.darken3,

49
NUXT/pages/settings.vue
View file

@ -2,16 +2,27 @@
<div class="mainContainer">
<v-card>
<v-card class="pb-5">
<v-card-title>Theme</v-card-title>
<section>
<v-switch
v-model="$vuetify.theme.dark"
label="Dark Theme"
hint="Bravo Six, Going Dark."
persistent-hint
/>
</section>
<v-row class="ml-3 mr-6">
<section class="row">
<v-switch
v-model="$vuetify.theme.dark"
label="Dark Theme"
hint="Bravo Six, Going Dark."
persistent-hint
inset
/>
</section>
<v-btn v-if="$vuetify.theme.dark" text tile class="white--text black" @click="amoled" >
{{
this.$vuetify.theme.themes.dark.background === '#000000'
? 'LCD'
: 'OLED'
}}
<v-icon :size="this.$vuetify.theme.themes.dark.background === '#000000' ? '.5rem' : '.9rem'" class="ml-2">mdi-brightness-2</v-icon>
</v-btn>
</v-row>
</v-card>
<v-card>
@ -26,6 +37,26 @@
</div>
</template>
<script>
export default {
methods: {
amoled () {
this.$vuetify.theme.themes.dark.background === '#000000' ? (
this.$vuetify.theme.themes.dark.accent = '#444444',
this.$vuetify.theme.themes.dark.background = '#111111'
) : (
this.$vuetify.theme.themes.dark.accent = '#000000',
this.$vuetify.theme.themes.dark.background = '#000000'
)
// doesn't work 😭
// console.log(document.getElementsByClassName('v-application--wrap')[0])
// console.log(document.getElementsByClassName('v-application--wrap')[0].style)
// document.getElementsByClassName('v-application--wrap')[0].style.backgroundColor = "#000000 !important"
}
}
}
</script>
<style scoped>
.v-card {
margin: 1em;