handle auto prefered color scheme

This commit is contained in:
srgooglo 2022-05-31 01:09:24 +02:00
parent 8590a364d2
commit 78a7ac018d

View File

@ -12,6 +12,11 @@ export default class StyleCore extends Core {
currentVariant = null
events = {
"app.autoDarkMode": (value) => {
if (value === true) {
this.handleAutoColorScheme()
}
},
"theme.applyVariant": (value) => {
this.applyVariant(value)
this.setVariant(value)
@ -28,11 +33,21 @@ export default class StyleCore extends Core {
publicMethods = {
style: this
}
static get currentVariant() {
return document.documentElement.style.getPropertyValue("--themeVariant")
}
handleAutoColorScheme() {
const prefered = window.matchMedia("(prefers-color-scheme: light)")
if (window.app.settings.get("app.auto_darkMode") && !prefered.matches) {
this.applyVariant("dark")
}else {
this.applyVariant("false")
}
}
initialize = async () => {
let theme = this.getStoragedTheme()
@ -61,6 +76,11 @@ export default class StyleCore extends Core {
// apply variation
this.applyVariant(variantKey)
// handle auto prefered color scheme
if (window.app.settings.get("app.auto_darkMode")) {
window.matchMedia("(prefers-color-scheme: light)").addListener(this.handleAutoColorScheme)
}
}
getRootVariables = () => {