med-viewer-sdk 0.1.23 → 0.1.25

package/dist/med-viewer-sdk.mjs

@@ -7,7 +7,7 @@ var __publicField = (obj, key, value) => {
 var _a, _b, _c, _d, _e;
 import OpenSeadragon from "openseadragon";
 import { default as default2 } from "openseadragon";
-import { defineComponent, shallowRef, onMounted, onBeforeUnmount, h as h$1 } from "vue";
+import { defineComponent, shallowRef, onMounted, watch, onBeforeUnmount, h as h$1 } from "vue";
 function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
 }
@@ -12545,6 +12545,338 @@ class BaseAnnotator {
     this.engine = engine;
   }
 }
+const DEFAULT_COLORS = {
+  // 面板
+  panelBackground: "rgba(24, 28, 36, 0.85)",
+  panelBackgroundSolid: "#181c24",
+  panelBorder: "rgba(255, 255, 255, 0.1)",
+  panelShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
+  // 文字
+  textPrimary: "#f2f5f8",
+  textSecondary: "rgba(255, 255, 255, 0.7)",
+  textMuted: "rgba(255, 255, 255, 0.4)",
+  // 强调色
+  accentColor: "#31d0aa",
+  accentHover: "#25a084",
+  accentBgLow: "rgba(49, 208, 170, 0.15)",
+  accentBgHigh: "rgba(49, 208, 170, 0.2)",
+  // 按钮
+  btnBackground: "rgba(255, 255, 255, 0.08)",
+  btnHoverBackground: "rgba(49, 208, 170, 0.2)",
+  // 危险
+  dangerColor: "#ff6b6b",
+  dangerBgLow: "rgba(200, 50, 50, 0.1)",
+  dangerBgHigh: "rgba(200, 50, 50, 0.3)",
+  // 选区
+  selectionColor: "#4CAF50",
+  selectionHandleBorder: "#4CAF50",
+  // 标注手柄
+  annoHandleInnerFill: "#FF9800",
+  annoHandleInnerStroke: "#FFEB3B",
+  annoHandleOuterFill: "#fff",
+  annoHandleOuterStroke: "#000",
+  // 标注图形
+  annoInnerStroke: "#31d0aa",
+  annoOuterStroke: "rgba(0, 0, 0, 0.35)",
+  annoInnerHoverStroke: "#31d0aa",
+  annoHandleHoverFill: "#FFEB3B",
+  // 标注编辑器
+  annoEditorBg: "#181c24",
+  annoEditorText: "#f2f5f8",
+  annoEditorBorder: "rgba(255,255,255,0.1)",
+  annoEditorInputBg: "rgba(255,255,255,0.06)",
+  annoEditorBtnBg: "#31d0aa",
+  annoEditorBtnHoverBg: "#25a084",
+  annoEditorBtnColor: "#fff",
+  // 滑块
+  sliderTrackBg: "rgba(255, 255, 255, 0.2)",
+  sliderThumbColor: "#31d0aa",
+  sliderThumbHover: "#25a084",
+  // 复选框
+  checkboxBorder: "rgba(255, 255, 255, 0.4)",
+  checkboxCheckedBg: "#31d0aa",
+  // 工具网格
+  toolItemBg: "rgba(255, 255, 255, 0.05)",
+  toolItemBorder: "rgba(255, 255, 255, 0.05)",
+  toolItemHoverBg: "rgba(49, 208, 170, 0.2)",
+  toolItemHoverBorder: "rgba(49, 208, 170, 0.4)",
+  // 颜色选择
+  colorItemActiveBorder: "#fff",
+  colorItemActiveShadow: "0 0 10px rgba(255, 255, 255, 0.3)",
+  // Tooltip
+  tooltipBg: "rgba(0, 0, 0, 0.75)",
+  tooltipColor: "#fff",
+  // 图标 filter
+  iconFilter: "none"
+};
+const LIGHT_COLORS = {
+  // 面板
+  panelBackground: "rgba(255, 255, 255, 0.92)",
+  panelBackgroundSolid: "#ffffff",
+  panelBorder: "rgba(0, 0, 0, 0.08)",
+  panelShadow: "0 4px 24px rgba(0, 0, 0, 0.1)",
+  // 文字
+  textPrimary: "#1a1a2e",
+  textSecondary: "rgba(0, 0, 0, 0.55)",
+  textMuted: "rgba(0, 0, 0, 0.35)",
+  // 强调色
+  accentColor: "#1890ff",
+  accentHover: "#096dd9",
+  accentBgLow: "rgba(24, 144, 255, 0.08)",
+  accentBgHigh: "rgba(24, 144, 255, 0.15)",
+  // 按钮
+  btnBackground: "rgba(0, 0, 0, 0.04)",
+  btnHoverBackground: "rgba(24, 144, 255, 0.1)",
+  // 危险
+  dangerColor: "#ff4d4f",
+  dangerBgLow: "rgba(255, 77, 79, 0.06)",
+  dangerBgHigh: "rgba(255, 77, 79, 0.15)",
+  // 选区
+  selectionColor: "#1890ff",
+  selectionHandleBorder: "#1890ff",
+  // 标注手柄
+  annoHandleInnerFill: "#FF9800",
+  annoHandleInnerStroke: "#E65100",
+  annoHandleOuterFill: "#fff",
+  annoHandleOuterStroke: "#333",
+  // 标注图形
+  annoInnerStroke: "#1890ff",
+  annoOuterStroke: "rgba(0, 0, 0, 0.2)",
+  annoInnerHoverStroke: "#096dd9",
+  annoHandleHoverFill: "#E65100",
+  // 标注编辑器
+  annoEditorBg: "#ffffff",
+  annoEditorText: "#1a1a2e",
+  annoEditorBorder: "rgba(0, 0, 0, 0.08)",
+  annoEditorInputBg: "#f5f5f5",
+  annoEditorBtnBg: "#1890ff",
+  annoEditorBtnHoverBg: "#096dd9",
+  annoEditorBtnColor: "#fff",
+  // 滑块
+  sliderTrackBg: "rgba(0, 0, 0, 0.1)",
+  sliderThumbColor: "#1890ff",
+  sliderThumbHover: "#096dd9",
+  // 复选框
+  checkboxBorder: "rgba(0, 0, 0, 0.25)",
+  checkboxCheckedBg: "#1890ff",
+  // 工具网格
+  toolItemBg: "rgba(0, 0, 0, 0.03)",
+  toolItemBorder: "rgba(0, 0, 0, 0.06)",
+  toolItemHoverBg: "rgba(24, 144, 255, 0.08)",
+  toolItemHoverBorder: "rgba(24, 144, 255, 0.3)",
+  // 颜色选择
+  colorItemActiveBorder: "#1890ff",
+  colorItemActiveShadow: "0 0 8px rgba(24, 144, 255, 0.3)",
+  // Tooltip
+  tooltipBg: "rgba(0, 0, 0, 0.75)",
+  tooltipColor: "#fff",
+  // 图标 filter
+  iconFilter: "invert(1)"
+};
+const DARK_COLORS = {
+  // 面板
+  panelBackground: "rgba(10, 10, 14, 0.92)",
+  panelBackgroundSolid: "#0a0a0e",
+  panelBorder: "rgba(255, 255, 255, 0.06)",
+  panelShadow: "0 8px 32px rgba(0, 0, 0, 0.6)",
+  // 文字
+  textPrimary: "#e8eaed",
+  textSecondary: "rgba(255, 255, 255, 0.6)",
+  textMuted: "rgba(255, 255, 255, 0.3)",
+  // 强调色
+  accentColor: "#bb86fc",
+  accentHover: "#9b59b6",
+  accentBgLow: "rgba(187, 134, 252, 0.1)",
+  accentBgHigh: "rgba(187, 134, 252, 0.2)",
+  // 按钮
+  btnBackground: "rgba(255, 255, 255, 0.06)",
+  btnHoverBackground: "rgba(187, 134, 252, 0.15)",
+  // 危险
+  dangerColor: "#cf6679",
+  dangerBgLow: "rgba(207, 102, 121, 0.1)",
+  dangerBgHigh: "rgba(207, 102, 121, 0.25)",
+  // 选区
+  selectionColor: "#bb86fc",
+  selectionHandleBorder: "#bb86fc",
+  // 标注手柄
+  annoHandleInnerFill: "#FF9800",
+  annoHandleInnerStroke: "#FFEB3B",
+  annoHandleOuterFill: "#222",
+  annoHandleOuterStroke: "#888",
+  // 标注图形
+  annoInnerStroke: "#bb86fc",
+  annoOuterStroke: "rgba(0, 0, 0, 0.5)",
+  annoInnerHoverStroke: "#9b59b6",
+  annoHandleHoverFill: "#FFEB3B",
+  // 标注编辑器
+  annoEditorBg: "#0a0a0e",
+  annoEditorText: "#e8eaed",
+  annoEditorBorder: "rgba(255,255,255,0.06)",
+  annoEditorInputBg: "rgba(255,255,255,0.06)",
+  annoEditorBtnBg: "#bb86fc",
+  annoEditorBtnHoverBg: "#9b59b6",
+  annoEditorBtnColor: "#fff",
+  // 滑块
+  sliderTrackBg: "rgba(255, 255, 255, 0.15)",
+  sliderThumbColor: "#bb86fc",
+  sliderThumbHover: "#9b59b6",
+  // 复选框
+  checkboxBorder: "rgba(255, 255, 255, 0.3)",
+  checkboxCheckedBg: "#bb86fc",
+  // 工具网格
+  toolItemBg: "rgba(255, 255, 255, 0.04)",
+  toolItemBorder: "rgba(255, 255, 255, 0.04)",
+  toolItemHoverBg: "rgba(187, 134, 252, 0.15)",
+  toolItemHoverBorder: "rgba(187, 134, 252, 0.3)",
+  // 颜色选择
+  colorItemActiveBorder: "#bb86fc",
+  colorItemActiveShadow: "0 0 10px rgba(187, 134, 252, 0.4)",
+  // Tooltip
+  tooltipBg: "rgba(0, 0, 0, 0.85)",
+  tooltipColor: "#e8eaed",
+  // 图标 filter
+  iconFilter: "none"
+};
+const PRESET_THEMES = {
+  default: { name: "default", colors: DEFAULT_COLORS },
+  light: { name: "light", colors: LIGHT_COLORS },
+  dark: { name: "dark", colors: DARK_COLORS }
+};
+const CSS_VAR_MAP = {
+  panelBackground: "--med-panel-bg",
+  panelBackgroundSolid: "--med-panel-bg-solid",
+  panelBorder: "--med-panel-border",
+  panelShadow: "--med-panel-shadow",
+  textPrimary: "--med-text-primary",
+  textSecondary: "--med-text-secondary",
+  textMuted: "--med-text-muted",
+  accentColor: "--med-accent",
+  accentHover: "--med-accent-hover",
+  accentBgLow: "--med-accent-bg-low",
+  accentBgHigh: "--med-accent-bg-high",
+  btnBackground: "--med-btn-bg",
+  btnHoverBackground: "--med-btn-hover-bg",
+  dangerColor: "--med-danger",
+  dangerBgLow: "--med-danger-bg-low",
+  dangerBgHigh: "--med-danger-bg-high",
+  selectionColor: "--med-selection",
+  selectionHandleBorder: "--med-selection-handle-border",
+  annoHandleInnerFill: "--med-anno-handle-inner-fill",
+  annoHandleInnerStroke: "--med-anno-handle-inner-stroke",
+  annoHandleOuterFill: "--med-anno-handle-outer-fill",
+  annoHandleOuterStroke: "--med-anno-handle-outer-stroke",
+  annoInnerStroke: "--med-anno-inner-stroke",
+  annoOuterStroke: "--med-anno-outer-stroke",
+  annoInnerHoverStroke: "--med-anno-inner-hover-stroke",
+  annoHandleHoverFill: "--med-anno-handle-hover-fill",
+  annoEditorBg: "--med-anno-editor-bg",
+  annoEditorText: "--med-anno-editor-text",
+  annoEditorBorder: "--med-anno-editor-border",
+  annoEditorInputBg: "--med-anno-editor-input-bg",
+  annoEditorBtnBg: "--med-anno-editor-btn-bg",
+  annoEditorBtnHoverBg: "--med-anno-editor-btn-hover-bg",
+  annoEditorBtnColor: "--med-anno-editor-btn-color",
+  sliderTrackBg: "--med-slider-track-bg",
+  sliderThumbColor: "--med-slider-thumb",
+  sliderThumbHover: "--med-slider-thumb-hover",
+  checkboxBorder: "--med-checkbox-border",
+  checkboxCheckedBg: "--med-checkbox-checked-bg",
+  toolItemBg: "--med-tool-item-bg",
+  toolItemBorder: "--med-tool-item-border",
+  toolItemHoverBg: "--med-tool-item-hover-bg",
+  toolItemHoverBorder: "--med-tool-item-hover-border",
+  colorItemActiveBorder: "--med-color-item-active-border",
+  colorItemActiveShadow: "--med-color-item-active-shadow",
+  tooltipBg: "--med-tooltip-bg",
+  tooltipColor: "--med-tooltip-color",
+  iconFilter: "--med-icon-filter"
+};
+function cssVar(key) {
+  return `var(${CSS_VAR_MAP[key]})`;
+}
+class ThemeManager {
+  constructor(container, themeConfig) {
+    __publicField(this, "container");
+    __publicField(this, "currentTheme");
+    __publicField(this, "currentName");
+    this.container = container;
+    const resolved = this.resolveConfig(themeConfig);
+    this.currentTheme = resolved;
+    this.currentName = resolved.name;
+    this.applyTheme(resolved.colors);
+  }
+  /**
+   * 解析主题配置
+   */
+  resolveConfig(config) {
+    if (!config) {
+      return PRESET_THEMES.default;
+    }
+    if (typeof config === "string") {
+      const preset = PRESET_THEMES[config];
+      if (!preset) {
+        console.warn(`[ThemeManager] Unknown preset theme "${config}", falling back to default`);
+        return PRESET_THEMES.default;
+      }
+      return preset;
+    }
+    if ("name" in config && "colors" in config) {
+      return config;
+    }
+    return {
+      name: "custom",
+      colors: { ...DEFAULT_COLORS, ...config }
+    };
+  }
+  /**
+   * 将主题颜色应用为 CSS 变量到容器元素
+   */
+  applyTheme(colors) {
+    const keys = Object.keys(CSS_VAR_MAP);
+    keys.forEach((key) => {
+      const value = colors[key];
+      if (value !== void 0) {
+        this.container.style.setProperty(CSS_VAR_MAP[key], value);
+      }
+    });
+  }
+  /**
+   * 切换主题
+   */
+  setTheme(config) {
+    const resolved = this.resolveConfig(config);
+    this.currentTheme = resolved;
+    this.currentName = resolved.name;
+    this.applyTheme(resolved.colors);
+  }
+  /**
+   * 获取当前主题名称
+   */
+  getThemeName() {
+    return this.currentName;
+  }
+  /**
+   * 获取当前主题颜色
+   */
+  getColors() {
+    return { ...this.currentTheme.colors };
+  }
+  /**
+   * 获取指定颜色值（当前主题）
+   */
+  getColor(key) {
+    return this.currentTheme.colors[key];
+  }
+  /**
+   * 销毁（清除 CSS 变量）
+   */
+  destroy() {
+    const keys = Object.keys(CSS_VAR_MAP);
+    keys.forEach((key) => {
+      this.container.style.removeProperty(CSS_VAR_MAP[key]);
+    });
+  }
+}
 class AnnoAnnotator extends BaseAnnotator {
   constructor(engine, config = {}) {
     super(engine);
@@ -12647,13 +12979,115 @@ class AnnoAnnotator extends BaseAnnotator {
     const style = document.createElement("style");
     style.id = styleId;
     style.innerHTML = `
+      /* ── 标注手柄 ── */
       .a9s-handle .a9s-handle-inner {
-          stroke: #FFEB3B;
-          fill: #FF9800;
+          stroke: ${cssVar("annoHandleInnerStroke")};
+          fill: ${cssVar("annoHandleInnerFill")};
       }
       .a9s-handle .a9s-handle-outer {
-          stroke: #000;
-          fill: #fff;
+          stroke: ${cssVar("annoHandleOuterStroke")};
+          fill: ${cssVar("annoHandleOuterFill")};
+      }
+      .a9s-handle:hover .a9s-handle-inner {
+          fill: ${cssVar("annoHandleHoverFill")};
+      }
+
+      /* ── 标注图形边框 ── */
+      .a9s-annotation .a9s-inner,
+      .a9s-selection .a9s-inner {
+          stroke: ${cssVar("annoInnerStroke")};
+      }
+      .a9s-annotation .a9s-inner:hover,
+      .a9s-selection .a9s-inner:hover {
+          stroke: ${cssVar("annoInnerHoverStroke")};
+      }
+      .a9s-annotation .a9s-outer,
+      .a9s-selection .a9s-outer {
+          stroke: ${cssVar("annoOuterStroke")};
+      }
+      .a9s-annotation.selected .a9s-inner,
+      .a9s-annotation.editable .a9s-inner {
+          stroke: ${cssVar("annoInnerHoverStroke")};
+      }
+
+      /* ── improved-polygon ── */
+      .a9s-selection.improved-polygon .a9s-inner,
+      .a9s-annotation.improved-polygon.editable .a9s-inner {
+          stroke: ${cssVar("annoInnerStroke")};
+      }
+      .a9s-selection.improved-polygon .a9s-outer,
+      .a9s-annotation.improved-polygon.editable .a9s-outer {
+          stroke: ${cssVar("annoOuterStroke")};
+      }
+      .a9s-selection.improved-polygon .a9s-handle .a9s-handle-outer,
+      .a9s-annotation.improved-polygon.editable .a9s-handle .a9s-handle-outer {
+          stroke: ${cssVar("annoHandleOuterStroke")};
+      }
+      .a9s-selection.improved-polygon .a9s-handle .a9s-handle-inner,
+      .a9s-annotation.improved-polygon.editable .a9s-handle .a9s-handle-inner {
+          stroke: ${cssVar("annoHandleInnerStroke")};
+          fill: ${cssVar("annoHandleInnerFill")};
+      }
+      .a9s-selection.improved-polygon .a9s-handle .a9s-handle-inner:hover,
+      .a9s-annotation.improved-polygon.editable .a9s-handle.selected .a9s-handle-inner,
+      .a9s-annotation.improved-polygon.editable .a9s-handle .a9s-handle-inner:hover {
+          fill: ${cssVar("annoHandleHoverFill")};
+      }
+
+      /* ── 标注编辑器 ── */
+      .r6o-editor {
+          color: ${cssVar("annoEditorText")};
+      }
+      .r6o-editor .r6o-editor-inner {
+          background-color: ${cssVar("annoEditorBg")};
+          box-shadow: 2px 2px 42px rgba(0,0,0,0.4);
+      }
+      .r6o-editor .r6o-editor-inner .r6o-widget {
+          border-bottom: 1px solid ${cssVar("annoEditorBorder")};
+      }
+      .r6o-editor .r6o-arrow:after {
+          background-color: ${cssVar("annoEditorBg")};
+      }
+
+      /* ── 编辑器按钮 ── */
+      .r6o-btn {
+          background-color: ${cssVar("annoEditorBtnBg")};
+          border: 1px solid ${cssVar("annoEditorBtnBg")};
+          color: ${cssVar("annoEditorBtnColor")};
+      }
+      .r6o-btn:hover {
+          background-color: ${cssVar("annoEditorBtnHoverBg")};
+          border-color: ${cssVar("annoEditorBtnHoverBg")};
+      }
+      .r6o-btn.outline {
+          border: 1px solid ${cssVar("annoEditorBtnBg")};
+          color: ${cssVar("annoEditorBtnBg")};
+          background-color: transparent;
+      }
+
+      /* ── 编辑器输入框 ── */
+      .r6o-autocomplete input,
+      .r6o-widget.r6o-tag input,
+      .r6o-editable-text {
+          color: ${cssVar("annoEditorText")};
+      }
+      .r6o-widget.comment.editable {
+          background-color: ${cssVar("annoEditorInputBg")};
+      }
+      .r6o-widget.r6o-tag {
+          background-color: ${cssVar("annoEditorInputBg")};
+          border-bottom: 1px solid ${cssVar("annoEditorBorder")};
+      }
+      .r6o-widget.r6o-tag ul.r6o-taglist li {
+          background-color: ${cssVar("annoEditorBg")};
+          border: 1px solid ${cssVar("annoEditorBorder")};
+      }
+      .r6o-widget .r6o-lastmodified {
+          border: 1px solid ${cssVar("annoEditorBorder")};
+      }
+      .r6o-widget .r6o-arrow-down {
+          background-color: ${cssVar("annoEditorBg")};
+          border: 1px solid ${cssVar("annoEditorBorder")};
       }`;
     document.head.appendChild(style);
   }
@@ -13716,6 +14150,9 @@ function t(path) {
   }
   return typeof value === "string" ? value : path;
 }
+function getCurrentLocale() {
+  return currentLocale;
+}
 function getWithUnit(value, unitSuffix) {
   return value.toFixed(2) + "μ" + unitSuffix;
 }
@@ -14347,11 +14784,11 @@ class MagnificationPlugin {
         gap: 8px;
         padding: 10px;
         z-index: 100;
-        background: rgba(24, 28, 36, 0.85);
+        background: ${cssVar("panelBackground")};
         border-radius: 12px;
         backdrop-filter: blur(10px);
-        border: 1px solid rgba(255,255,255,0.1);
-        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+        border: 1px solid ${cssVar("panelBorder")};
+        box-shadow: ${cssVar("panelShadow")};
       }
       .med-magnification--TOP_LEFT { top: calc(18px + ${this.options.offsetY || 0}px); left: calc(18px + ${this.options.offsetX || 0}px); }
       .med-magnification--TOP_CENTER { top: calc(18px + ${this.options.offsetY || 0}px); left: 50%; transform: translateX(-50%) translateX(${this.options.offsetX || 0}px); }
@@ -14363,10 +14800,10 @@ class MagnificationPlugin {
       .med-magnification--MIDDLE_RIGHT { top: 50%; right: calc(18px - ${this.options.offsetX || 0}px); transform: translateY(-50%) translateY(${this.options.offsetY || 0}px); }
 
       .med-magnification-display {
-        background: rgba(255,255,255,0.08);
-        color: #f2f5f8;
+        background: ${cssVar("btnBackground")};
+        color: ${cssVar("textPrimary")};
         font-size: 14px;
-        border: 1px dashed rgba(255,255,255,0.3);
+        border: 1px dashed ${cssVar("sliderTrackBg")};
         padding: 8px 0px;
         border-radius: 8px;
         text-align: center;
@@ -14379,8 +14816,8 @@ class MagnificationPlugin {
         gap: 6px;
       }
       .med-magnification-btn {
-        background: rgba(49, 208, 170, 0.15);
-        color: #f2f5f8;
+        background: ${cssVar("accentBgLow")};
+        color: ${cssVar("textPrimary")};
         border: none;
         padding: 8px 16px;
         border-radius: 8px;
@@ -14389,7 +14826,7 @@ class MagnificationPlugin {
         font-weight: bold;
       }
       .med-magnification-btn:hover {
-        background: rgba(49, 208, 170, 0.3);
+        background: ${cssVar("accentBgHigh")};
       }
       .med-magnification-btn:active {
         transform: scale(0.95);
@@ -14937,6 +15374,24 @@ class ScalebarPlugin {
     this.viewer.scalebar(this.options);
     this.scalebar = this.viewer.scalebarInstance;
   }
+  /**
+   * 更新主题颜色（动态切换主题时调用）
+   */
+  updateTheme(colors) {
+    if (this.scalebar) {
+      const scalebarEl = this.scalebar.element || this.scalebar.divElt;
+      if (scalebarEl) {
+        scalebarEl.style.color = colors.textPrimary;
+        scalebarEl.style.borderColor = colors.textPrimary;
+      }
+      const labels = scalebarEl == null ? void 0 : scalebarEl.querySelectorAll(".scalebar-label");
+      if (labels) {
+        labels.forEach((label) => {
+          label.style.color = colors.textPrimary;
+        });
+      }
+    }
+  }
   destroy() {
     if (this.scalebar && typeof this.scalebar.destroy === "function") {
       this.scalebar.destroy();
@@ -15387,28 +15842,22 @@ class SelectionPlugin {
       },
       borderStyle: {
         width: "2px",
-        // 稍微加粗，更有质感
-        color: "#4CAF50"
-        // 使用经典的“激活蓝”
+        color: cssVar("selectionColor")
       },
       handleStyle: {
         top: "50%",
         left: "50%",
         width: "10px",
-        // 增大触点，方便鼠标点击
         height: "10px",
         margin: "-6px 0 0 -6px",
-        background: "#4CAF50",
-        // 白色背景
-        border: "2px solid #4CAF50"
-        // 蓝色边框
+        background: cssVar("selectionColor"),
+        border: `2px solid ${cssVar("selectionHandleBorder")}`
       },
       cornersStyle: {
         width: "12px",
-        // 角部手柄稍微比边部大一点
         height: "12px",
-        background: "#4CAF50",
-        border: "2px solid #4CAF50"
+        background: cssVar("selectionColor"),
+        border: `2px solid ${cssVar("selectionHandleBorder")}`
       },
       ...options,
       // Override onSelection to provide a blob
@@ -15559,6 +16008,35 @@ class SelectionPlugin {
     }
     return false;
   }
+  /**
+   * 更新主题颜色（动态切换主题时调用）
+   */
+  updateTheme(colors) {
+    if (this.selection) {
+      if (this.selection.border) {
+        this.selection.border.style.width = "2px";
+        this.selection.border.style.borderColor = colors.selectionColor;
+      }
+      if (this.selection.handles) {
+        const handles = this.selection.handles;
+        Object.values(handles).forEach((handle) => {
+          if (handle && handle.style) {
+            handle.style.background = colors.selectionColor;
+            handle.style.border = `2px solid ${colors.selectionHandleBorder}`;
+          }
+        });
+      }
+      if (this.selection.corners) {
+        const corners = this.selection.corners;
+        Object.values(corners).forEach((corner) => {
+          if (corner && corner.style) {
+            corner.style.background = colors.selectionColor;
+            corner.style.border = `2px solid ${colors.selectionHandleBorder}`;
+          }
+        });
+      }
+    }
+  }
   /**
    * 销毁插件
    */
@@ -16258,11 +16736,11 @@ class MedToolbar {
         gap: 12px;
         padding: 10px;
         z-index: 100;
-        background: rgba(24, 28, 36, 0.85);
+        background: ${cssVar("panelBackground")};
         border-radius: 12px;
         backdrop-filter: blur(10px);
-        border: 1px solid rgba(255,255,255,0.1);
-        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+        border: 1px solid ${cssVar("panelBorder")};
+        box-shadow: ${cssVar("panelShadow")};
       }
 
       /* 定位 */
@@ -16279,8 +16757,8 @@ class MedToolbar {
       
       /* 按钮及动画 */
       .med-main-btn {
-        background: rgba(255,255,255,0.08);
-        color: #f2f5f8;
+        background: ${cssVar("btnBackground")};
+        color: ${cssVar("textPrimary")};
         border: none;
         padding: 8px 16px;
         border-radius: 8px;
@@ -16290,20 +16768,20 @@ class MedToolbar {
         align-items: center;
         justify-content: center;
       }
-      .med-main-btn:hover, .med-main-btn.active { background: rgba(49, 208, 170, 0.2); }
+      .med-main-btn:hover, .med-main-btn.active { background: ${cssVar("accentBgHigh")}; }
       .med-main-btn:active { transform: scale(0.9); }
-      .med-main-btn img { width: 24px; height: 24px; }
+      .med-main-btn img { width: 24px; height: 24px; filter: ${cssVar("iconFilter")}; }
 
       /* 下拉框基础及进场动画 */
       .med-toolbar-dropdown {
         position: absolute;
         bottom: calc(100% + 12px); 
         left: 50%;
-        background: #181c24;
-        border: 1px solid rgba(255,255,255,0.1);
+        background: ${cssVar("panelBackgroundSolid")};
+        border: 1px solid ${cssVar("panelBorder")};
         border-radius: 12px;
         padding: 16px;
-        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+        box-shadow: ${cssVar("panelShadow")};
         min-width: 220px;
         z-index: 101;
         
@@ -16348,8 +16826,8 @@ class MedToolbar {
       .med-tooltip {
         position: absolute;
         padding: 6px 10px;
-        background: rgba(0, 0, 0, 0.75);
-        color: #fff;
+        background: ${cssVar("tooltipBg")};
+        color: ${cssVar("tooltipColor")};
         border-radius: 6px;
         font-size: 12px;
         white-space: nowrap;
@@ -16410,13 +16888,13 @@ class MedToolbar {
       }
 
       /* 内容样式 */
-      .med-toolbar-section-title { font-size: 11px; color: rgba(255,255,255,0.4); margin-bottom: 10px; letter-spacing: 1px; }
+      .med-toolbar-section-title { font-size: 11px; color: ${cssVar("textMuted")}; margin-bottom: 10px; letter-spacing: 1px; }
       .med-color-grid { display: flex; gap: 10px; margin-bottom: 20px; }
       .med-color-item { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: 0.2s; }
-      .med-color-item.active { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 10px rgba(255,255,255,0.3); }
+      .med-color-item.active { border-color: ${cssVar("colorItemActiveBorder")}; transform: scale(1.15); box-shadow: ${cssVar("colorItemActiveShadow")}; }
       .med-tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
-      .med-tool-item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.05); color: #fff; padding: 8px 4px; border-radius: 6px; cursor: pointer; font-size: 12px; transition: 0.2s; }
-      .med-tool-item:hover { background: rgba(49, 208, 170, 0.2); border-color: rgba(49, 208, 170, 0.4); }
+      .med-tool-item { background: ${cssVar("toolItemBg")}; border: 1px solid ${cssVar("toolItemBorder")}; color: ${cssVar("textPrimary")}; padding: 8px 4px; border-radius: 6px; cursor: pointer; font-size: 12px; transition: 0.2s; }
+      .med-tool-item:hover { background: ${cssVar("toolItemHoverBg")}; border-color: ${cssVar("toolItemHoverBorder")}; }
 
       /* 颜色调整下拉框样式 */
       .med-color-adjust-dropdown {
@@ -16446,14 +16924,14 @@ class MedToolbar {
       .med-toolbar-section-title {
         margin-bottom: 8px;
         font-size: 13px;
-        color: #f2f5f8;
+        color: ${cssVar("textPrimary")};
       }
 
       .med-toolbar-section input[type="range"] {
         width: 100%;
         -webkit-appearance: none;
         height: 4px;
-        background: rgba(255,255,255,0.2);
+        background: ${cssVar("sliderTrackBg")};
         border-radius: 2px;
         outline: none;
         margin-top: 5px;
@@ -16465,19 +16943,19 @@ class MedToolbar {
         width: 16px;
         height: 16px;
         border-radius: 50%;
-        background: #31d0aa;
+        background: ${cssVar("sliderThumbColor")};
         cursor: pointer;
-        border: 2px solid #181c24;
+        border: 2px solid ${cssVar("panelBackgroundSolid")};
         transition: background 0.15s ease-in-out;
       }
 
       .med-toolbar-section input[type="range"]::-webkit-slider-thumb:hover {
-        background: #25a084;
+        background: ${cssVar("sliderThumbHover")};
       }
 
       .med-slider-value {
         font-size: 12px;
-        color: rgba(255,255,255,0.7);
+        color: ${cssVar("textSecondary")};
         align-self: flex-end;
       }
 
@@ -16490,7 +16968,7 @@ class MedToolbar {
 
       .med-checkbox-section label {
         font-size: 13px;
-        color: #f2f5f8;
+        color: ${cssVar("textPrimary")};
         cursor: pointer;
       }
 
@@ -16500,7 +16978,7 @@ class MedToolbar {
         appearance: none;
         width: 18px;
         height: 18px;
-        border: 1px solid rgba(255,255,255,0.4);
+        border: 1px solid ${cssVar("checkboxBorder")};
         border-radius: 4px;
         background-color: transparent;
         cursor: pointer;
@@ -16509,8 +16987,8 @@ class MedToolbar {
       }
 
       .med-checkbox-section input[type="checkbox"]:checked {
-        background-color: #31d0aa;
-        border-color: #31d0aa;
+        background-color: ${cssVar("checkboxCheckedBg")};
+        border-color: ${cssVar("checkboxCheckedBg")};
       }
 
       .med-checkbox-section input[type="checkbox"]:checked::after {
@@ -16528,12 +17006,12 @@ class MedToolbar {
       .med-reset-btn {
         width: 100%;
         margin-top: 15px;
-        background: rgba(200, 50, 50, 0.1);
-        color: #ff6b6b;
-        border: 1px solid rgba(255, 100, 100, 0.2);
+        background: ${cssVar("dangerBgLow")};
+        color: ${cssVar("dangerColor")};
+        border: 1px solid ${cssVar("dangerBgHigh")};
       }
       .med-reset-btn:hover {
-        background: rgba(200, 50, 50, 0.3);
+        background: ${cssVar("dangerBgHigh")};
       }
     `;
     document.head.appendChild(style);
@@ -16549,6 +17027,7 @@ class MedViewerEngine {
     __publicField(this, "selection", null);
     __publicField(this, "scalebar", null);
     __publicField(this, "magnification", null);
+    __publicField(this, "themeManager", null);
     __publicField(this, "options");
     __publicField(this, "events", /* @__PURE__ */ new Map());
     var _a2;
@@ -16622,6 +17101,7 @@ class MedViewerEngine {
     options.osdOptions = osdOptions;
     this.options = options;
     this.viewer = OpenSeadragon(osdOptions);
+    this.themeManager = new ThemeManager(this.viewer.element, options.theme);
     this.viewer.addOnceHandler("open", () => {
       this.viewer.viewport.goHome();
       this.emit("ready");
@@ -16824,16 +17304,45 @@ class MedViewerEngine {
     var _a2;
     (_a2 = this.events.get(event2)) == null ? void 0 : _a2.forEach((fn) => fn(payload));
   }
+  /**
+   * 动态设置主题
+   * @param config 主题配置：预设名称 / ThemeDefinition / Partial<ThemeColors>
+   */
+  setTheme(config) {
+    var _a2;
+    if (this.themeManager) {
+      this.themeManager.setTheme(config);
+      if (this.selection) {
+        this.selection.updateTheme(this.themeManager.getColors());
+      }
+      if (this.scalebar) {
+        this.scalebar.updateTheme(this.themeManager.getColors());
+      }
+    }
+    console.log(`[MedEngine] Theme changed to ${(_a2 = this.themeManager) == null ? void 0 : _a2.getThemeName()}`);
+  }
+  /**
+   * 获取当前主题颜色
+   */
+  getThemeColors() {
+    var _a2;
+    return ((_a2 = this.themeManager) == null ? void 0 : _a2.getColors()) ?? null;
+  }
+  getThemeName() {
+    var _a2;
+    return ((_a2 = this.themeManager) == null ? void 0 : _a2.getThemeName()) ?? null;
+  }
   /**
    * 销毁引擎与所有插件
    */
   destroy() {
-    var _a2, _b2, _c2, _d2, _e2;
+    var _a2, _b2, _c2, _d2, _e2, _f;
     (_a2 = this.anno) == null ? void 0 : _a2.destroy();
     (_b2 = this.toolbar) == null ? void 0 : _b2.destroy();
     (_c2 = this.selection) == null ? void 0 : _c2.destroy();
     (_d2 = this.scalebar) == null ? void 0 : _d2.destroy();
     (_e2 = this.colorAdjust) == null ? void 0 : _e2.destroy();
+    (_f = this.themeManager) == null ? void 0 : _f.destroy();
     this.viewer.destroy();
   }
   /**
@@ -16853,6 +17362,9 @@ class MedViewerEngine {
       ;
     console.log(`[MedEngine] Locale changed to ${locale}`);
   }
+  getLocale() {
+    return getCurrentLocale();
+  }
 }
 const MedViewer = defineComponent({
   name: "MedViewer",
@@ -16860,6 +17372,10 @@ const MedViewer = defineComponent({
     options: {
       type: Object,
       required: true
+    },
+    theme: {
+      type: [String, Object],
+      default: void 0
     }
   },
   emits: ["ready"],
@@ -16869,13 +17385,20 @@ const MedViewer = defineComponent({
     onMounted(() => {
       if (!containerRef.value)
         return;
-      engineRef.value = new MedViewerEngine({
+      const engineOptions = {
         osdOptions: props.options.osdOptions,
         locale: props.options.locale,
+        theme: props.theme || props.options.theme,
         plugins: props.options.plugins
-      });
+      };
+      engineRef.value = new MedViewerEngine(engineOptions);
       emit("ready", engineRef.value);
     });
+    watch(() => props.theme, (newTheme) => {
+      if (newTheme !== void 0 && engineRef.value) {
+        engineRef.value.setTheme(newTheme);
+      }
+    });
     onBeforeUnmount(() => {
       var _a2;
       (_a2 = engineRef.value) == null ? void 0 : _a2.destroy();
@@ -16895,7 +17418,9 @@ if (typeof window !== "undefined") {
     MedToolbar,
     SelectionPlugin,
     ColorAdjustPlugin,
-    MagnificationPlugin
+    MagnificationPlugin,
+    ThemeManager,
+    PRESET_THEMES
   };
 }
 export {
@@ -16908,8 +17433,11 @@ export {
   MedViewer,
   MedViewerEngine,
   default2 as OpenSeadragon,
+  PRESET_THEMES,
   ScalebarLocation,
   ScalebarType,
   SelectionPlugin,
-  ToolbarPosition
+  ThemeManager,
+  ToolbarPosition,
+  cssVar
 };