diff --git a/ts/dees-element.classes.cssmanager.ts b/ts/dees-element.classes.cssmanager.ts
index 78ce5e5..2ca00e2 100644
--- a/ts/dees-element.classes.cssmanager.ts
+++ b/ts/dees-element.classes.cssmanager.ts
@@ -12,21 +12,24 @@ export class CssManager {
   public dbVarTripletStore: IDbVarTriplet[] = [];
 
   public dbTheme(darkValueArg: string, brightValueArg: string): CSSResult {
+    let returnCssVar: string;
     const existingTriplet = this.dbVarTripletStore.find(tripletArg => tripletArg.darkValue === darkValueArg && tripletArg.brightValue === brightValueArg);
     if (existingTriplet) {
-      return plugins.litElement.unsafeCSS(existingTriplet.cssVarName)
+      returnCssVar = existingTriplet.cssVarName;
     } else {
       const newTriplet: IDbVarTriplet = {
         cssVarName: `--${plugins.isounique.uni()}`,
         brightValue: brightValueArg,
         darkValue: darkValueArg
-      }
-      this.dbVarTripletStore.push(newTriplet)
-      document.onreadystatechange = () => {
-        document.body?.style?.setProperty(newTriplet.cssVarName, newTriplet.darkValue);
-      }
-      return plugins.litElement.unsafeCSS(newTriplet.cssVarName);
+      };
+      this.dbVarTripletStore.push(newTriplet);
+      domtools.DomTools.setupDomTools().then(async (domtools) => {
+        await domtools.domReady.promise;
+        document.body.style.setProperty(newTriplet.cssVarName, newTriplet.darkValue);
+      });
+      returnCssVar = newTriplet.cssVarName;
     }
+    return plugins.litElement.unsafeCSS(`var(${returnCssVar})`);
   }
 
   public cssGridColumns = (amountOfColumnsArg: number, gapSizeArg: number): CSSResult => {