From 8ba052dc81bf8667fdb5b9dd274d97bb762e7548 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Sat, 2 May 2026 00:05:36 +0800
Subject: [PATCH] fix(reader): pure black/white footer in eink mode (#3873)
 (#4024)

The footer NavigationBar and slide-up panels (Color, Progress, Font &
Layout) used `bg-base-200`, which is computed as a slightly-darker shade
of the theme's background. In eink mode this rendered as a visible grey
strip even when the user picked a pure white/black theme.

Switch to `bg-base-100` in eink mode and add a `border-base-content` top
border so the bar stays visually separated from the page area without
relying on a tinted background, matching the existing eink treatment
elsewhere (e.g. PageNavigationButtons, ImageViewer).
---
 .../src/app/reader/components/footerbar/ColorPanel.tsx         | 3 ++-
 .../src/app/reader/components/footerbar/FontLayoutPanel.tsx    | 3 ++-
 .../src/app/reader/components/footerbar/FooterBar.tsx          | 2 +-
 .../src/app/reader/components/footerbar/NavigationBar.tsx      | 3 ++-
 .../src/app/reader/components/footerbar/NavigationPanel.tsx    | 3 ++-
 5 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/footerbar/ColorPanel.tsx b/apps/readest-app/src/app/reader/components/footerbar/ColorPanel.tsx
index d051445c..0ad2222c 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/ColorPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/ColorPanel.tsx
@@ -77,7 +77,8 @@ export const ColorPanel: React.FC<ColorPanelProps> = ({
   };
 
   const classes = clsx(
-    'footerbar-color-mobile bg-base-200 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all',
+    'footerbar-color-mobile not-eink:bg-base-200 eink:bg-base-100 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all',
+    'eink:border-base-content eink:border-t',
     !forceMobileLayout && 'sm:hidden',
     actionTab === 'color'
       ? 'pointer-events-auto translate-y-0 pb-4 pt-8 ease-out'
diff --git a/apps/readest-app/src/app/reader/components/footerbar/FontLayoutPanel.tsx b/apps/readest-app/src/app/reader/components/footerbar/FontLayoutPanel.tsx
index ad684685..71d9684f 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/FontLayoutPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/FontLayoutPanel.tsx
@@ -93,7 +93,8 @@ export const FontLayoutPanel: React.FC<FontLayoutPanelProps> = ({
   }, []);
 
   const classes = clsx(
-    'footerbar-font-mobile bg-base-200 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all',
+    'footerbar-font-mobile not-eink:bg-base-200 eink:bg-base-100 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all',
+    'eink:border-base-content eink:border-t',
     !forceMobileLayout && 'sm:hidden',
     actionTab === 'font'
       ? 'pointer-events-auto translate-y-0 pb-4 pt-8 ease-out'
diff --git a/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
index d1eb3ffc..de861214 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
@@ -219,7 +219,7 @@ const FooterBar: React.FC<FooterBarProps> = ({
   const containerClasses = clsx(
     'footer-bar shadow-xs bottom-0 left-0 z-10 flex w-full flex-col',
     !forceMobileLayout && 'sm:h-[52px] sm:bg-base-100 sm:border-none',
-    'border-base-300/50 border-t',
+    'not-eink:border-base-300/50 eink:border-base-content border-t',
     'transition-[opacity,transform] duration-300',
     forceMobileLayout || window.innerWidth < 640 ? 'fixed' : 'absolute',
     appService?.hasRoundedWindow && 'rounded-window-bottom-right',
diff --git a/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx
index ffbfea37..2e4cb3f8 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx
@@ -39,7 +39,8 @@ export const NavigationBar: React.FC<NavigationBarProps> = ({
   return (
     <div
       className={clsx(
-        'bg-base-200 z-30 mt-auto flex w-full justify-between px-8 py-4',
+        'not-eink:bg-base-200 eink:bg-base-100 z-30 mt-auto flex w-full justify-between px-8 py-4',
+        'eink:border-base-content eink:border-t',
         !forceMobileLayout && 'sm:hidden',
       )}
       style={{
diff --git a/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx b/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx
index dd432bd1..73cfd7b3 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx
@@ -58,7 +58,8 @@ export const NavigationPanel: React.FC<NavigationPanelProps> = ({
   );
 
   const classes = clsx(
-    'footerbar-progress-mobile bg-base-200 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all',
+    'footerbar-progress-mobile not-eink:bg-base-200 eink:bg-base-100 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all',
+    'eink:border-base-content eink:border-t',
     !forceMobileLayout && 'sm:hidden',
     actionTab === 'progress'
       ? 'pointer-events-auto translate-y-0 pb-4 pt-8 ease-out'