From eb346b46b2c2da3ca2763bd44b8b5bcf395f24d6 Mon Sep 17 00:00:00 2001
From: chrox <chrox.huang@gmail.com>
Date: Thu, 12 Dec 2024 16:33:48 +0100
Subject: [PATCH] Fix background color of popover footnotes and some corner
 cases for dark mode bg colors

---
 .../src/app/reader/components/FootnotePopup.tsx        | 10 ++++++++--
 apps/readest-app/src/components/Popup.tsx              |  1 +
 apps/readest-app/src/utils/style.ts                    |  3 ++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/FootnotePopup.tsx b/apps/readest-app/src/app/reader/components/FootnotePopup.tsx
index 8915440e..056a8c6c 100644
--- a/apps/readest-app/src/app/reader/components/FootnotePopup.tsx
+++ b/apps/readest-app/src/app/reader/components/FootnotePopup.tsx
@@ -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;
diff --git a/apps/readest-app/src/components/Popup.tsx b/apps/readest-app/src/components/Popup.tsx
index dfac13d9..d0aeb1f5 100644
--- a/apps/readest-app/src/components/Popup.tsx
+++ b/apps/readest-app/src/components/Popup.tsx
@@ -66,6 +66,7 @@ const Popup = ({
       }}
     />
     <div
+      id='popup-container'
       className={`bg-base-200 absolute rounded-lg font-sans shadow-xl ${className}`}
       style={{
         width: `${width}px`,
diff --git a/apps/readest-app/src/utils/style.ts b/apps/readest-app/src/utils/style.ts
index bdd87e82..6cc248c9 100644
--- a/apps/readest-app/src/utils/style.ts
+++ b/apps/readest-app/src/utils/style.ts
@@ -108,8 +108,9 @@ const getLayoutStyles = (
     color: ${fg};
     zoom: ${zoomLevel}%; 
   }
-  body *:not(#b1):not(#b1 *):not(#b2):not(#b2 *):not(.bg):not(.bg *):not(.vol):not(.vol *):not(.background):not(.background *) {
+  body *:not(a):not(#b1):not(#b1 *):not(#b2):not(#b2 *):not(.bg):not(.bg *):not(.vol):not(.vol *):not(.background):not(.background *) {
     border-color: currentColor !important;
+    ${bg === '#ffffff' ? '' : `color: inherit;`}
     ${bg === '#ffffff' ? '' : `background-color: ${bg} !important;`}
   }
   svg, img {