Skip to content

Commit

Permalink
Color customizations for primary and accent colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@megastary
megastary committed Dec 24, 2019
1 parent 2a2c8ea commit dd84d93
Show file tree
Hide file tree
Showing 5 changed files with 159 additions and 34 deletions.
2 changes: 1 addition & 1 deletion src/components/Footer.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<v-footer v-if="!footerHidden" fixed class="footer font-weight-medium">
<v-footer elevation="12" color="primary" v-if="!footerHidden" fixed class="footer font-weight-medium">
<v-col class="text-center" cols="12">
<strong><v-icon>mdi-mushroom</v-icon> Houby Studio</strong>
{{ new Date().getFullYear() }}
Expand Down
60 changes: 34 additions & 26 deletions src/components/Navigation.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<v-app-bar app>
<v-app-bar color="primary" app>
<div v-if="!logoHidden" class="d-flex align-center">
<v-img
alt="OGL Logo"
Expand All @@ -11,38 +11,40 @@
/>
<v-toolbar-title class="hidden-xs-only">OGL</v-toolbar-title>
</div>
<v-tabs color="dark" show-arrows align-with-title centered grow>
<v-tabs v-bind:background-color="$vuetify.theme.dark ? $vuetify.theme.themes.dark.primary : $vuetify.theme.themes.light.primary" color="accent" show-arrows align-with-title centered grow optional>
<v-tab to="/library">
<v-icon>mdi-bookshelf</v-icon><span class="hidden-xs-only">Library</span>
<v-icon>mdi-bookshelf</v-icon>
<span class="hidden-xs-only">Library</span>
</v-tab>
<v-tab to="/explore">
<v-icon>mdi-magnify</v-icon><span class="hidden-xs-only">Explore</span>
<v-icon>mdi-magnify</v-icon>
<span class="hidden-xs-only">Explore</span>
</v-tab>
<v-tab to="/profile">
<v-icon>mdi-account</v-icon><span class="hidden-xs-only">Profile</span>
<v-icon>mdi-account</v-icon>
<span class="hidden-xs-only">Profile</span>
</v-tab>
</v-tabs>

<v-menu offset-y bottom transition="scroll-y-transition">
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-menu offset-y bottom transition="scroll-y-transition">
<template v-slot:activator="{ on }">
<v-btn class="mt-1 mt-md-2" icon v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>

<v-list>
<v-list-item-group>
<v-list-item v-for="item in navigation" :key="item.name" :to="item.link">
<v-list-item-icon>
<v-icon v-text="item.icon"></v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item.name"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-menu>
<v-list>
<v-list-item-group color="accent">
<v-list-item v-for="item in navigation" :key="item.name" :to="item.link">
<v-list-item-icon>
<v-icon v-text="item.icon"></v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item.name"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-menu>
</v-tabs>
</v-app-bar>
</template>

Expand All @@ -65,3 +67,9 @@ export default {
}
}
</script>

<style>
.bg-blak {
background-color: "accent" !important;
}
</style>
6 changes: 5 additions & 1 deletion src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ var vueApp = new Vue({
render: h => h(App)
})

vueApp.$vuetify.theme.dark = store.state.themeDark
vueApp.$vuetify.theme.dark = store.state.settingsThemeDark
vueApp.$vuetify.theme.themes.dark.accent = store.state.settingsThemeAccentColorDark
vueApp.$vuetify.theme.themes.light.accent = store.state.settingsThemeAccentColorLight
vueApp.$vuetify.theme.themes.dark.primary = store.state.settingsThemePrimaryColorDark
vueApp.$vuetify.theme.themes.light.primary = store.state.settingsThemePrimaryColorLight

vueApp.$mount('#app')
16 changes: 15 additions & 1 deletion src/store/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,11 @@ export default new Vuex.Store({
state: {
settingsFooterHidden: false,
settingsLogoHidden: false,
settingsThemeDark: false
settingsThemeDark: false,
settingsThemeAccentColorDark: '#e0e0e0',
settingsThemeAccentColorLight: '#424242',
settingsThemePrimaryColorDark: '#424242',
settingsThemePrimaryColorLight: '#ffffff'
},
mutations: {
hideFooter (state) {
Expand All @@ -24,6 +28,16 @@ export default new Vuex.Store({
},
toggleDarkTheme (state) {
state.settingsThemeDark = !state.settingsThemeDark
},
setThemeAccent (state, { dark, light }) {
console.log(`Set accent. This is ${dark} and this is ${light}.`)
state.settingsThemeAccentColorDark = dark
state.settingsThemeAccentColorLight = light
},
setThemePrimary (state, { dark, light }) {
console.log(`Set primary. This is ${dark} and this is ${light}.`)
state.settingsThemePrimaryColorDark = dark
state.settingsThemePrimaryColorLight = light
}
},
actions: {
Expand Down
109 changes: 104 additions & 5 deletions src/views/Settings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,83 @@
<div class="settings">
<v-container fluid>
<v-row align="center" justify="center">
<v-col cols="10">
<v-col>
<v-card>
<v-card-text>
<v-row>
<v-col cols="12" md="6">
<span>Scheme</span>
<v-switch v-model="toggleDarkTheme" v-on:change="$vuetify.theme.dark = toggleDarkTheme" label="Dark" />
<v-card-title class="remove-padding"><v-icon>mdi-palette-advanced</v-icon> Theme</v-card-title>
<v-subheader class="remove-padding"><v-icon>mdi-theme-light-dark</v-icon> Dark / Light</v-subheader>
<v-switch color="accent" v-model="toggleDarkTheme" v-on:change="$vuetify.theme.dark = toggleDarkTheme" label="Dark" class="padding-left" />
<v-subheader class="remove-padding"><v-icon>mdi-format-color-fill</v-icon> Primary color</v-subheader>
<v-btn x-large class="blackwhite" v-on:click="setThemePrimary({ dark: '#424242', light: '#ffffff' })"></v-btn>
<v-btn x-large class="red" v-on:click="setThemePrimary({ dark: '#B71C1C', light: '#EF9A9A' })"></v-btn>
<v-btn x-large class="blue" v-on:click="setThemePrimary({ dark: '#1A237E', light: '#9FA8DA' })"></v-btn>
<v-btn x-large class="purple" v-on:click="setThemePrimary({ dark: '#4527A0', light: '#B39DDB' })"></v-btn>
<v-dialog v-model="dialogPrimary" max-width="400px">
<template v-slot:activator="{ on }">
<v-btn x-large v-bind:color="customColorPrimary" class="custom" v-on="on">Custom</v-btn>
</template>
<v-card>
<v-card-title>
<v-tabs v-bind:color="customColorPrimary" centered grow>
<v-tab>Pick custom color</v-tab>
</v-tabs>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col align="center">
<v-color-picker v-model="customColorPrimary" hide-mode-switch flat mode="hexa"></v-color-picker>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn v-bind:color="customColorPrimary" text @click="dialogPrimary = false">Close</v-btn>
<v-btn v-bind:color="customColorPrimary" text @click="setThemePrimary({ dark: customColorPrimary, light: customColorPrimary }); dialogPrimary = false">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-subheader class="remove-padding"><v-icon>mdi-palette</v-icon> Accent color</v-subheader>
<v-btn x-large class="blackwhite" v-on:click="setThemeAccent({ dark: '#E0E0E0', light: '#424242' })"></v-btn>
<v-btn x-large class="red" v-on:click="setThemeAccent({ dark: '#FF8A80', light: '#D50000' })"></v-btn>
<v-btn x-large class="blue" v-on:click="setThemeAccent({ dark: '#8C9EFF', light: '#304FFE' })"></v-btn>
<v-btn x-large class="purple" v-on:click="setThemeAccent({ dark: '#B388FF', light: '#4527A0' })"></v-btn>
<v-dialog v-model="dialogAccent" max-width="400px">
<template v-slot:activator="{ on }">
<v-btn x-large v-bind:color="customColorAccent" class="custom" v-on="on">Custom</v-btn>
</template>
<v-card>
<v-card-title>
<v-tabs v-bind:color="customColorAccent" centered grow>
<v-tab>Pick custom color</v-tab>
</v-tabs>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col align="center">
<v-color-picker v-model="customColorAccent" hide-mode-switch flat mode="hexa"></v-color-picker>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn v-bind:color="customColorAccent" text @click="dialogAccent = false">Close</v-btn>
<v-btn v-bind:color="customColorAccent" text @click="setThemeAccent({ dark: customColorAccent, light: customColorAccent }); dialogAccent = false">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-divider></v-divider>
</v-col>
<v-col cols="12" md="6">
<span>Logo</span>
<v-switch v-model="toggleLogoHidden" label="Hide" />
<v-switch color="accent" v-model="toggleLogoHidden" label="Hide" />
<span>Footer</span>
<v-switch v-model="toggleFooterHidden" label="Hide" />
<v-switch color="accent" v-model="toggleFooterHidden" label="Hide" />
</v-col>
</v-row>
</v-card-text>
Expand All @@ -34,6 +98,14 @@
<script>
export default {
name: 'settings',
data: function () {
return {
customColorAccent: '#123456',
customColorPrimary: '#123456',
dialogAccent: false,
dialogPrimary: false
}
},
computed: {
toggleLogoHidden: {
get: function () {
Expand All @@ -59,6 +131,33 @@ export default {
this.$store.commit('toggleDarkTheme')
}
}
},
methods: {
setThemeAccent (e) {
// Set colors in real time
this.$vuetify.theme.themes.dark.accent = e.dark
this.$vuetify.theme.themes.light.accent = e.light
// Store colors in vuex store
var colors = { dark: e.dark, light: e.light }
this.$store.commit('setThemeAccent', colors)
},
setThemePrimary (e) {
// Set colors in real time
this.$vuetify.theme.themes.dark.primary = e.dark
this.$vuetify.theme.themes.light.primary = e.light
// Store colors in vuex store
var colors = { dark: e.dark, light: e.light }
this.$store.commit('setThemePrimary', colors)
}
}
}
</script>

<style scoped>
.remove-padding {
padding-left: 0;
}
.blackwhite {
background-image: linear-gradient(to bottom right, black, white);
}
</style>

0 comments on commit dd84d93

Please sign in to comment.