RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 03:24:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve variant getter

Browse Source
This commit is contained in:
SrGooglo 2023-05-28 01:28:55 +00:00
parent da5f1e29d0
commit 4f4f01ce83
1 changed files with 17 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,7 +65,7 @@ export class ThemeProvider extends React.Component {
export default class StyleCore extends Core { export default class StyleCore extends Core {
static refName = "style" static refName = "style"
static namespace = "style" static namespace = "style"
static themeManifestStorageKey = "theme" static themeManifestStorageKey = "theme"
@ -102,6 +102,16 @@ export default class StyleCore extends Core {
return store.get(StyleCore.modificationStorageKey) ?? {} return store.get(StyleCore.modificationStorageKey) ?? {}
} }
static get variant() {
if (window.app.cores.settings.is("style.auto_darkMode", true)) {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
return "dark"
}
}
return StyleCore.storagedVariant
}
async onInitialize() { async onInitialize() {
if (StyleCore.storagedTheme) { if (StyleCore.storagedTheme) {
// TODO: Start remote theme loader // TODO: Start remote theme loader
@ -123,29 +133,23 @@ export default class StyleCore extends Core {
} }
// apply variation // apply variation
this.applyVariant(variantKey) this.applyVariant(StyleCore.variant)
// handle auto prefered color scheme // handle auto prefered color scheme
window.matchMedia("(prefers-color-scheme: light)").addListener(() => { window.matchMedia("(prefers-color-scheme: light)").addListener(() => {
console.log(`[THEME] Auto color scheme changed`) console.log(`[THEME] Auto color scheme changed`)
if (window.app.cores.settings.get("style.auto_darkMode")) { this.applyVariant(StyleCore.variant)
this.handleAutoColorScheme()
}
}) })
if (window.app.cores.settings.get("style.auto_darkMode")) {
this.handleAutoColorScheme()
}
} }
onEvents = { onEvents = {
"style.autoDarkModeToogle": (value) => { "style.autoDarkModeToogle": (value) => {
if (value === true) { if (value === true) {
this.handleAutoColorScheme() return this.applyVariant(StyleCore.variant)
} else {
this.applyVariant(StyleCore.storagedVariant)
} }
return this.applyVariant(StyleCore.variant)
} }
} }
@ -158,6 +162,7 @@ export default class StyleCore extends Core {
setDefault: () => this.setDefault(), setDefault: () => this.setDefault(),
update: (...args) => this.update(...args), update: (...args) => this.update(...args),
applyVariant: (...args) => this.applyVariant(...args), applyVariant: (...args) => this.applyVariant(...args),
applyInitialVariant: () => this.applyVariant(StyleCore.variant),
compactMode: (value = !window.app.cores.settings.get("style.compactMode")) => { compactMode: (value = !window.app.cores.settings.get("style.compactMode")) => {
if (value) { if (value) {
return this.update({ return this.update({
@ -245,14 +250,4 @@ export default class StyleCore extends Core {
this.update(values) this.update(values)
} }
handleAutoColorScheme() {
const prefered = window.matchMedia("(prefers-color-scheme: light)")
if (!prefered.matches) {
this.applyVariant("dark")
} else {
this.applyVariant("light")
}
}
} }