1.0.14

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-element",
-  "version": "1.0.12",
+  "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

@@ -1,6 +1,6 @@
 import { CSSResult } from 'lit-element';
 import * as plugins from './dees-element.plugins';
-import * as domtools from 
+import * as domtools from '@designestate/dees-domtools';
 
 export interface IDbVarTriplet {
   cssVarName: string;
@@ -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)
+      this.dbVarTripletStore.push(newTriplet);
-      document.onreadystatechange = () => {
+      domtools.DomTools.setupDomTools().then(async (domtools) => {
+        await domtools.domReady.promise;
         document.body.style.setProperty(newTriplet.cssVarName, newTriplet.darkValue);
-      }
+      });
-      return plugins.litElement.unsafeCSS(newTriplet.cssVarName);
+      returnCssVar = newTriplet.cssVarName;
     }
+    return plugins.litElement.unsafeCSS(`var(${returnCssVar})`);
   }
 
   public cssGridColumns = (amountOfColumnsArg: number, gapSizeArg: number): CSSResult => {