ダークモード情報をアカウントではなくブラウザに保存するように

This commit is contained in:
syuilo 2018-04-22 17:28:21 +09:00
parent d2d3a7d52b
commit 08b8d829f9
4 changed files with 34 additions and 31 deletions

View file

@ -61,12 +61,9 @@
}
// 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)) {
if (localStorage.getItem('darkmode') == 'true') {
document.documentElement.setAttribute('data-darkmode', 'true');
}
}
// Script version
const ver = localStorage.getItem('v') || VERSION;

View file

@ -40,7 +40,7 @@
<button class="ui button" @click="customizeHome" style="margin-bottom: 16px">ホームをカスタマイズ</button>
</div>
<div class="div">
<mk-switch v-model="os.i.clientSettings.dark" @change="onChangeDark" text="ダークモード"/>
<mk-switch v-model="darkmode" text="ダークモード"/>
<mk-switch v-model="os.i.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
</div>
<mk-switch v-model="os.i.clientSettings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="タイムライン上部に投稿フォームを表示する"/>
@ -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');
},

View file

@ -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_);
}
}
});

View file

@ -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._darkmode_ = v;
this.$forceUpdate();
}
};
set();
this.$watch('os.i.clientSettings', i => {
set();
}, {
deep: true
});
}
});