feat: added option to change nightmode in settings

frontend/App.vue

@@ -39,13 +39,25 @@ export default {
 		userId: state => state.user.auth.userId,
 		banned: state => state.user.auth.banned,
 		modals: state => state.modals.modals,
-		currentlyActive: state => state.modals.currentlyActive
+		currentlyActive: state => state.modals.currentlyActive,
+		nightmode: state => state.user.preferences.nightmode
 	}),
 	methods: {
 		submitOnEnter: (cb, event) => {
 			if (event.which === 13) cb();
 		},
-		...mapActions("modals", ["closeCurrentModal"])
+		turnOnNightmode: () => {
+			document
+				.getElementsByTagName("body")[0]
+				.classList.add("night-mode");
+		},
+		turnOffNightmode: () => {
+			document
+				.getElementsByTagName("body")[0]
+				.classList.remove("night-mode");
+		},
+		...mapActions("modals", ["closeCurrentModal"]),
+		...mapActions("user/preferences", ["changeNightmode"])
 	},
 	watch: {
 		socketConnected: connected => {
@@ -68,16 +80,18 @@ export default {
 						}
 					});
 			}
+		},
+		nightmode(nightmode) {
+			if (nightmode) this.turnOnNightmode();
+			else this.turnOffNightmode();
 		}
 	},
 	beforeMount() {
 		const nightmode =
 			false || JSON.parse(localStorage.getItem("nightmode"));
-		if (nightmode) {
-			document
-				.getElementsByTagName("body")[0]
-				.classList.add("night-mode");
-		}
+		this.changeNightmode(nightmode);
+		if (nightmode) this.turnOnNightmode();
+		else this.turnOffNightmode();
 	},
 	mounted() {
 		document.onkeydown = ev => {

frontend/components/User/Settings.vue

@@ -54,6 +54,14 @@
 					</button>
 				</p>
 			</div>
+			<label v-if="password" class="label">Use nightmode</label>
+			<div v-if="password" class="control is-grouped">
+				<input
+					:checked="nightmode"
+					type="checkbox"
+					@click="toggleNightmode()"
+				/>
+			</div>
 
 			<label v-if="!password" class="label">Add password</label>
 			<div v-if="!password" class="control is-grouped">
@@ -147,7 +155,7 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState, mapActions } from "vuex";
 
 import Toast from "toasters";
 
@@ -172,7 +180,8 @@ export default {
 		};
 	},
 	computed: mapState({
-		userId: state => state.user.auth.userId
+		userId: state => state.user.auth.userId,
+		nightmode: state => state.user.preferences.nightmode
 	}),
 	mounted() {
 		lofig.get("serverDomain").then(serverDomain => {
@@ -358,7 +367,12 @@ export default {
 			this.socket.emit(`users.removeSessions`, this.userId, res => {
 				new Toast({ content: res.message, timeout: 4000 });
 			});
-		}
+		},
+		toggleNightmode() {
+			localStorage.setItem("nightmode", !this.nightmode);
+			this.changeNightmode(!this.nightmode);
+		},
+		...mapActions("user/preferences", ["changeNightmode"])
 	}
 };
 </script>

frontend/store/modules/user.js

@@ -216,6 +216,22 @@ const modules = {
 				state.editing = id;
 			}
 		}
+	},
+	preferences: {
+		namespaced: true,
+		state: {
+			nightmode: true
+		},
+		actions: {
+			changeNightmode: ({ commit }, nightmode) => {
+				commit("changeNightmode", nightmode);
+			}
+		},
+		mutations: {
+			changeNightmode(state, nightmode) {
+				state.nightmode = nightmode;
+			}
+		}
 	}
 };