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();
+ }
}
});