Refactor

src/client/app/init.ts

@@ -49,48 +49,6 @@ Vue.mixin({
 	}
 });
 
-// Dark/Light
-const bus = new Vue();
-Vue.mixin({
-	data() {
-		return {
-			_darkmode_: localStorage.getItem('darkmode') == 'true'
-		};
-	},
-	beforeCreate() {
-		// なぜか警告が出るので
-		this._darkmode_ = localStorage.getItem('darkmode') == 'true';
-	},
-	beforeDestroy() {
-		bus.$off('updated', this._onDarkmodeUpdated_);
-	},
-	mounted() {
-		this._onDarkmodeUpdated_(this._darkmode_);
-		bus.$on('updated', this._onDarkmodeUpdated_);
-	},
-	methods: {
-		_updateDarkmode_(v) {
-			localStorage.setItem('darkmode', v.toString());
-			if (v) {
-				document.documentElement.setAttribute('data-darkmode', 'true');
-			} else {
-				document.documentElement.removeAttribute('data-darkmode');
-			}
-			bus.$emit('updated', v);
-		},
-		_onDarkmodeUpdated_(v) {
-			if (!this.$el || !this.$el.setAttribute) return;
-			if (v) {
-				this.$el.setAttribute('data-darkmode', 'true');
-			} else {
-				this.$el.removeAttribute('data-darkmode');
-			}
-			this._darkmode_ = v;
-			this.$forceUpdate();
-		}
-	}
-});
-
 /**
  * APP ENTRY POINT!
  */
@@ -141,6 +99,43 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
 		const launch = (router: VueRouter, api?: (os: MiOS) => API) => {
 			os.apis = api ? api(os) : null;
 
+			//#region Dark/Light
+			Vue.mixin({
+				data() {
+					_unwatchDarkmode_: null
+				},
+				created() {
+					const apply = v => {
+						if (this.$el.setAttribute == null) return;
+						if (v) {
+							this.$el.setAttribute('data-darkmode', 'true');
+						} else {
+							this.$el.removeAttribute('data-darkmode');
+						}
+					};
+
+					this.$nextTick(() => apply(os.store.state.device.darkmode));
+
+					this._unwatchDarkmode_ = os.store.watch(s => {
+						return s.device.darkmode;
+					}, apply);
+				},
+				beforeDestroy() {
+					this._unwatchDarkmode_();
+				}
+			});
+
+			os.store.watch(s => {
+				return s.device.darkmode;
+			}, v => {
+				if (v) {
+					document.documentElement.setAttribute('data-darkmode', 'true');
+				} else {
+					document.documentElement.removeAttribute('data-darkmode');
+				}
+			});
+			//#endregion
+
 			Vue.mixin({
 				data() {
 					return {