feat: add popup background transparent setting

src/main.ts

@@ -21,6 +21,10 @@ interface MermaidPopupSetting {
 
     open_btn_pos_x:string;
     open_btn_pos_y:string;
+    bgColorLight:string;
+    bgColorDark:string;
+    bgAlpha:string;
+    bgAlphaStep:Record<string, string>;
 };
 
 const DEFAULT_SETTINGS: MermaidPopupSetting = {
@@ -66,6 +70,22 @@ const DEFAULT_SETTINGS: MermaidPopupSetting = {
     },
     open_btn_pos_x:'35',
     open_btn_pos_y:'90',
+    bgColorLight:'rgba(255,255,255, 0.5)',
+    bgColorDark:'rgba(51,51,51, 0.5)',
+    bgAlpha:'0.5',
+    bgAlphaStep:{
+        '0.0':'0.0',
+        '0.1':'0.1',
+        '0.2':'0.2',
+        '0.3':'0.3',
+        '0.4':'0.4',
+        '0.5':'0.5',
+        '0.6':'0.6',
+        '0.7':'0.7',
+        '0.8':'0.8',
+        '0.9':'0.9',
+        '1.0':'1.0'
+    },    
 };
 
 export default class MermaidPopupPlugin extends Plugin {
@@ -420,7 +440,7 @@ export default class MermaidPopupPlugin extends Plugin {
         // popup-overlay
         const overlay = targetElement.doc.createElement('div');
         overlay.classList.add('popup-overlay');
-
+        this.setPopupBgAlpha(overlay);
         // copy target
         let targetElementClone = targetElement.cloneNode(true);
         let targetElementInPopup = targetElementClone as HTMLElement;
@@ -478,6 +498,33 @@ export default class MermaidPopupPlugin extends Plugin {
         });
     }
 
+    setPopupBgAlpha(_popupElement:HTMLElement) {
+        if (!_popupElement) 
+            return;
+
+        let alpha = this.settings.bgAlpha;
+        // 构造新的 rgba 值
+        let newBgColor;
+        if (this.isThemeLight()) {
+            newBgColor = `rgba(255, 255, 255, ${alpha})`;
+        } else if (this.isThemeDark()) {
+            newBgColor = `rgba(51, 51, 51, ${alpha})`;
+        }
+
+        // 更新背景颜色和模糊效果
+        _popupElement.setCssStyles({
+            backgroundColor: newBgColor
+        })
+    }    
+
+    isThemeLight(){
+        return document.body.classList.contains('theme-light');
+    }
+
+    isThemeDark(){
+        return document.body.classList.contains('theme-dark');
+    }
+
     setPopupSize(_targetElementInPopup:HTMLElement, _targetElement:HTMLElement){
         let multiVal = parseFloat(this.settings.PopupSizeInitValue);
         if (typeof multiVal != "number"){

src/settings.ts

@@ -134,6 +134,34 @@ class MermaidPopupSettingTab extends PluginSettingTab {
             )
         });  
 
+        const row = tbody.createEl('tr');
+        const td_title_a = row.createEl('td');
+        // bg Alpha title
+        let titlePpBgA = td_title_a.createEl('h2', { text: 'Popup Background Alpha Value' });
+        titlePpBgA.classList.add('config-text');
+        //const rowPpBgAlpha = td_title_a.createDiv({ cls: 'kv-row' });
+        // bg Alpha settign
+        new Setting(td_title_a)
+        .setName('Choose the alpha value')
+        .addDropdown(dropdown => {
+            let bgAlphaStep = this.plugin.settings.bgAlphaStep;
+            for(const key in bgAlphaStep){
+                dropdown.addOption(key, bgAlphaStep[key])
+            }
+            dropdown
+                .setValue(this.plugin.settings.bgAlpha)
+                .onChange(async (value) => {
+                    this.plugin.settings.bgAlpha = value;
+                    await this.plugin.saveSettings();
+                }
+
+            )
+        });    
+
+        this.addClass(td_title_a, 'setting-item', 'setting-item-on-top-line');
+
+
+
         // 开启弹窗按钮位置
         let title_btn_pos = containerEl.createEl('h2', { text: 'Open Popup Button Relative Position Init' });
         title_btn_pos.classList.add('config-text');   
@@ -149,8 +177,9 @@ class MermaidPopupSettingTab extends PluginSettingTab {
         this.setInfo(kvRow_open_btn, 'Click for tips on Open Popup Button Relative Position Init Setting.',
             'Open Popup Button Relative Position Init Setting',
             'x represents the pixels to the right edge of the diagram container.'
-        ) 
+        )       
 
+        // Add New Diagram
         let title = containerEl.createEl('h2', { text: 'Add New Diagram' });
         title.classList.add('config-text');
 
@@ -226,6 +255,13 @@ class MermaidPopupSettingTab extends PluginSettingTab {
         containerEl.createEl('p', { text: 'if you add it to the class list of your target container, it will get the functionality.' });
     }
 
+    addClass(_container:HTMLElement, _targetElementClass:string, _class:string){
+        let dropdownElement = _container.querySelector('.' + _targetElementClass);
+        if (dropdownElement) {
+            dropdownElement.classList.add(_class);
+        }
+    }
+
     setInfo(containerEl: HTMLElement, tip:string, title:string, msg:string){
         const addSettings = new Setting(containerEl);
         addSettings.addExtraButton((extra) => {

styles.css

@@ -1,16 +1,17 @@
+
 .popup-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(10px);
+
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 1000; /* Ensure the overlay is on top */
 }
+
 .popup-content {
     display: flex;
     justify-content: center;
@@ -32,16 +33,13 @@
     pointer-events: none
 }
 
-/* 浅色模式下的弹窗背景 */
 .theme-light .popup-content {
-    background-color: rgb(255, 255, 255, 0.5) !important; /* 白色背景 */
-    color: #000000; /* 黑色文本 */
+    background-color: var(--background-primary) !important; /* 白色背景 */
 }
 
 /* 深色模式下的弹窗背景 */
 .theme-dark .popup-content {
-    background-color: rgb(51, 51, 51, 0.5) !important; /* 深灰色背景 */
-    color: #ffffff; /* 白色文本 */
+    background-color: var(--background-primary) !important; /* 深灰色背景 */
 }
 
 /*开启弹窗按钮*/
@@ -107,6 +105,10 @@ div.mermaid-popup-button:hover, div.mermaid-popup-button-reading:hover {
     color: var(--button-color-hover);
 }
 
+.setting-item-on-top-line{
+    border-top: 0px;
+}
+
 /*以下是配置中已存图表来源的表格样式*/
 
 /* 定义 kv-row 的 flex 布局样式 */