1.0.14

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-element",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-element",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "private": false,
   "description": "a custom element class extending lit element class",
   "main": "dist_ts/index.js",

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);
+      domtools.DomTools.setupDomTools().then(async (domtools) => {
+        await domtools.domReady.promise;
+        document.body.style.setProperty(newTriplet.cssVarName, newTriplet.darkValue);
+      });
+      returnCssVar = newTriplet.cssVarName;
     }
-      this.dbVarTripletStore.push(newTriplet)
-      document.onreadystatechange = () => {
-        document.body?.style?.setProperty(newTriplet.cssVarName, newTriplet.darkValue);
-      }
-      return plugins.litElement.unsafeCSS(newTriplet.cssVarName);
-    }
+    return plugins.litElement.unsafeCSS(`var(${returnCssVar})`);
   }
 
   public cssGridColumns = (amountOfColumnsArg: number, gapSizeArg: number): CSSResult => {