From b7864dded28435bea90e9977f37cb31f42a7aa4d Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Mon, 24 Nov 2025 16:56:26 +0800
Subject: [PATCH] fix(eink): adjust sidebar and notebook background color for
 eink, closes #2497 (#2529)

---
 .../src/app/reader/components/notebook/Notebook.tsx   |  9 +++++++--
 .../src/app/reader/components/sidebar/SideBar.tsx     | 11 ++++++++---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
index 8fda174d..f45e9798 100644
--- a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
+++ b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
@@ -201,15 +201,20 @@ const Notebook: React.FC = ({}) => {
   return isNotebookVisible ? (
     <>
       {!isNotebookPinned && (
-        <Overlay className='z-[45] bg-black/20' onDismiss={handleClickOverlay} />
+        <Overlay
+          className={clsx('z-[45]', viewSettings?.isEink ? '' : 'bg-black/20')}
+          onDismiss={handleClickOverlay}
+        />
       )}
       <div
         className={clsx(
-          'notebook-container bg-base-200 right-0 flex min-w-60 select-none flex-col',
+          'notebook-container right-0 flex min-w-60 select-none flex-col',
           'font-sans text-base font-normal sm:text-sm',
+          viewSettings?.isEink ? 'bg-base-100' : 'bg-base-200',
           appService?.isIOSApp ? 'h-[100vh]' : 'h-full',
           appService?.hasRoundedWindow && 'rounded-window-top-right rounded-window-bottom-right',
           isNotebookPinned ? 'z-20' : 'z-[45] shadow-2xl',
+          !isNotebookPinned && viewSettings?.isEink && 'border-base-content border-s',
         )}
         role='group'
         aria-label={_('Notebook')}
diff --git a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx b/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
index b23562de..37a987f2 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
@@ -206,15 +206,20 @@ const SideBar: React.FC<{
   return isSideBarVisible ? (
     <>
       {!isSideBarPinned && (
-        <Overlay className='z-[45] bg-black/50 sm:bg-black/20' onDismiss={handleClickOverlay} />
+        <Overlay
+          className={clsx('z-[45]', viewSettings?.isEink ? '' : 'bg-black/50 sm:bg-black/20')}
+          onDismiss={handleClickOverlay}
+        />
       )}
       <div
         className={clsx(
-          'sidebar-container bg-base-200 flex min-w-60 select-none flex-col',
-          appService?.isIOSApp ? 'h-[100vh]' : 'h-full',
+          'sidebar-container flex min-w-60 select-none flex-col',
           'transition-[padding-top] duration-300',
+          viewSettings?.isEink ? 'bg-base-100' : 'bg-base-200',
+          appService?.isIOSApp ? 'h-[100vh]' : 'h-full',
           appService?.hasRoundedWindow && 'rounded-window-top-left rounded-window-bottom-left',
           isSideBarPinned ? 'z-20' : 'z-[45] shadow-2xl',
+          !isSideBarPinned && viewSettings?.isEink && 'border-base-content border-e',
         )}
         role='group'
         aria-label={_('Sidebar')}