fix(eink): more readablility for E-Ink mode on the library page, closes #2364 (#2395)

This also closes #2391 and closes #2394.

apps/readest-app/src/app/library/components/Bookshelf.tsx

@@ -363,7 +363,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
           <div
             className={clsx(
               'flex items-center justify-center shadow-lg',
-              'bg-gray-600 text-xs text-white',
+              'bg-base-300 text-base-content text-xs',
               'mx-auto w-fit space-x-6 rounded-lg p-4',
             )}
           >

apps/readest-app/src/app/library/components/LibraryHeader.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { FaSearch } from 'react-icons/fa';
 import { PiPlus } from 'react-icons/pi';
-import { PiSelectionAllDuotone } from 'react-icons/pi';
+import { PiSelectionAll, PiSelectionAllFill } from 'react-icons/pi';
 import { PiDotsThreeCircle } from 'react-icons/pi';
 import { MdOutlineMenu, MdArrowBackIosNew } from 'react-icons/md';
 import { IoMdCloseCircle } from 'react-icons/io';
@@ -152,6 +152,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
               className={clsx(
                 'input rounded-badge bg-base-300/45 h-9 w-full pl-10 pr-10 sm:h-7',
                 'font-sans text-sm font-light',
+                'placeholder:text-base-content/50',
                 'border-none focus:outline-none focus:ring-0',
               )}
             />
@@ -189,10 +190,11 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
                 title={_('Select Books')}
                 className='h-6'
               >
-                <PiSelectionAllDuotone
-                  role='button'
-                  className={`h-6 w-6 ${isSelectMode ? 'fill-gray-400' : 'fill-gray-500'}`}
-                />
+                {isSelectMode ? (
+                  <PiSelectionAllFill role='button' className='h-6 w-6 text-gray-500' />
+                ) : (
+                  <PiSelectionAll role='button' className='h-6 w-6 text-gray-500' />
+                )}
               </button>
             )}
           </div>

apps/readest-app/src/app/library/page.tsx

@@ -96,6 +96,7 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
   const [pendingNavigationBookIds, setPendingNavigationBookIds] = useState<string[] | null>(null);
   const isInitiating = useRef(false);
 
+  const viewSettings = settings.globalViewSettings;
   const demoBooks = useDemoBooks();
   const osRef = useRef<OverlayScrollbarsComponentRef>(null);
   const containerRef: React.MutableRefObject<HTMLDivElement | null> = useRef(null);
@@ -604,7 +605,8 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
       ref={pageRef}
       aria-label='Your Library'
       className={clsx(
-        'library-page bg-base-200 text-base-content flex h-[100vh] select-none flex-col overflow-hidden',
+        'library-page text-base-content flex h-[100vh] select-none flex-col overflow-hidden',
+        viewSettings?.isEink ? 'bg-base-100' : 'bg-base-200',
         appService?.hasRoundedWindow && isRoundedWindow && 'window-border rounded-window',
       )}
     >

apps/readest-app/src/components/Providers.tsx

@@ -60,8 +60,8 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
           setScreenBrightness(brightness / 100);
         }
         applyBackgroundTexture(envConfig, globalViewSettings);
-        if (appService.isAndroidApp) {
-          applyEinkMode(globalViewSettings.isEink);
+        if (globalViewSettings.isEink) {
+          applyEinkMode(true);
         }
       });
     }

apps/readest-app/src/components/settings/ControlPanel.tsx

@@ -269,12 +269,12 @@ const ControlPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRes
         </div>
       </div>
 
-      {appService?.isMobileApp && (
+      {(appService?.isMobileApp || appService?.appPlatform === 'web') && (
         <div className='w-full'>
           <h2 className='mb-2 font-medium'>{_('Device')}</h2>
           <div className='card border-base-200 bg-base-100 border shadow'>
             <div className='divide-base-200 divide-y'>
-              {appService?.isAndroidApp && (
+              {(appService?.isAndroidApp || appService?.appPlatform === 'web') && (
                 <div className='config-item'>
                   <span className=''>{_('E-Ink Mode')}</span>
                   <input
@@ -285,15 +285,17 @@ const ControlPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRes
                   />
                 </div>
               )}
-              <div className='config-item'>
-                <span className=''>{_('Auto Screen Brightness')}</span>
-                <input
-                  type='checkbox'
-                  className='toggle'
-                  checked={autoScreenBrightness}
-                  onChange={() => setAutoScreenBrightness(!autoScreenBrightness)}
-                />
-              </div>
+              {appService?.isMobileApp && (
+                <div className='config-item'>
+                  <span className=''>{_('Auto Screen Brightness')}</span>
+                  <input
+                    type='checkbox'
+                    className='toggle'
+                    checked={autoScreenBrightness}
+                    onChange={() => setAutoScreenBrightness(!autoScreenBrightness)}
+                  />
+                </div>
+              )}
             </div>
           </div>
         </div>

apps/readest-app/src/styles/globals.css

@@ -416,6 +416,18 @@ foliate-view {
   box-shadow: none !important;
 }
 
+[data-eink="true"] [class*="text-"] {
+  color: theme('colors.base-content') !important;
+}
+
+[data-eink="true"] [class*="bg-base-content"] {
+  background-color: theme('colors.base-content') !important;
+}
+
+[data-eink="true"] [class*="placeholder:"]::placeholder {
+  color: theme('colors.base-content') !important;
+}
+
 .no-transitions * {
   transition: none !important;
 }