vib/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

テーマの切り替え時に時計の色が変わるように (#5959)

Browse source 
* テーマの切り替え時に時計の色が変わるように

* ディレイを追加
This commit is contained in:
fuyu 2020-02-16 20:20:02 +09:00 committed by GitHub
parent 420eeb4d68
commit 714bcf28d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/client/components/analog-clock.vue
View file

@ -55,15 +55,17 @@ export default Vue.extend({
handsTailLength: 0.7,
hHandLengthRatio: 0.75,
mHandLengthRatio: 1,
sHandLengthRatio: 1
sHandLengthRatio: 1,
computedStyle: getComputedStyle(document.documentElement)
};
},
computed: {
dark(): boolean {
return tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--bg')).isDark();
return tinycolor(this.computedStyle.getPropertyValue('--bg')).isDark();
},
majorGraduationColor(): string {
return this.dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
},
@ -75,10 +77,10 @@ export default Vue.extend({
return this.dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)';
},
mHandColor(): string {
return tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--fg')).toHexString();
return tinycolor(this.computedStyle.getPropertyValue('--fg')).toHexString();
},
hHandColor(): string {
return tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent')).toHexString();
return tinycolor(this.computedStyle.getPropertyValue('--accent')).toHexString();
},
ms(): number {
@ -123,6 +125,16 @@ export default Vue.extend({
}
};
update();
this.$store.subscribe((mutation, state) => {
if (mutation.type !== 'device/set') return;
if (mutation?.payload?.key !== 'theme') return;
setTimeout(() => {
this.computedStyle = getComputedStyle(document.documentElement);
}, 250);
});
},
beforeDestroy() {