RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

handle auto color scheme

Browse Source
This commit is contained in:
srgooglo 2022-05-31 01:29:09 +02:00
parent 34370e0a46
commit 47580444a6
1 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/app/src/cores/style/index.jsx
View File

@ -12,9 +12,11 @@ export default class StyleCore extends Core {
currentVariant = null currentVariant = null
events = { events = {
"app.autoDarkMode": (value) => { "app.autoDarkModeToogle": (value) => {
if (value === true) { if (value === true) {
this.handleAutoColorScheme() this.handleAutoColorScheme()
}else {
this.applyVariant(this.getStoragedVariant())
} }
}, },
"theme.applyVariant": (value) => { "theme.applyVariant": (value) => {
@ -33,7 +35,7 @@ export default class StyleCore extends Core {
publicMethods = { publicMethods = {
style: this style: this
} }
static get currentVariant() { static get currentVariant() {
return document.documentElement.style.getPropertyValue("--themeVariant") return document.documentElement.style.getPropertyValue("--themeVariant")
} }
@ -41,10 +43,10 @@ export default class StyleCore extends Core {
handleAutoColorScheme() { handleAutoColorScheme() {
const prefered = window.matchMedia("(prefers-color-scheme: light)") const prefered = window.matchMedia("(prefers-color-scheme: light)")
if (window.app.settings.get("app.auto_darkMode") && !prefered.matches) { if (!prefered.matches) {
this.applyVariant("dark") this.applyVariant("dark")
}else { } else {
this.applyVariant("false") this.applyVariant("light")
} }
} }
@ -78,8 +80,16 @@ export default class StyleCore extends Core {
this.applyVariant(variantKey) this.applyVariant(variantKey)
// handle auto prefered color scheme // handle auto prefered color scheme
if (window.app.settings.get("app.auto_darkMode")) { window.matchMedia("(prefers-color-scheme: light)").addListener(() => {
window.matchMedia("(prefers-color-scheme: light)").addListener(this.handleAutoColorScheme) console.log(`[THEME] Auto color scheme changed`)
if (window.app.settings.get("auto_darkMode")) {
this.handleAutoColorScheme()
}
})
if (window.app.settings.get("auto_darkMode")) {
this.handleAutoColorScheme()
} }
} }