Slide 51
Slide 51 text
mounted() {
this.$ons.ready(() => {
// prefersDark.matches=trueͷ߹ɺμʔΫϞʔυ
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)')
// ݱࡏͷϞʔυʹมߋ
this.changeTheme(prefersDark.matches)
// ϞʔυͷมߋΛݕ
prefersDark.addListener((mediaQuery) => this.changeTheme(mediaQuery.matches))
})
},
methods: {
changeTheme(dark) {
// μʔΫϞʔυͷ߹ɺbodyʹ"dark"ΫϥεΛ༩
document.body.classList.toggle('dark', dark)
}
}