From a3ab19e5dbbd9cf4852c6303ea67e6416a9a3dce Mon Sep 17 00:00:00 2001 From: Philipp Kunz Date: Tue, 19 Apr 2022 10:50:31 +0200 Subject: [PATCH] fix(core): update --- ts/dees-element.classes.cssmanager.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/ts/dees-element.classes.cssmanager.ts b/ts/dees-element.classes.cssmanager.ts index a4fd8a7..a3dc7e6 100644 --- a/ts/dees-element.classes.cssmanager.ts +++ b/ts/dees-element.classes.cssmanager.ts @@ -46,6 +46,16 @@ export class CssManager { public bdTheme(brightValueArg: string, darkValueArg: string): CSSResult { let returnCssVar: string; + + // lets determine the default value for quick page rendering. + let defaultValue: string; + if (domtools.DomTools.getGlobalDomToolsSync()) { + defaultValue = domtools.DomTools.getGlobalDomToolsSync().themeManager.goBrightBoolean ? brightValueArg : darkValueArg; + } else { + defaultValue = darkValueArg + } + + const existingTriplet = this.bdVarTripletStore.find( (tripletArg) => tripletArg.darkValue === darkValueArg && tripletArg.brightValue === brightValueArg @@ -59,16 +69,17 @@ export class CssManager { darkValue: darkValueArg, }; this.bdVarTripletStore.push(newTriplet); + this.domtoolsPromise.then(async (domtoolsArg) => { await domtoolsArg.domReady.promise; document.body.style.setProperty( newTriplet.cssVarName, - domtoolsArg.themeManager.goBrightBoolean ? newTriplet.brightValue : newTriplet.darkValue + defaultValue ); }); returnCssVar = newTriplet.cssVarName; } - return plugins.lit.unsafeCSS(`var(${returnCssVar}, ${darkValueArg})`); + return plugins.lit.unsafeCSS(`var(${returnCssVar}, ${defaultValue})`); } public cssGridColumns = (amountOfColumnsArg: number, gapSizeArg: number): CSSResult => {