From 08b8d829f9514fc2cb7a7e5da88831e2a9e376f4 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 22 Apr 2018 17:28:21 +0900 Subject: ダークモード情報をアカウントではなくブラウザに保存するように MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/app/init.ts | 45 +++++++++++++++++++++++++-------------------- 1 file changed, 25 insertions(+), 20 deletions(-) (limited to 'src/client/app/init.ts') diff --git a/src/client/app/init.ts b/src/client/app/init.ts index 461093488d..2f79e6cab1 100644 --- a/src/client/app/init.ts +++ b/src/client/app/init.ts @@ -61,39 +61,44 @@ Vue.mixin({ }); // Dark/Light +const bus = new Vue(); Vue.mixin({ data() { return { - _darkmode_: false + _darkmode_: localStorage.getItem('darkmode') == 'true' }; }, beforeCreate() { - // なぜか警告が出るため - this._darkmode_ = false; + // なぜか警告が出るので + this._darkmode_ = localStorage.getItem('darkmode') == 'true'; + }, + beforeDestroy() { + bus.$off('updated', this._onDarkmodeUpdated_); }, mounted() { - const set = () => { - if (!this.$el || !this.$el.setAttribute || !this.os || !this.os.i) return; - if (this.os.i.clientSettings.dark) { + this._onDarkmodeUpdated_(this._darkmode_); + bus.$on('updated', this._onDarkmodeUpdated_); + }, + methods: { + _updateDarkmode_(v) { + localStorage.setItem('darkmode', v.toString()); + bus.$emit('updated', v); + if (v) { document.documentElement.setAttribute('data-darkmode', 'true'); - this.$el.setAttribute('data-darkmode', 'true'); - this._darkmode_ = true; - this.$forceUpdate(); } else { document.documentElement.removeAttribute('data-darkmode'); + } + }, + _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_ = false; - this.$forceUpdate(); } - }; - - set(); - - this.$watch('os.i.clientSettings', i => { - set(); - }, { - deep: true - }); + this._darkmode_ = v; + this.$forceUpdate(); + } } }); -- cgit v1.2.3-freya