Permalink
Browse files

Add dark mode

  • Loading branch information...
yabirgb committed Feb 4, 2019
1 parent 985e5b8 commit 99407d85b5aec65faec9d9d128ee69eb8672dd45
Showing with 124 additions and 7 deletions.
  1. +31 −3 src/App.vue
  2. +20 −3 src/components/layouts/Navigation.vue
  3. +10 −0 src/constants/theme.js
  4. +45 −0 src/store/app.js
  5. +3 −1 src/store/store.js
  6. +15 −0 src/utils/theme.js
@@ -6,17 +6,45 @@

<script>
import {mapState} from 'vuex'
export default {
name: 'app',
name: 'Anfora',
state:{
},
computed: {
...mapState({
theme: (state) => {
return {
'--theme-background-color': state.preferences.theme.background_color,
'--theme-selected-background-color': state.preferences.theme.selected_background_color,
'--theme-navbar-color': state.preferences.theme.navbar_color,
'--theme-primary-color': state.preferences.theme.primary_color,
'--theme-secondary-color': state.preferences.theme.secondary_color,
}
}
})
}
}
</script>

<style lang="scss">
@import "~bulma/sass/utilities/_all";
// Set your colors
$primary: hsl(218, 32%, 46%);
html{
--theme-background-color: #ffffff;
--theme-selected-background-color: #f2f6fc;
--theme-navbar-color: #4a5664;
--theme-primary-color: #303133;
--theme-secondary-color: #909399;
$background: var(--theme-background-color);
}
@import "~bulma";
@import "~buefy/src/scss/buefy";
</style>
@@ -38,7 +38,7 @@
<router-link class="navbar-item" :title='$t("navigation.profile")' :to="{name:'settings'}"><i class="material-icons">settings</i>Settings</router-link>
<a class="navbar-item" href="#" :title='$t("navigation.logout")' @click="logout()"><i class="material-icons">power_settings_new</i> Close session</a>


<a class="navbar-item" href="#" @click="setDarkMode"><i class="material-icons">brightness_2</i>Dark mode</a>
<hr class="navbar-divider">
<div class="navbar-item">
Version 0.0.1
@@ -73,14 +73,16 @@ import {logout} from '../../utils/auth';
import {SSE} from 'sse.js'
import urls from '../../utils/zinatjs/urlMap.js'
import ClickOutside from 'vue-click-outside'
import Appearence from '../../constants/theme.js'
export default {
name: 'Navigation',
data(){
return{
notifications: 1,
dropActive: false
dropActive: false,
darkMode: false
}
},
computed:{
@@ -123,6 +125,21 @@ export default {
hide(){
this.dropActive = false
},
setDarkMode(){
console.log("Go dark")
if(!this.darkMode){
this.$store.dispatch('preferences/updateTheme', Appearence.Dark)
this.darkMode = true
}else{
this.$store.dispatch('preferences/updateTheme', Appearence.Light)
this.darkMode = false
}
console.log(this.$store.getters['preferences/getTheme'].background_color)
}
},
directives: {
@@ -0,0 +1,10 @@
export default {
Light: {
name: 'preferences.appearance.theme.light',
key: 'light'
},
Dark: {
name: 'preferences.appearance.theme.dark',
key: 'dark'
}
}
@@ -0,0 +1,45 @@
import {LightTheme, DarkTheme} from '../utils/theme.js'

import Theme from '../constants/theme.js'

const App = {
namespaced: true,
state:{
theme: DarkTheme,
notify:{
reply: true,
reblog: true,
favourite: true,
follow: true
},
ignoreCW: false
},
mutations:{
updateTheme(state, themeColorList){
state.theme = themeColorList
}
},
actions:{
updateTheme({commit}, appearence){
const themeKey = appearence.key
switch (themeKey){
case Theme.Light.key:
commit('updateTheme', LightTheme)
break
case Theme.Dark.key:
commit('updateTheme', DarkTheme)
break
default:
commit('updateTheme', DarkTheme)
break
}
}
},
getters:{
getTheme(state){
return state.theme
}
}
}

export default App;
@@ -3,13 +3,15 @@ import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";
import Profile from './modules/profiles'
import Relationship from './modules/accounts.js'
import App from './app.js'

Vue.use(Vuex)

export default new Vuex.Store({
modules:{
profiles: Profile,
relationships: Relationship
relationships: Relationship,
preferences: App
},
plugins: [createPersistedState()]
})
@@ -0,0 +1,15 @@
export const DarkTheme = {
background_color: '#282c37',
selected_background_color: '#313543',
navbar_color: '#1c2938',
primary_color: '#ffffff',
seconday_color: '#8899a6',
}

export const LightTheme = {
background_color: '#ffffff',
selected_background_color: '#f2f6fc',
navbar_color: '#373d48',
primary_color: '#303133',
secondary_color: '#909399',
}

0 comments on commit 99407d8

Please sign in to comment.