mirror of
https://github.com/paricafe/misskey.git
synced 2024-11-25 06:16:42 -06:00
ダークモード情報をアカウントではなくブラウザに保存するように
This commit is contained in:
parent
d2d3a7d52b
commit
08b8d829f9
4 changed files with 34 additions and 31 deletions
|
@ -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
|
||||
|
|
|
@ -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');
|
||||
},
|
||||
|
|
|
@ -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_);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in a new issue