@@ -1,38 +0,0 @@ | |||||
<template> | |||||
<!-- BEGIN: Dark Mode Switcher--> | |||||
<div | |||||
class="dark-mode-switcher cursor-pointer shadow-md fixed bottom-0 right-0 box dark:bg-dark-2 border rounded-full w-40 h-12 flex items-center justify-center z-50 mb-10 mr-10" | |||||
@click="switchMode" | |||||
> | |||||
<div class="mr-4 text-gray-700 dark:text-gray-300">Dark Mode</div> | |||||
<div | |||||
:class="{ 'dark-mode-switcher__toggle--active': darkMode }" | |||||
class="dark-mode-switcher__toggle border" | |||||
></div> | |||||
</div> | |||||
<!-- END: Dark Mode Switcher--> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
computed: { | |||||
darkMode() { | |||||
return this.$store.state.main.darkMode; | |||||
} | |||||
}, | |||||
mounted() { | |||||
this.setDarkModeClass(); | |||||
}, | |||||
methods: { | |||||
switchMode() { | |||||
this.$store.dispatch("main/setDarkMode", !this.darkMode); | |||||
this.setDarkModeClass(); | |||||
}, | |||||
setDarkModeClass() { | |||||
this.darkMode | |||||
? cash("html").addClass("dark") | |||||
: cash("html").removeClass("dark"); | |||||
} | |||||
} | |||||
}; | |||||
</script> |
@@ -29,7 +29,7 @@ export default { | |||||
backgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | backgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | ||||
hoverBackgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | hoverBackgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | ||||
borderWidth: 5, | borderWidth: 5, | ||||
borderColor: this.$store.state.main.darkMode ? "#303953" : "#fff" | |||||
borderColor: "#fff" | |||||
} | } | ||||
] | ] | ||||
}; | }; | ||||
@@ -24,7 +24,7 @@ export default { | |||||
backgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | backgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | ||||
hoverBackgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | hoverBackgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | ||||
borderWidth: 5, | borderWidth: 5, | ||||
borderColor: this.$store.state.main.darkMode ? "#303953" : "#fff" | |||||
borderColor: "#fff" | |||||
} | } | ||||
] | ] | ||||
}; | }; | ||||
@@ -29,7 +29,7 @@ export default { | |||||
backgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | backgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | ||||
hoverBackgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | hoverBackgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | ||||
borderWidth: 5, | borderWidth: 5, | ||||
borderColor: this.$store.state.main.darkMode ? "#303953" : "#fff" | |||||
borderColor: "#fff" | |||||
} | } | ||||
] | ] | ||||
}; | }; | ||||
@@ -29,7 +29,7 @@ export default { | |||||
backgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | backgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | ||||
hoverBackgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | hoverBackgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | ||||
borderWidth: 2, | borderWidth: 2, | ||||
borderColor: this.$store.state.main.darkMode ? "#303953" : "#fff" | |||||
borderColor: "#fff" | |||||
} | } | ||||
] | ] | ||||
}; | }; | ||||
@@ -67,9 +67,7 @@ export default { | |||||
{ | { | ||||
ticks: { | ticks: { | ||||
fontSize: "12", | fontSize: "12", | ||||
fontColor: this.$store.state.main.darkMode | |||||
? "#718096" | |||||
: "#777777" | |||||
fontColor: "#777777" | |||||
}, | }, | ||||
gridLines: { | gridLines: { | ||||
display: false | display: false | ||||
@@ -80,18 +78,14 @@ export default { | |||||
{ | { | ||||
ticks: { | ticks: { | ||||
fontSize: "12", | fontSize: "12", | ||||
fontColor: this.$store.state.main.darkMode | |||||
? "#718096" | |||||
: "#777777", | |||||
fontColor: "#777777", | |||||
callback: function(value) { | callback: function(value) { | ||||
return "$" + value; | return "$" + value; | ||||
} | } | ||||
}, | }, | ||||
gridLines: { | gridLines: { | ||||
color: this.$store.state.main.darkMode ? "#718096" : "#D8D8D8", | |||||
zeroLineColor: this.$store.state.main.darkMode | |||||
? "#718096" | |||||
: "#D8D8D8", | |||||
color: "#D8D8D8", | |||||
zeroLineColor: "#D8D8D8", | |||||
borderDash: [2, 2], | borderDash: [2, 2], | ||||
zeroLineBorderDash: [2, 2], | zeroLineBorderDash: [2, 2], | ||||
drawBorder: false | drawBorder: false | ||||
@@ -29,7 +29,7 @@ export default { | |||||
backgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | backgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | ||||
hoverBackgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | hoverBackgroundColor: ["#FF8B26", "#FFC533", "#285FD3"], | ||||
borderWidth: 5, | borderWidth: 5, | ||||
borderColor: this.$store.state.main.darkMode ? "#303953" : "#fff" | |||||
borderColor: "#fff" | |||||
} | } | ||||
] | ] | ||||
}; | }; | ||||
@@ -1,13 +1,11 @@ | |||||
import Vue from "vue"; | import Vue from "vue"; | ||||
import Vuex from "vuex"; | import Vuex from "vuex"; | ||||
import main from "./main"; | |||||
import sideMenu from "./side-menu"; | import sideMenu from "./side-menu"; | ||||
Vue.use(Vuex); | Vue.use(Vuex); | ||||
export default new Vuex.Store({ | export default new Vuex.Store({ | ||||
modules: { | modules: { | ||||
main: main, | |||||
sideMenu: sideMenu, | sideMenu: sideMenu, | ||||
} | } | ||||
}); | }); |
@@ -1,34 +0,0 @@ | |||||
import * as types from "./mutation-types"; | |||||
const state = () => { | |||||
return { | |||||
darkMode: false | |||||
}; | |||||
}; | |||||
// getters | |||||
const getters = { | |||||
darkMode: state => state.darkMode | |||||
}; | |||||
// actions | |||||
const actions = { | |||||
setDarkMode({ commit }, darkMode) { | |||||
commit(types.SET_DARK_MODE, { darkMode }); | |||||
} | |||||
}; | |||||
// mutations | |||||
const mutations = { | |||||
[types.SET_DARK_MODE](state, { darkMode }) { | |||||
state.darkMode = darkMode; | |||||
} | |||||
}; | |||||
export default { | |||||
namespaced: true, | |||||
state, | |||||
getters, | |||||
actions, | |||||
mutations | |||||
}; |
@@ -1 +0,0 @@ | |||||
export const SET_DARK_MODE = "SET_DARK_MODE"; |
@@ -109,8 +109,8 @@ | |||||
export default { | export default { | ||||
mounted() { | mounted() { | ||||
cash("body") | cash("body") | ||||
.removeClass("app") | |||||
.addClass("login"); | |||||
.removeClass('app') | |||||
.addClass('login'); | |||||
} | } | ||||
}; | }; | ||||
</script> | </script> |