@cdfrd/publish-notification-plugin 0.1.1 → 0.1.2

package/dist/index.js

@@ -12,12 +12,13 @@ var MAX_DISMISSED_VERSIONS = 3;
 var STANDALONE_APP_ID = "__standalone__";
 var DEFAULT_PRIMARY_COLOR = "#1677ff";
 var THEME_RETRY_MAX = 3;
-var THEME_WATCH_DEBOUNCE_MS = 150;
+var THEME_WATCH_DEBOUNCE_MS = 32;
+var THEME_BTN_BG_SETTLE_MS = 180;
 var PLACEMENT_STYLES = {
-  topLeft: "top:16px;left:24px",
-  topRight: "top:16px;right:24px",
-  bottomLeft: "bottom:16px;left:24px",
-  bottomRight: "bottom:16px;right:24px"
+  topLeft: "top:24px;left:24px",
+  topRight: "top:24px;right:24px",
+  bottomLeft: "bottom:24px;left:24px",
+  bottomRight: "bottom:24px;right:24px"
 };
 var DEFAULT_CHECK_INTERVAL = 10 * 60 * 1e3;
 
@@ -346,18 +347,18 @@ function ensureNotificationAnchor() {
 var PRESET_LOCALE = {
   zh_CN: {
     title: "\u53D1\u73B0\u65B0\u7248\u672C",
-    description: "\u8BF7\u5237\u65B0\u540E\u7EE7\u7EED\u3002",
+    description: "\u7CFB\u7EDF\u5DF2\u53D1\u5E03\u65B0\u7248\u672C\uFF0C\u5237\u65B0\u9875\u9762\u540E\u751F\u6548\u3002",
     forcedTitle: "\u53D1\u73B0\u65B0\u7248\u672C",
-    forcedDescription: "\u8BF7\u5237\u65B0\u540E\u7EE7\u7EED\u3002",
-    buttonText: "\u5237\u65B0",
+    forcedDescription: "\u7CFB\u7EDF\u5DF2\u53D1\u5E03\u65B0\u7248\u672C\uFF0C\u5237\u65B0\u9875\u9762\u540E\u751F\u6548\u3002",
+    buttonText: "\u7ACB\u5373\u5237\u65B0",
     dismissButtonText: "\u7A0D\u540E"
   },
   en_US: {
-    title: "Update available",
-    description: "Please refresh to continue.",
-    forcedTitle: "Update required",
-    forcedDescription: "Please refresh to continue.",
-    buttonText: "Refresh",
+    title: "New version available",
+    description: "Refresh the page for it to take effect.",
+    forcedTitle: "New version available",
+    forcedDescription: "Refresh the page for it to take effect.",
+    buttonText: "Refresh now",
     dismissButtonText: "Later"
   }
 };
@@ -380,9 +381,9 @@ var DEFAULT_NOTICE_CSS = `
   --update-bg: #ffffff;
   --update-text: rgba(0, 0, 0, 0.88);
   --update-text-secondary: rgba(0, 0, 0, 0.65);
-  --update-border: #f0f0f0;
-  --update-btn-border: #d9d9d9;
-  --update-btn-hover-bg: rgba(0, 0, 0, 0.04);
+  --update-icon-color: rgba(0, 0, 0, 0.45);
+  --update-icon-hover: rgba(0, 0, 0, 0.88);
+  --update-btn-hover-bg: rgba(0, 0, 0, 0.06);
   --update-primary: #1677ff;
   --update-primary-hover: #4096ff;
   --update-mask: rgba(0, 0, 0, 0.45);
@@ -394,8 +395,8 @@ var DEFAULT_NOTICE_CSS = `
   --update-bg: #1f1f1f;
   --update-text: rgba(255, 255, 255, 0.85);
   --update-text-secondary: rgba(255, 255, 255, 0.65);
-  --update-border: #303030;
-  --update-btn-border: #424242;
+  --update-icon-color: rgba(255, 255, 255, 0.45);
+  --update-icon-hover: rgba(255, 255, 255, 0.85);
   --update-btn-hover-bg: rgba(255, 255, 255, 0.08);
   --update-primary: #1668dc;
   --update-primary-hover: #3c89e8;
@@ -416,7 +417,7 @@ var DEFAULT_NOTICE_CSS = `
 }
 
 .cdfrd-update-notice:not(.cdfrd-update-notice--forced) {
-  width: 384px;
+  width: 340px;
 }
 
 .cdfrd-update-notice-panel {
@@ -428,91 +429,102 @@ var DEFAULT_NOTICE_CSS = `
   border-radius: 8px;
   background: var(--update-bg);
   color: var(--update-text);
-  border: 1px solid var(--update-border);
   box-shadow: var(--update-shadow);
 }
 
-.cdfrd-update-notice-header {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  margin-bottom: 4px;
-}
-
 .cdfrd-update-notice-title {
-  flex: 1;
-  min-width: 0;
+  margin: 0;
+  padding-right: 28px;
   font-size: 16px;
   font-weight: 600;
   line-height: 1.5;
   color: var(--update-text);
 }
 
+.cdfrd-update-notice-desc {
+  margin: 4px 0 0;
+  padding-right: 28px;
+  font-size: 14px;
+  line-height: 1.5714;
+  color: var(--update-text-secondary);
+}
+
+/* Close \u2014 slightly larger than default antd notice close */
 .cdfrd-update-notice-close {
-  flex-shrink: 0;
+  position: absolute;
+  top: 14px;
+  right: 16px;
+  z-index: 1;
   cursor: pointer;
-  width: 22px;
-  height: 22px;
+  width: 28px;
+  height: 28px;
   padding: 0;
   border: none;
   border-radius: 4px;
   background: transparent;
-  color: var(--update-text-secondary);
-  font-size: 16px;
-  line-height: 22px;
+  color: var(--update-icon-color);
+  font-size: 20px;
+  line-height: 28px;
+  text-align: center;
 }
 
 .cdfrd-update-notice-close:hover {
-  color: var(--update-text);
+  color: var(--update-icon-hover);
   background: var(--update-btn-hover-bg);
 }
 
-.cdfrd-update-notice-desc {
-  font-size: 14px;
-  line-height: 1.5714;
-  color: var(--update-text-secondary);
-  margin: 0 0 12px;
-}
-
+/* Actions \u2014 float right, margin-top (antd Semantic DOM: actions) */
 .cdfrd-update-notice-actions {
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  flex-wrap: wrap;
   gap: 8px;
+  margin-top: 12px;
 }
 
 .cdfrd-update-notice-btn {
   cursor: pointer;
   font-size: 14px;
   line-height: 1.5714;
-  height: 32px;
-  padding: 4px 15px;
-  border: 1px solid var(--update-btn-border);
-  border-radius: 6px;
-  background: var(--update-bg);
-  color: var(--update-text);
+  height: 24px;
+  padding: 0 7px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
   box-sizing: border-box;
+  white-space: nowrap;
   transition: all 0.2s;
 }
 
-.cdfrd-update-notice-btn:hover {
+/* Text / link button \u2014 weakened secondary action (antd Button type="link" size="small") */
+.cdfrd-update-notice-btn-link {
+  height: auto;
+  padding: 0 4px;
   color: var(--update-primary);
-  border-color: var(--update-primary);
+  background: transparent;
+}
+
+.cdfrd-update-notice-btn-link:hover {
+  color: var(--update-primary-hover);
+  background: transparent;
 }
 
 .cdfrd-update-notice-btn-primary {
+  height: 24px;
+  padding: 0 7px;
   background: var(--update-primary);
-  border-color: var(--update-primary);
   color: #fff;
+  font-size: 14px;
+  border-radius: 4px;
 }
 
 .cdfrd-update-notice-btn-primary:hover {
   background: var(--update-primary-hover);
-  border-color: var(--update-primary-hover);
   color: #fff;
 }
 
-/* Forced centered modal \u2014 Ant Design Modal */
+/* Forced update \u2014 centered card, still notification-like */
 .cdfrd-update-notice--forced {
   inset: 0;
   max-width: none;
@@ -527,23 +539,27 @@ var DEFAULT_NOTICE_CSS = `
 }
 
 .cdfrd-update-notice--forced .cdfrd-update-notice-panel {
-  width: min(416px, 100%);
+  width: max-content;
+  max-width: min(360px, calc(100vw - 48px));
   padding: 20px 24px;
-  border: none;
-  text-align: left;
-}
-
-.cdfrd-update-notice--forced .cdfrd-update-notice-title {
-  margin-bottom: 8px;
 }
 
+.cdfrd-update-notice--forced .cdfrd-update-notice-title,
 .cdfrd-update-notice--forced .cdfrd-update-notice-desc {
-  margin-bottom: 0;
+  padding-right: 0;
 }
 
 .cdfrd-update-notice--forced .cdfrd-update-notice-actions {
-  margin-top: 12px;
-  justify-content: flex-end;
+  margin-top: 16px;
+  justify-content: center;
+}
+
+.cdfrd-update-notice--forced .cdfrd-update-notice-btn-primary {
+  width: auto;
+  height: 24px;
+  padding: 0 7px;
+  border-radius: 4px;
+  font-size: 14px;
 }
 `.trim();
 
@@ -564,6 +580,26 @@ var ANT_PRIMARY_VARS = [
   "--ant-primary-color",
   "--colorPrimary"
 ];
+var ANT_BG_VARS = [
+  "--ant-color-bg-elevated",
+  "--ant-color-bg-container",
+  "--ant-color-bg-base",
+  "--ant-bg-color"
+];
+var SURFACE_SELECTORS = [
+  ".ant-modal-content",
+  ".ant-notification-notice",
+  ".ant-popover-inner",
+  ".ant-card",
+  ".ant-input",
+  ".ant-btn-default"
+];
+var SURFACE_PROBE_CLASSES = [
+  "ant-modal-content",
+  "ant-btn ant-btn-default",
+  "ant-input"
+];
+var DARK_LUMINANCE_THRESHOLD = 0.45;
 function isInvalidColor(color) {
   if (!color) return true;
   const c = color.trim().toLowerCase();
@@ -696,6 +732,138 @@ function resolvePrimaryColorLazy(config, theme, onDone, maxAttempts = THEME_RETR
   };
   run();
 }
+function parseRgbChannels(color) {
+  const trimmed = color.trim();
+  const rgb = trimmed.match(
+    /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*[\d.]+)?\s*\)$/i
+  );
+  if (rgb) return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
+  const hex = trimmed.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (!hex) return null;
+  const h = hex[1];
+  if (h.length === 3) {
+    return [
+      parseInt(h[0] + h[0], 16),
+      parseInt(h[1] + h[1], 16),
+      parseInt(h[2] + h[2], 16)
+    ];
+  }
+  return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+}
+function relativeLuminance(r, g, b) {
+  const toLinear = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+}
+function themeFromBackgroundColor(color) {
+  if (isInvalidColor(color)) return null;
+  const channels = parseRgbChannels(color);
+  if (!channels) return null;
+  return relativeLuminance(...channels) < DARK_LUMINANCE_THRESHOLD ? "dark" : "light";
+}
+function tryResolveDomThemeHint() {
+  if (typeof document === "undefined") return null;
+  const roots = [document.documentElement, document.body].filter(Boolean);
+  for (const el2 of roots) {
+    const dataTheme = el2.dataset.theme || el2.getAttribute("data-theme") || el2.dataset.demoTheme || el2.getAttribute("data-demo-theme");
+    if (dataTheme === "dark" || dataTheme === "light") return dataTheme;
+  }
+  for (const el2 of roots) {
+    if (el2.classList.contains("dark") || el2.classList.contains("ant-theme-dark")) return "dark";
+    if (el2.classList.contains("light") || el2.classList.contains("ant-theme-light")) return "light";
+  }
+  return null;
+}
+function readBgVarFromElement(el2) {
+  try {
+    const style = getComputedStyle(el2);
+    for (const name of ANT_BG_VARS) {
+      const value = style.getPropertyValue(name)?.trim();
+      if (!isInvalidColor(value)) return value;
+    }
+  } catch {
+    return null;
+  }
+  return null;
+}
+function readCssVariableBg() {
+  if (typeof document === "undefined") return null;
+  for (const root of [document.documentElement, document.body]) {
+    if (!root) continue;
+    const value = readBgVarFromElement(root);
+    if (value) return value;
+  }
+  const seeds = document.querySelectorAll(
+    '.ant-btn-primary, .ant-btn, .ant-modal-content, .ant-input, [class*="css-var"]'
+  );
+  for (const seed of seeds) {
+    let el2 = seed;
+    while (el2) {
+      const value = readBgVarFromElement(el2);
+      if (value) return value;
+      el2 = el2.parentElement;
+    }
+  }
+  return null;
+}
+function readExistingSurfaceBg() {
+  if (typeof document === "undefined") return null;
+  for (const selector of SURFACE_SELECTORS) {
+    const node = document.querySelector(selector);
+    if (!node) continue;
+    try {
+      const color = getComputedStyle(node).backgroundColor;
+      if (!isInvalidColor(color)) return color;
+    } catch {
+    }
+  }
+  return null;
+}
+function probeSurfaceBg() {
+  if (typeof document === "undefined" || !document.body) return null;
+  beginSuppressThemeWatch();
+  try {
+    const seed = document.querySelector(
+      ".ant-btn-primary, .ant-btn, .ant-input, .ant-modal-content"
+    );
+    const hashClasses = seed ? Array.from(seed.classList).filter((c) => c.startsWith("css-") || c.includes("css-var")) : [];
+    const mountAt = seed?.closest('[class*="css-var"]') || seed?.parentElement || document.body;
+    for (const className of SURFACE_PROBE_CLASSES) {
+      const tag = className.includes("ant-btn") ? "button" : className.includes("ant-input") ? "input" : "div";
+      const node = document.createElement(tag);
+      node.className = [className, ...hashClasses].filter(Boolean).join(" ");
+      node.setAttribute("aria-hidden", "true");
+      node.style.cssText = "position:absolute;left:0;top:0;opacity:0;pointer-events:none;width:0;height:0;overflow:hidden;";
+      mountAt.appendChild(node);
+      const color = getComputedStyle(node).backgroundColor;
+      node.remove();
+      if (!isInvalidColor(color)) return color;
+    }
+    return null;
+  } catch {
+    return null;
+  } finally {
+    endSuppressThemeWatch();
+  }
+}
+function tryResolveAntdSurfaceBg(options) {
+  try {
+    const allowProbe = options?.allowProbe !== false;
+    const fromVar = readCssVariableBg();
+    if (fromVar) return fromVar;
+    const fromSurface = readExistingSurfaceBg();
+    if (fromSurface) return fromSurface;
+    if (allowProbe) return probeSurfaceBg();
+    return null;
+  } catch {
+    return null;
+  }
+}
+function tryResolveAntdThemeMode(options) {
+  return tryResolveDomThemeHint() ?? themeFromBackgroundColor(tryResolveAntdSurfaceBg(options));
+}
 function isUpdateNoticeMutationTarget(node) {
   if (!node || node.nodeType !== Node.ELEMENT_NODE) return false;
   const el2 = node;
@@ -715,7 +883,7 @@ function mutationsOnlyAffectNotice(mutations) {
     return false;
   });
 }
-function watchThemeChanges(config, getTheme, onChange) {
+function watchThemeChanges(config, getTheme, onChange, onThemeMode) {
   if (typeof document === "undefined") {
     return () => void 0;
   }
@@ -727,39 +895,70 @@ function watchThemeChanges(config, getTheme, onChange) {
     return () => void 0;
   }
   let last = "";
+  let lastThemeMode = null;
   let btnBgCandidate = "";
   let debounceTimer;
   let settleTimer;
+  let rafPending = false;
   const clearTimers = () => {
     if (debounceTimer !== void 0) clearTimeout(debounceTimer);
     if (settleTimer !== void 0) clearTimeout(settleTimer);
     debounceTimer = void 0;
     settleTimer = void 0;
+    rafPending = false;
   };
-  const evaluate = () => {
-    const found = tryResolveAntdPrimaryDetailed({ allowProbe: false });
-    if (!found) return;
+  const applyThemeModeIfChanged = (mode) => {
+    if (!mode || mode === lastThemeMode) return;
+    lastThemeMode = mode;
+    if (mode !== getTheme()) {
+      onThemeMode?.(mode);
+    }
+  };
+  const applyPrimaryIfChanged = (found, opts) => {
     const { color, source } = found;
     if (color === last) {
       btnBgCandidate = "";
-      return;
+      return false;
     }
-    if (source === "btnBg" && color !== btnBgCandidate) {
-      btnBgCandidate = color;
-      if (settleTimer !== void 0) clearTimeout(settleTimer);
-      settleTimer = setTimeout(() => {
-        settleTimer = void 0;
-        evaluate();
-      }, THEME_WATCH_DEBOUNCE_MS);
-      return;
+    if (source === "btnBg" && !opts?.allowUnsettledBtnBg) {
+      if (color !== btnBgCandidate) {
+        btnBgCandidate = color;
+        if (settleTimer !== void 0) clearTimeout(settleTimer);
+        settleTimer = setTimeout(() => {
+          settleTimer = void 0;
+          evaluate({ settlePass: true });
+        }, THEME_BTN_BG_SETTLE_MS);
+        return false;
+      }
     }
     last = color;
     btnBgCandidate = "";
     onChange(color);
+    return true;
+  };
+  const evaluate = (opts) => {
+    let mode = tryResolveAntdThemeMode({ allowProbe: false });
+    if (!mode) mode = tryResolveAntdThemeMode({ allowProbe: true });
+    applyThemeModeIfChanged(mode);
+    const found = tryResolveAntdPrimaryDetailed({ allowProbe: false });
+    if (!found) return;
+    applyPrimaryIfChanged(found, { allowUnsettledBtnBg: opts?.settlePass === true });
   };
   const schedule = (mutations) => {
     if (suppressThemeWatch > 0) return;
     if (mutations && mutationsOnlyAffectNotice(mutations)) return;
+    if (!rafPending) {
+      rafPending = true;
+      scheduleFrame(() => {
+        rafPending = false;
+        if (suppressThemeWatch > 0) return;
+        applyThemeModeIfChanged(tryResolveAntdThemeMode({ allowProbe: false }));
+        const found = tryResolveAntdPrimaryDetailed({ allowProbe: false });
+        if (found?.source === "cssVar") {
+          applyPrimaryIfChanged(found);
+        }
+      });
+    }
     if (debounceTimer !== void 0) clearTimeout(debounceTimer);
     debounceTimer = setTimeout(() => {
       debounceTimer = void 0;
@@ -768,7 +967,13 @@ function watchThemeChanges(config, getTheme, onChange) {
     }, THEME_WATCH_DEBOUNCE_MS);
   };
   const observer = new MutationObserver((mutations) => schedule(mutations));
-  const attrFilter = ["class", "style", "data-theme", "data-update-notice-theme"];
+  const attrFilter = [
+    "class",
+    "style",
+    "data-theme",
+    "data-demo-theme",
+    "data-update-notice-theme"
+  ];
   observer.observe(document.documentElement, {
     attributes: true,
     attributeFilter: attrFilter
@@ -825,6 +1030,18 @@ function applyPrimaryColor(primary) {
     endSuppressThemeWatch();
   }
 }
+function applySurfaceBackground(bg) {
+  beginSuppressThemeWatch();
+  try {
+    document.querySelectorAll(".cdfrd-update-notice").forEach((node) => {
+      const el2 = node;
+      if (bg) el2.style.setProperty("--update-bg", bg);
+      else el2.style.removeProperty("--update-bg");
+    });
+  } finally {
+    endSuppressThemeWatch();
+  }
+}
 function closeDefaultNotice() {
   document.querySelector(".cdfrd-update-notice")?.remove();
   visible = false;
@@ -876,18 +1093,12 @@ function showDefaultNotice(options) {
     actions.appendChild(refreshBtn);
     panel.appendChild(actions);
   } else {
-    const header = el("div", "cdfrd-update-notice-header");
-    header.appendChild(el("div", "cdfrd-update-notice-title", copy.title));
-    const closeBtn = el("button", `cdfrd-update-notice-close ${NOTIFICATION_CLOSE_BTN_CLASS}`, "\xD7");
-    closeBtn.setAttribute("type", "button");
-    closeBtn.setAttribute("aria-label", "close");
-    header.appendChild(closeBtn);
-    panel.appendChild(header);
+    panel.appendChild(el("div", "cdfrd-update-notice-title", copy.title));
     panel.appendChild(el("div", "cdfrd-update-notice-desc", copy.description));
     const actions = el("div", "cdfrd-update-notice-actions");
     const dismissBtn = el(
       "button",
-      `cdfrd-update-notice-btn ${NOTIFICATION_DISMISS_BTN_CLASS}`,
+      `cdfrd-update-notice-btn cdfrd-update-notice-btn-link ${NOTIFICATION_DISMISS_BTN_CLASS}`,
       copy.dismissButtonText
     );
     dismissBtn.setAttribute("type", "button");
@@ -900,6 +1111,10 @@ function showDefaultNotice(options) {
     refreshBtn.setAttribute("type", "button");
     actions.appendChild(refreshBtn);
     panel.appendChild(actions);
+    const closeBtn = el("button", `cdfrd-update-notice-close ${NOTIFICATION_CLOSE_BTN_CLASS}`, "\xD7");
+    closeBtn.setAttribute("type", "button");
+    closeBtn.setAttribute("aria-label", "close");
+    panel.appendChild(closeBtn);
   }
   wrap.appendChild(panel);
   let anchor = document.body.querySelector(`:scope > .cdfrd-update-notice-anchor`);
@@ -1012,6 +1227,24 @@ var UpdateNoticeManager = class _UpdateNoticeManager {
     }
     this.refreshPrimaryColor(gen);
   }
+  /** Sync light/dark panel tokens + surface bg from Antd when detectable. */
+  syncAntdThemeMode(allowProbe = true) {
+    const adapter = this.getActiveThemeAdapter();
+    if ((adapter?.type ?? "antd") !== "antd") {
+      applySurfaceBackground(null);
+      return;
+    }
+    const bg = tryResolveAntdSurfaceBg({ allowProbe });
+    const bgMode = themeFromBackgroundColor(bg);
+    const domMode = tryResolveDomThemeHint();
+    const mode = domMode ?? bgMode;
+    if (mode && mode !== this.theme) {
+      this.theme = mode;
+      applyTheme(mode);
+    }
+    const surfaceOk = Boolean(bg && bgMode && mode && bgMode === mode);
+    applySurfaceBackground(surfaceOk ? bg : null);
+  }
   notifyUpdate(_runtime, _version) {
     void _runtime;
     void _version;
@@ -1020,6 +1253,7 @@ var UpdateNoticeManager = class _UpdateNoticeManager {
     ensureNotificationAnchor();
     const adapter = runtime.options.themeAdapter ?? this.themeAdapter;
     const gen = this.primaryResolveGen;
+    this.syncAntdThemeMode(true);
     resolvePrimaryColorLazy(adapter, this.theme, (color) => {
       if (gen !== this.primaryResolveGen) return;
       this.primaryColor = color;
@@ -1045,6 +1279,7 @@ var UpdateNoticeManager = class _UpdateNoticeManager {
           runtime.dismissVersion(version);
         }
       });
+      this.syncAntdThemeMode(true);
     });
     return true;
   }
@@ -1059,11 +1294,22 @@ var UpdateNoticeManager = class _UpdateNoticeManager {
   startThemeWatch() {
     this.stopWatchTheme?.();
     const adapter = this.getActiveThemeAdapter();
-    this.stopWatchTheme = watchThemeChanges(adapter, () => this.theme, (color) => {
-      this.primaryResolveGen += 1;
-      this.primaryColor = color;
-      applyPrimaryColor(color);
-    });
+    this.stopWatchTheme = watchThemeChanges(
+      adapter,
+      () => this.theme,
+      (color) => {
+        this.primaryResolveGen += 1;
+        this.primaryColor = color;
+        applyPrimaryColor(color);
+        this.syncAntdThemeMode(true);
+      },
+      (theme) => {
+        if (theme === this.theme) return;
+        this.theme = theme;
+        applyTheme(theme);
+        this.syncAntdThemeMode(true);
+      }
+    );
   }
   destroy() {
     this.stopWatchTheme?.();