From 9937e7d98874d991f42312eb630620db1ac7f415 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 22 Mar 2020 18:39:37 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=80=E3=83=BC=E3=82=AF=E3=83=A2=E3=83=BC?=
 =?UTF-8?q?=E3=83=89=E3=81=AE=E5=90=8C=E6=9C=9F=E3=82=92=E5=BC=B7=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app.vue                       | 5 -----
 src/client/init.ts                       | 6 ++++++
 src/client/scripts/is-device-darkmode.ts | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/client/app.vue b/src/client/app.vue
index 5a3808226..b47c092ed 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 f1790ac4d..d7b693e4c 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 21c26823c..854f38e51 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;
 }