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

format

Browse Source
This commit is contained in:
SrGooglo 2025-04-10 18:21:08 +00:00
parent 682d3828be
commit 5bb02aaa64
1 changed files with 45 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
packages/app/src/cores/style/style.core.jsx
View File

@ -11,7 +11,8 @@ const variantToAlgorithm = {
dark: theme.darkAlgorithm, dark: theme.darkAlgorithm,
} }
const ClientPrefersDark = () => window.matchMedia("(prefers-color-scheme: dark)") const ClientPrefersDark = () =>
window.matchMedia("(prefers-color-scheme: dark)")
function variantKeyToColor(key) { function variantKeyToColor(key) {
if (key == "auto") { if (key == "auto") {
@ -25,7 +26,6 @@ function variantKeyToColor(key) {
return key return key
} }
export class ThemeProvider extends React.Component { export class ThemeProvider extends React.Component {
state = { state = {
useAlgorigthm: variantKeyToColor(app.cores.style.currentVariantKey), useAlgorigthm: variantKeyToColor(app.cores.style.currentVariantKey),
@ -37,7 +37,7 @@ export class ThemeProvider extends React.Component {
this.setState({ this.setState({
useAlgorigthm: variantKeyToColor(app.cores.style.currentVariantKey), useAlgorigthm: variantKeyToColor(app.cores.style.currentVariantKey),
useCompactMode: update["compact-mode"] useCompactMode: update["compact-mode"],
}) })
} }
@ -58,19 +58,19 @@ export class ThemeProvider extends React.Component {
themeAlgorithms.push(theme.compactAlgorithm) themeAlgorithms.push(theme.compactAlgorithm)
} }
return <ConfigProvider return (
theme={{ <ConfigProvider
token: { theme={{
...app.cores.style.getVar(), token: {
}, ...app.cores.style.getVar(),
algorithm: themeAlgorithms, },
}} algorithm: themeAlgorithms,
componentSize={ }}
app.isMobile ? "large" : "middle" componentSize={app.isMobile ? "large" : "middle"}
} >
> {this.props.children}
{this.props.children} </ConfigProvider>
</ConfigProvider> )
} }
} }
@ -83,9 +83,12 @@ export default class StyleCore extends Core {
static defaultVariantKey = "auto" static defaultVariantKey = "auto"
static get rootVariables() { static get rootVariables() {
let attributes = document.documentElement.getAttribute("style").trim().split(";") let attributes = document.documentElement
.getAttribute("style")
.trim()
.split(";")
attributes = attributes.slice(0, (attributes.length - 1)) attributes = attributes.slice(0, attributes.length - 1)
attributes = attributes.map((variable) => { attributes = attributes.map((variable) => {
let [key, value] = variable.split(":") let [key, value] = variable.split(":")
@ -107,7 +110,7 @@ export default class StyleCore extends Core {
isOnTemporalVariant = false isOnTemporalVariant = false
// modifications // modifications
static get storagedModifications() { static get storagedModifications() {
return store.get(StyleCore.modificationStorageKey) ?? {} return store.get(StyleCore.modificationStorageKey) ?? {}
} }
@ -149,12 +152,14 @@ export default class StyleCore extends Core {
} }
// apply variation // apply variation
this.applyVariant(StyleCore.storagedVariantKey ?? StyleCore.defaultVariantKey) this.applyVariant(
StyleCore.storagedVariantKey ?? StyleCore.defaultVariantKey,
)
// if mobile set fontScale to 1 // if mobile set fontScale to 1
if (app.isMobile) { if (app.isMobile) {
this.applyStyles({ this.applyStyles({
fontScale: 1 fontScale: 1,
}) })
} }
@ -181,7 +186,10 @@ export default class StyleCore extends Core {
} }
} }
return StyleCore.storagedModifications[key] || this.public.theme.defaultVars[key] return (
StyleCore.storagedModifications[key] ||
this.public.theme.defaultVars[key]
)
} }
getDefaultVar(key) { getDefaultVar(key) {
@ -201,11 +209,14 @@ export default class StyleCore extends Core {
this.public.mutation = { this.public.mutation = {
...this.public.theme.defaultVars, ...this.public.theme.defaultVars,
...this.public.mutation, ...this.public.mutation,
...update ...update,
} }
Object.keys(this.public.mutation).forEach(key => { Object.keys(this.public.mutation).forEach((key) => {
document.documentElement.style.setProperty(`--${key}`, this.public.mutation[key]) document.documentElement.style.setProperty(
`--${key}`,
this.public.mutation[key],
)
}) })
app.eventBus.emit("style.update", { app.eventBus.emit("style.update", {
@ -213,7 +224,10 @@ export default class StyleCore extends Core {
}) })
} }
applyVariant = (variantKey = (this.public.theme.defaultVariant ?? "light"), save = true) => { applyVariant = (
variantKey = this.public.theme.defaultVariant ?? "light",
save = true,
) => {
if (save) { if (save) {
StyleCore.storagedVariantKey = variantKey StyleCore.storagedVariantKey = variantKey
this.public.currentVariantKey = variantKey this.public.currentVariantKey = variantKey
@ -253,8 +267,11 @@ export default class StyleCore extends Core {
resetToDefault() { resetToDefault() {
store.remove(StyleCore.modificationStorageKey) store.remove(StyleCore.modificationStorageKey)
app.cores.settings.set("colorPrimary", this.public.theme.defaultVars.colorPrimary) app.cores.settings.set(
"colorPrimary",
this.public.theme.defaultVars.colorPrimary,
)
this.onInitialize() this.onInitialize()
} }
} }