diff --git a/src/client/app/boot.js b/src/client/app/boot.js index 8a79880fb..f5a1afec6 100644 --- a/src/client/app/boot.js +++ b/src/client/app/boot.js @@ -61,11 +61,8 @@ } // Dark/Light - const me = JSON.parse(localStorage.getItem('me') || null); - if (me && me.clientSettings) { - if ((app == 'desktop' && me.clientSettings.dark) || (app == 'mobile' && me.clientSettings.darkMobile)) { - document.documentElement.setAttribute('data-darkmode', 'true'); - } + if (localStorage.getItem('darkmode') == 'true') { + document.documentElement.setAttribute('data-darkmode', 'true'); } // Script version diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue index b5111dabc..9d56042ea 100644 --- a/src/client/app/desktop/views/components/settings.vue +++ b/src/client/app/desktop/views/components/settings.vue @@ -40,7 +40,7 @@
- +
@@ -234,6 +234,7 @@ export default Vue.extend({ version, latestVersion: undefined, checkingForUpdate: false, + darkmode: localStorage.getItem('darkmode') == 'true', enableSounds: localStorage.getItem('enableSounds') == 'true', autoPopout: localStorage.getItem('autoPopout') == 'true', apiViaStream: localStorage.getItem('apiViaStream') ? localStorage.getItem('apiViaStream') == 'true' : true, @@ -257,6 +258,9 @@ export default Vue.extend({ apiViaStream() { localStorage.setItem('apiViaStream', this.apiViaStream ? 'true' : 'false'); }, + darkmode() { + (this as any)._updateDarkmode_(this.darkmode); + }, enableSounds() { localStorage.setItem('enableSounds', this.enableSounds ? 'true' : 'false'); }, diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue index ce7fab22c..2d4d23933 100644 --- a/src/client/app/desktop/views/components/ui.header.account.vue +++ b/src/client/app/desktop/views/components/ui.header.account.vue @@ -88,10 +88,7 @@ export default Vue.extend({ (this as any).os.signout(); }, dark() { - (this as any).api('i/update_client_setting', { - name: 'dark', - value: !(this as any)._darkmode_ - }); + (this as any)._updateDarkmode_(!(this as any)._darkmode_); } } }); diff --git a/src/client/app/init.ts b/src/client/app/init.ts index 461093488..2f79e6cab 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'); - this.$el.removeAttribute('data-darkmode'); - this._darkmode_ = false; - this.$forceUpdate(); } - }; - - set(); - - this.$watch('os.i.clientSettings', i => { - set(); - }, { - deep: true - }); + }, + _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(); + } } });