1.0.74

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-domtools",
-  "version": "1.0.72",
+  "version": "1.0.74",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-domtools",
-  "version": "1.0.72",
+  "version": "1.0.74",
   "private": false,
   "description": "tools to simplify complex css structures",
   "main": "dist_ts/index.js",

ts/domtools.classes.thememanager.ts

@@ -6,12 +6,22 @@ export class ThemeManager {
   public domtoolsRef: DomTools;
   
   public goBrightBoolean = false;
+  public preferredColorSchemeMediaMatch = window.matchMedia('(prefers-color-scheme: light)');
 
   constructor(domtoolsRefArg: DomTools) {
     this.domtoolsRef = domtoolsRefArg;
+
+    // lets take care of elements being added that need to know of the current theme
     this.domtoolsRef.elementInstrumenter.connectedElements.eventSubject.subscribe(async eventData => {
       await this.setThemeStatusForElement(eventData.payload, this.goBrightBoolean);
     });
+
+    // lets care
+    this.goBrightBoolean = this.preferredColorSchemeMediaMatch.matches;
+    this.preferredColorSchemeMediaMatch.addEventListener('change', eventArg => {
+      this.goBrightBoolean = eventArg.matches;
+      this.updateAllConnectedElements();
+    });
   }
 
   private async setThemeStatusForElement (elementArg: LitElement, goBrightBool: boolean) {

ts/domtools.elementbasic.ts

@@ -10,7 +10,7 @@ import { html, LitElement } from 'lit-element';
 export const styles = html`
   <style>
     * {
-      transition: background 0.2s, color 0.1s;
+      transition: background 0.1s, color 0.1s;
       font-family: 'Roboto', sans-serif;
       box-sizing: border-box;
     }