@skillpet/circuit 0.5.2 → 0.6.0

package/dist/circuit.bundle.js

@@ -14387,6 +14387,7 @@ var Circuit = (() => {
     BusLine: () => BusLine,
     Button: () => Button,
     CPE: () => CPE,
+    CSS_VARS: () => CSS_VARS,
     Capacitor: () => Capacitor,
     Capacitor2: () => Capacitor2,
     CapacitorTrim: () => CapacitorTrim,
@@ -30565,15 +30566,37 @@ var Circuit = (() => {
       lw: 1.5
     }
   };
+  var CSS_VARS = {
+    bg: "--circuit-bg",
+    stroke: "--circuit-stroke",
+    fill: "--circuit-fill",
+    text: "--circuit-text",
+    font: "--circuit-font",
+    lw: "--circuit-lw"
+  };
+  function readCssTheme() {
+    if (typeof getComputedStyle === "undefined") return { ...BUILTIN_THEMES.light };
+    const s = getComputedStyle(document.documentElement);
+    const v = (name) => s.getPropertyValue(name).trim();
+    return {
+      bg: v(CSS_VARS.bg) || "transparent",
+      stroke: v(CSS_VARS.stroke) || BUILTIN_THEMES.light.stroke,
+      fill: v(CSS_VARS.fill) || "none",
+      text: v(CSS_VARS.text) || BUILTIN_THEMES.light.text,
+      font: v(CSS_VARS.font) || BUILTIN_THEMES.light.font,
+      lw: parseFloat(v(CSS_VARS.lw)) || BUILTIN_THEMES.light.lw
+    };
+  }
   function resolveTheme(theme2) {
     if (theme2 === void 0) {
       return { ...BUILTIN_THEMES.light };
     }
     if (typeof theme2 === "string") {
+      if (theme2 === "auto") return readCssTheme();
       const found = BUILTIN_THEMES[theme2];
       if (!found) {
         throw new Error(
-          `Unknown theme "${theme2}". Available: ${Object.keys(BUILTIN_THEMES).join(", ")}`
+          `Unknown theme "${theme2}". Available: ${Object.keys(BUILTIN_THEMES).join(", ")}, auto`
         );
       }
       return { ...found };
@@ -30794,6 +30817,9 @@ var Circuit = (() => {
       __publicField(this, "_theme");
       __publicField(this, "_destroyed", false);
       __publicField(this, "_tooltipEl", null);
+      __publicField(this, "_autoObserver", null);
+      __publicField(this, "_mediaQuery", null);
+      __publicField(this, "_mediaHandler", null);
       __publicField(this, "_boundClick");
       __publicField(this, "_boundMouseover");
       __publicField(this, "_boundMouseout");
@@ -30811,6 +30837,42 @@ var Circuit = (() => {
       this._render();
       this._bindEvents();
       this._initTooltip();
+      this._initAutoTheme();
+    }
+    _isAutoTheme() {
+      return (this._opts.theme ?? this._json.theme) === "auto";
+    }
+    _initAutoTheme() {
+      if (!this._isAutoTheme()) return;
+      const rerender = () => {
+        if (this._destroyed) return;
+        this._theme = resolveTheme("auto");
+        this._unbindEvents();
+        this._render();
+        this._bindEvents();
+        this._selectedId = null;
+      };
+      this._autoObserver = new MutationObserver(rerender);
+      this._autoObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["class", "data-theme", "data-color-mode", "style"]
+      });
+      if (typeof matchMedia !== "undefined") {
+        this._mediaQuery = matchMedia("(prefers-color-scheme: dark)");
+        this._mediaHandler = rerender;
+        this._mediaQuery.addEventListener("change", this._mediaHandler);
+      }
+    }
+    _teardownAutoTheme() {
+      if (this._autoObserver) {
+        this._autoObserver.disconnect();
+        this._autoObserver = null;
+      }
+      if (this._mediaQuery && this._mediaHandler) {
+        this._mediaQuery.removeEventListener("change", this._mediaHandler);
+        this._mediaQuery = null;
+        this._mediaHandler = null;
+      }
     }
     _render() {
       const svgString = renderFromJson(this._json, this._opts);
@@ -31044,9 +31106,11 @@ var Circuit = (() => {
       this._selectedId = null;
     }
     setTheme(theme2) {
+      this._teardownAutoTheme();
       this._opts = { ...this._opts, theme: theme2 };
       this._theme = resolveTheme(theme2);
       this.update(this._json);
+      this._initAutoTheme();
     }
     update(json) {
       const circuit = typeof json === "string" ? JSON.parse(json) : json;
@@ -31060,6 +31124,7 @@ var Circuit = (() => {
       if (this._destroyed) return;
       this._destroyed = true;
       this._unbindEvents();
+      this._teardownAutoTheme();
       if (this._tooltipEl) {
         this._tooltipEl.remove();
         this._tooltipEl = null;