ダークモードの同期を強化

3 files changed, 7 insertions, 6 deletions

diff --git a/src/client/app.vue b/src/client/app.vue
index 5a38082262..b47c092ed2 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -163,7 +163,6 @@ import { v4 as uuid } from 'uuid';
 import i18n from './i18n';
 import { host, instanceName } from './config';
 import { search } from './scripts/search';
-import { isDeviceDarkmode } from './scripts/is-device-darkmode';
 import MkToast from './components/toast.vue';
 
 const DESKTOP_THRESHOLD = 1100;
@@ -224,10 +223,6 @@ export default Vue.extend({
 	},
 
 	created() {
-		if (this.$store.state.device.syncDeviceDarkMode) {
-			this.$store.commit('device/set', { key: 'darkMode', value: isDeviceDarkmode() });
-		}
-
 		if (this.$store.getters.isSignedIn) {
 			this.connection = this.$root.stream.useSharedConnection('main');
 			this.connection.on('notification', this.onNotification);
diff --git a/src/client/init.ts b/src/client/init.ts
index f1790ac4d9..d7b693e4c8 100644
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -144,6 +144,12 @@ os.init(async () => {
 		}
 	}, false)
 
+	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', mql => {
+		if (os.store.state.device.syncDeviceDarkMode) {
+			os.store.commit('device/set', { key: 'darkMode', value: mql.matches });
+		}
+	});
+
 	if ('Notification' in window && os.store.getters.isSignedIn) {
 		// 許可を得ていなかったらリクエスト
 		if (Notification.permission === 'default') {
diff --git a/src/client/scripts/is-device-darkmode.ts b/src/client/scripts/is-device-darkmode.ts
index 21c26823c7..854f38e517 100644
--- a/src/client/scripts/is-device-darkmode.ts
+++ b/src/client/scripts/is-device-darkmode.ts
@@ -1,3 +1,3 @@
 export function isDeviceDarkmode() {
-	return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+	return window.matchMedia('(prefers-color-scheme: dark)').matches;
 }