Zergling_man/thedesk
Zergling_man/thedesk
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Switch color with dark mode on macOS

Browse Source
This commit is contained in:
kPherox 2019-04-23 00:10:22 +09:00
parent e0ed4f30b6
commit dc67e851f5
No known key found for this signature in database
GPG Key ID: C04751C2BFA2F62D
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/App.vue
View File

@ -15,17 +15,21 @@ import Welcome from '@/components/Welcome.vue'
}, },
}) })
export default class App extends Vue { export default class App extends Vue {
public color: string = '#2c3e50' public color: string = this.isDarkMode ? 'white' : 'black'
public backgroundColor: string = 'white' public backgroundColor: string = this.isDarkMode ? '#212121' : 'white'
public fontSize: string = '16px' public fontSize: string = '16px'
public get styles(): { [key: string]: string } { public get styles(): { [key: string]: string } {
return { return {
'--color': this.color, '--color': this.color,
'--background-color': this.backgroundColor, '--bg-color': this.backgroundColor,
'--font-size': this.fontSize, '--font-size': this.fontSize,
} }
} }
public get isDarkMode(): boolean {
return remote.systemPreferences.isDarkMode()
}
} }
</script> </script>
@ -42,7 +46,7 @@ body {
} }
#app { #app {
color: var(--color); color: var(--color);
background-color: var(--background-color); background-color: var(--bg-color);
font-size: var(--font-size); font-size: var(--font-size);
text-align: center; text-align: center;