Large refactor on the front end

Created pages directory
Added night mode

client/src/stores/mainStore.js

@@ -9,7 +9,8 @@ export default new Vuex.Store({
 		count: 0,
 		message: 'Get out me yard ya wankers',
 		token: null,
-		username: null
+		username: null,
+		nightMode: false,
 	},
 	mutations: {
 		increment (state) {
@@ -40,6 +41,33 @@ export default new Vuex.Store({
 			delete axios.defaults.headers.common['Authorization']
 			state.token = null
 			state.username = null
+		},
+		toggleNightMode(state){
+
+			//Toggle state and save to local storage
+			state.nightMode = !(state.nightMode)
+			localStorage.setItem('nightMode', state.nightMode)
+
+			//Default theme colors
+			let themeColors = {
+				'background_color': '#fff',
+				'text_color': '#3d3d3d',
+				'outline_color': 'rgba(34,36,38,.15)',
+			}
+			//Night mode colors
+			if(state.nightMode){
+				themeColors = {
+					'background_color': '#000',
+					'text_color': '#a98457',
+					'outline_color': '#a98457',
+				}
+			}
+
+			//Go through each color and set CSS variable
+			let root = document.documentElement
+			Object.keys(themeColors).forEach( attribute => {
+				root.style.setProperty('--'+attribute, themeColors[attribute])
+			})
 		}
 	},
 	getters: {
@@ -55,6 +83,9 @@ export default new Vuex.Store({
 		getLoggedIn: state => {
 			let weIn = (state.token !== null && state.token != undefined && state.token.length > 0)
 			return weIn
-		}
+		},
+		getIsNightMode: state => {
+			return state.nightMode
+		},
 	}
 })