@netless/telebox-insider 1.0.0-alpha.34 → 1.0.0-alpha.35

package/dist/telebox-insider.es.js

@@ -1101,7 +1101,7 @@ class TeleBoxManager {
     stageStyle = "",
     defaultBoxBodyStyle = null,
     defaultBoxStageStyle = null,
-    theme = {}
+    theme = null
   } = {}) {
     this.events = new Emittery();
     this._sideEffect = new SideEffectManager();
@@ -1180,6 +1180,9 @@ class TeleBoxManager {
     }));
     const darkMode$ = combine([prefersDark$, prefersColorScheme$], ([prefersDark, prefersColorScheme2]) => prefersColorScheme2 === "auto" ? prefersDark : prefersColorScheme2 === "dark");
     const state$ = combine([minimized$, maximized$], ([minimized2, maximized2]) => minimized2 ? TELE_BOX_STATE.Minimized : maximized2 ? TELE_BOX_STATE.Maximized : TELE_BOX_STATE.Normal);
+    const theme$ = new Val(theme, {
+      compare: shallowequal
+    });
     const readonlyValConfig = {
       darkMode: darkMode$,
       state: state$,
@@ -1199,7 +1202,8 @@ class TeleBoxManager {
       containerStyle: containerStyle$,
       stageStyle: stageStyle$,
       defaultBoxBodyStyle: defaultBoxBodyStyle$,
-      defaultBoxStageStyle: defaultBoxStageStyle$
+      defaultBoxStageStyle: defaultBoxStageStyle$,
+      theme: theme$
     };
     withValueEnhancer(this, valConfig, valManager);
     const closeBtnClassName = this.wrapClassName("titlebar-icon-close");
@@ -1251,8 +1255,14 @@ class TeleBoxManager {
       minimized$.subscribe((minimized2) => {
         this.$container.classList.toggle(this.wrapClassName("is-minimized"), minimized2);
       }),
-      containerStyle$.subscribe((containerStyle2) => {
+      combine([containerStyle$, theme$]).subscribe(([containerStyle2, theme2]) => {
         this.$container.style.cssText = containerStyle2;
+        if (theme2) {
+          Object.keys(theme2).forEach((key) => {
+            var _a;
+            this.$container.style.setProperty(`--tele-${key}`, (_a = theme2[key]) != null ? _a : null);
+          });
+        }
       }),
       stageStyle$.subscribe((stageStyle2) => {
         this.$stage.style.cssText = stageStyle2;
@@ -1469,12 +1479,6 @@ class TeleBoxManager {
     }
     return deletedBoxes;
   }
-  setTheme(theme) {
-    Object.keys(theme).forEach((key) => {
-      var _a;
-      this.$container.style.setProperty(`--tele-${key}`, (_a = theme[key]) != null ? _a : null);
-    });
-  }
   mount(root) {
     this._root$.setValue(root);
   }