Fix background color of popover footnotes and some corner cases for dark mode bg colors

2024-12-12 16:33:48 +01:00
parent beaa9e42ce
commit eb346b46b2
3 changed files with 11 additions and 3 deletions
@@ -41,7 +41,13 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
      renderer.setAttribute('margin', '0px');
      renderer.setAttribute('gap', '5%');
      const viewSettings = getViewSettings(bookKey)!;
-      renderer.setStyles?.(getStyles(viewSettings, themeCode));
+      const popupTheme = { ...themeCode };
+      const popupContainer = document.getElementById('popup-container');
+      if (popupContainer) {
+        const backgroundColor = getComputedStyle(popupContainer).backgroundColor;
+        popupTheme.bg = backgroundColor;
+      }
+      renderer.setStyles?.(getStyles(viewSettings, popupTheme));
    };

    const handleRender = (e: Event) => {
@@ -57,7 +63,7 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
      footnoteHandler.removeEventListener('render', handleRender);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [view]);
+  }, [view, themeCode]);

  const docLinkHandler = async (event: Event) => {
    const detail = (event as CustomEvent).detail;