From df6027cf9f13f461e3ca0d5dfe2487bb6b2cf4a6 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Mon, 10 Nov 2025 02:17:35 +0800
Subject: [PATCH] fix(eink): avoid gray color in E-Ink mode (#2427)

---
 .../src/app/library/components/LibraryHeader.tsx       | 10 +++++-----
 .../src/app/reader/components/KOSyncResolver.tsx       |  2 +-
 .../src/app/reader/components/notebook/SearchBar.tsx   |  4 ++--
 .../src/app/reader/components/sidebar/SearchBar.tsx    |  4 ++--
 apps/readest-app/src/styles/globals.css                |  4 ----
 5 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/apps/readest-app/src/app/library/components/LibraryHeader.tsx b/apps/readest-app/src/app/library/components/LibraryHeader.tsx
index cee19737..a54f6fe4 100644
--- a/apps/readest-app/src/app/library/components/LibraryHeader.tsx
+++ b/apps/readest-app/src/app/library/components/LibraryHeader.tsx
@@ -137,7 +137,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
             </button>
           )}
           <div className='relative flex h-9 w-full items-center sm:h-7'>
-            <span className='absolute left-3 text-gray-500'>
+            <span className='text-base-content/50 absolute left-3'>
               <FaSearch className='h-4 w-4' />
             </span>
             <input
@@ -163,7 +163,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
               )}
             />
           </div>
-          <div className='absolute right-4 flex items-center space-x-2 text-gray-500 sm:space-x-4'>
+          <div className='text-base-content/50 absolute right-4 flex items-center space-x-2 sm:space-x-4'>
             {searchQuery && (
               <button
                 type='button'
@@ -171,7 +171,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
                   setSearchQuery('');
                   debouncedUpdateQueryParam('');
                 }}
-                className='pe-1 text-gray-400 hover:text-gray-600'
+                className='text-base-content/40 hover:text-base-content/60 pe-1'
                 aria-label={_('Clear Search')}
               >
                 <IoMdCloseCircle className='h-4 w-4' />
@@ -197,9 +197,9 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
                 className='h-6'
               >
                 {isSelectMode ? (
-                  <PiSelectionAllFill role='button' className='h-6 w-6 text-gray-500' />
+                  <PiSelectionAllFill role='button' className='text-base-content/60 h-6 w-6' />
                 ) : (
-                  <PiSelectionAll role='button' className='h-6 w-6 text-gray-500' />
+                  <PiSelectionAll role='button' className='text-base-content/60 h-6 w-6' />
                 )}
               </button>
             )}
diff --git a/apps/readest-app/src/app/reader/components/KOSyncResolver.tsx b/apps/readest-app/src/app/reader/components/KOSyncResolver.tsx
index 52f7f455..6271b5bc 100644
--- a/apps/readest-app/src/app/reader/components/KOSyncResolver.tsx
+++ b/apps/readest-app/src/app/reader/components/KOSyncResolver.tsx
@@ -33,7 +33,7 @@ const KOSyncConflictResolver: React.FC<KOSyncConflictResolverProps> = ({
           onClick={onResolveWithLocal}
         >
           <span>{_('Local Progress')}</span>
-          <span className='text-xs font-normal normal-case text-gray-500'>
+          <span className='text-base-content/50 text-xs font-normal normal-case'>
             {details.local.preview}
           </span>
         </button>
diff --git a/apps/readest-app/src/app/reader/components/notebook/SearchBar.tsx b/apps/readest-app/src/app/reader/components/notebook/SearchBar.tsx
index 7e1d64ca..f65e30bb 100644
--- a/apps/readest-app/src/app/reader/components/notebook/SearchBar.tsx
+++ b/apps/readest-app/src/app/reader/components/notebook/SearchBar.tsx
@@ -122,7 +122,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
     <div className='relative px-3 py-2'>
       <div className='bg-base-100 flex h-8 items-center rounded-lg'>
         <div className='pl-3'>
-          <FaSearch size={iconSize16} className='text-gray-500' />
+          <FaSearch size={iconSize16} className='text-base-content/50' />
         </div>
 
         <input
@@ -141,7 +141,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
               onClick={handleClearSearch}
               className='btn btn-ghost h-8 min-h-8 w-8 rounded-none rounded-r-lg p-0'
             >
-              <FaTimes size={iconSize12} className='text-gray-500' />
+              <FaTimes size={iconSize12} className='text-base-content/50' />
             </button>
           </div>
         )}
diff --git a/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx b/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx
index 900302db..63bc1808 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx
@@ -191,7 +191,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
     <div className='relative p-2'>
       <div className='bg-base-100 flex h-8 items-center rounded-lg'>
         <div className='pl-3'>
-          <FaSearch size={iconSize16} className='text-gray-500' />
+          <FaSearch size={iconSize16} className='text-base-content/50' />
         </div>
 
         <input
@@ -213,7 +213,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
             )}
             menuClassName={window.innerWidth < 640 ? 'no-triangle mt-1' : 'dropdown-center mt-3'}
             buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0 rounded-none rounded-r-lg'
-            toggleButton={<FaChevronDown size={iconSize12} className='text-gray-500' />}
+            toggleButton={<FaChevronDown size={iconSize12} className='text-base-content/50' />}
           >
             <SearchOptions
               searchConfig={searchConfig}
diff --git a/apps/readest-app/src/styles/globals.css b/apps/readest-app/src/styles/globals.css
index b1d29a04..a7b1c94c 100644
--- a/apps/readest-app/src/styles/globals.css
+++ b/apps/readest-app/src/styles/globals.css
@@ -424,10 +424,6 @@ foliate-view {
   color: theme('colors.base-content') !important;
 }
 
-[data-eink="true"] [class*="text-gray"] {
-  color: theme('colors.base-content') !important;
-}
-
 [data-eink="true"] [class*="text-neutral-content"] {
   color: theme('colors.base-content') !important;
 }