Option to follow system dark theme (9141f44e) · Commits · OpenFlexure / openflexure-microscope-server

src/App.vue

+48 −3

Original line number	Diff line number	Diff line
		@@ -27,22 +27,67 @@ export default {
		},

		data: function() {
		return {};
		return {
		systemDark: undefined,
		themeObserver: undefined
		};
		},

		computed: {
		isSystemDark: function() {
		if (
		window.matchMedia &&
		window.matchMedia("(prefers-color-scheme: dark)").matches
		) {
		return true;
		} else {
		return false;
		}
		},
		handleTheme: function() {
		var isDark = false;
		if (this.$store.state.globalSettings.appTheme == "dark") {
		isDark = true;
		} else if (this.$store.state.globalSettings.appTheme == "system") {
		if (this.systemDark) {
		isDark = true;
		}
		}
		return {
		"uk-light": this.$store.state.globalSettings.darkMode,
		"uk-background-secondary": this.$store.state.globalSettings.darkMode
		"uk-light": isDark,
		"uk-background-secondary": isDark
		};
		}
		},

		mounted() {
		// Query CSS dark theme preference
		var mql = window.matchMedia("(prefers-color-scheme: dark)");
		// Check for system dark theme when mounted
		if (mql.matches) {
		this.systemDark = true;
		}
		// Create a theme observer to watch for changes
		this.themeObserver = mql.addListener(e => {
		if (e.matches) {
		this.systemDark = true;
		} else {
		this.systemDark = false;
		}
		});
		},

		created: function() {
		window.addEventListener("beforeunload", this.handleExit);
		},

		beforeDestroy: function() {
		// Disconnect the theme observer
		if (this.themeObserver) {
		this.themeObserver.disconnect();
		}
		},

		methods: {
		handleExit: function() {
		console.log("Triggered beforeunload");

+15 −11

Original line number	Diff line number	Diff line
		<template>
		<div id="appSettings">
		<p>
		<label
		><input v-model="darkMode" class="uk-checkbox" type="checkbox" /> Enable
		dark theme</label
		>
		<label>
		Theme
		<select v-model="appTheme" class="uk-select">
		<option value="light">Light</option>
		<option value="dark">Dark</option>
		<option value="system">System</option>
		</select>
		</label>
		</p>
		</div>
		</template>
		@@ -19,26 +23,26 @@ export default {
		},

		computed: {
		darkMode: {
		appTheme: {
		get() {
		return this.$store.state.globalSettings.darkMode;
		return this.$store.state.globalSettings.appTheme;
		},
		set(value) {
		this.$store.commit("changeSetting", ["darkMode", value]);
		this.$store.commit("changeSetting", ["appTheme", value]);
		}
		}
		},

		watch: {
		darkMode() {
		console.log("Saving darkmode setting");
		this.setLocalStorageObj("darkMode", this.darkMode);
		appTheme() {
		console.log("Saving appTheme setting");
		this.setLocalStorageObj("appTheme", this.appTheme);
		}
		},

		mounted() {
		// Try loading settings from localStorage. If null, don't change.
		this.darkMode = this.getLocalStorageObj("darkMode") \|\| this.darkMode;
		this.appTheme = this.getLocalStorageObj("appTheme") \|\| this.appTheme;
		}
		};
		</script>

+1 −1

Original line number	Diff line number	Diff line
		@@ -14,7 +14,7 @@ export default new Vuex.Store({
		disableStream: false,
		autoGpuPreview: false,
		trackWindow: true,
		darkMode: false
		appTheme: "system"
		}
		},