feat(eink): support color E-ink mode to display more colors, closes #3037 (#3074)

apps/readest-app/public/locales/ar/translation.json

@@ -976,5 +976,11 @@
   "Model available": "النموذج متاح",
   "Connection": "الاتصال",
   "Test Connection": "اختبار الاتصال",
-  "Connected": "متصل"
+  "Connected": "متصل",
+  "Custom Colors": "ألوان مخصصة",
+  "Color E-Ink Mode": "وضع الحبر الإلكتروني الملون",
+  "Reading Ruler": "مسطرة القراءة",
+  "Enable Reading Ruler": "تفعيل مسطرة القراءة",
+  "Lines to Highlight": "الأسطر المراد تمييزها",
+  "Ruler Color": "لون المسطرة"
 }

apps/readest-app/public/locales/bn/translation.json

@@ -936,5 +936,11 @@
   "Model available": "মডেল উপলব্ধ",
   "Connection": "সংযোগ",
   "Test Connection": "সংযোগ পরীক্ষা করুন",
-  "Connected": "সংযুক্ত"
+  "Connected": "সংযুক্ত",
+  "Custom Colors": "কাস্টম রঙ",
+  "Color E-Ink Mode": "কালার ই-ইঙ্ক মোড",
+  "Reading Ruler": "রিডিং রুলার",
+  "Enable Reading Ruler": "রিডিং রুলার সক্ষম করুন",
+  "Lines to Highlight": "হাইলাইট করার জন্য লাইন",
+  "Ruler Color": "রুলারের রঙ"
 }

apps/readest-app/public/locales/bo/translation.json

@@ -926,5 +926,11 @@
   "Model available": "དཔེ་གཞི་ཡོད།",
   "Connection": "འབྲེལ་མཐུད།",
   "Test Connection": "འབྲེལ་མཐུད་ཚོད་ལྟ།",
-  "Connected": "འབྲེལ་མཐུད་ཟིན།"
+  "Connected": "འབྲེལ་མཐུད་ཟིན།",
+  "Custom Colors": "རང་བཟོས་ཚོན་མདོག",
+  "Color E-Ink Mode": "ཚོན་ལྡན་གློག་རྡུལ་སྣག་ཚའི་རྣམ་པ།",
+  "Reading Ruler": "ལྟ་ཀློག་ཐིག་ཤིང་།",
+  "Enable Reading Ruler": "ལྟ་ཀློག་ཐིག་ཤིང་སྤྱོད་པ།",
+  "Lines to Highlight": "མངོན་གསལ་དུ་གཏོང་དགོས་པའི་ཐིག་ཕྲེང་།",
+  "Ruler Color": "ཐིག་ཤིང་ගི་ཚོན་མདོག"
 }

apps/readest-app/public/locales/de/translation.json

@@ -936,5 +936,11 @@
   "Model available": "Modell verfügbar",
   "Connection": "Verbindung",
   "Test Connection": "Verbindung testen",
-  "Connected": "Verbunden"
+  "Connected": "Verbunden",
+  "Custom Colors": "Benutzerdefinierte Farben",
+  "Color E-Ink Mode": "Farb-E-Ink-Modus",
+  "Reading Ruler": "Lese-Lineal",
+  "Enable Reading Ruler": "Lese-Lineal aktivieren",
+  "Lines to Highlight": "Hervorzuhebende Zeilen",
+  "Ruler Color": "Linealfarbe"
 }

apps/readest-app/public/locales/el/translation.json

@@ -936,5 +936,11 @@
   "Model available": "Το μοντέλο είναι διαθέσιμο",
   "Connection": "Σύνδεση",
   "Test Connection": "Δοκιμή σύνδεσης",
-  "Connected": "Συνδεδεμένο"
+  "Connected": "Συνδεδεμένο",
+  "Custom Colors": "Προσαρμοσμένα χρώματα",
+  "Color E-Ink Mode": "Λειτουργία έγχρωμου E-Ink",
+  "Reading Ruler": "Χάρακας ανάγνωσης",
+  "Enable Reading Ruler": "Ενεργοποίηση χάρακα ανάγνωσης",
+  "Lines to Highlight": "Γραμμές για επισήμανση",
+  "Ruler Color": "Χρώμα χάρακα"
 }

apps/readest-app/public/locales/es/translation.json

@@ -946,5 +946,11 @@
   "Model available": "Modelo disponible",
   "Connection": "Conexión",
   "Test Connection": "Probar conexión",
-  "Connected": "Conectado"
+  "Connected": "Conectado",
+  "Custom Colors": "Colores personalizados",
+  "Color E-Ink Mode": "Modo E-Ink a color",
+  "Reading Ruler": "Regla de lectura",
+  "Enable Reading Ruler": "Habilitar regla de lectura",
+  "Lines to Highlight": "Líneas a resaltar",
+  "Ruler Color": "Color de la regla"
 }

apps/readest-app/public/locales/fa/translation.json

@@ -936,5 +936,11 @@
   "Model available": "مدل در دسترس است",
   "Connection": "اتصال",
   "Test Connection": "تست اتصال",
-  "Connected": "متصل"
+  "Connected": "متصل",
+  "Custom Colors": "رنگ‌های سفارشی",
+  "Color E-Ink Mode": "حالت جوهر الکترونیک رنگی",
+  "Reading Ruler": "خط‌کش مطالعه",
+  "Enable Reading Ruler": "فعال‌سازی خط‌کش مطالعه",
+  "Lines to Highlight": "خطوط برای تمایز",
+  "Ruler Color": "رنگ خط‌کش"
 }

apps/readest-app/public/locales/fr/translation.json

@@ -946,5 +946,11 @@
   "Model available": "Modèle disponible",
   "Connection": "Connexion",
   "Test Connection": "Tester la connexion",
-  "Connected": "Connecté"
+  "Connected": "Connecté",
+  "Custom Colors": "Couleurs personnalisées",
+  "Color E-Ink Mode": "Mode E-Ink couleur",
+  "Reading Ruler": "Règle de lecture",
+  "Enable Reading Ruler": "Activer la règle de lecture",
+  "Lines to Highlight": "Lignes à mettre en évidence",
+  "Ruler Color": "Couleur de la règle"
 }

apps/readest-app/public/locales/hi/translation.json

@@ -936,5 +936,11 @@
   "Model available": "मॉडल उपलब्ध",
   "Connection": "कनेक्शन",
   "Test Connection": "कनेक्शन परीक्षण",
-  "Connected": "कनेक्टेड"
+  "Connected": "कनेक्टेड",
+  "Custom Colors": "कस्टम रंग",
+  "Color E-Ink Mode": "कलर ई-इंक मोड",
+  "Reading Ruler": "पठन रूलर",
+  "Enable Reading Ruler": "पठन रूलर सक्षम करें",
+  "Lines to Highlight": "हाइलाइट करने के लिए पंक्तियाँ",
+  "Ruler Color": "रूलर का रंग"
 }

apps/readest-app/public/locales/id/translation.json

@@ -926,5 +926,11 @@
   "Model available": "Model tersedia",
   "Connection": "Koneksi",
   "Test Connection": "Uji Koneksi",
-  "Connected": "Terhubung"
+  "Connected": "Terhubung",
+  "Custom Colors": "Warna Kustom",
+  "Color E-Ink Mode": "Mode E-Ink Berwarna",
+  "Reading Ruler": "Penggaris Membaca",
+  "Enable Reading Ruler": "Aktifkan Penggaris Membaca",
+  "Lines to Highlight": "Baris untuk Disorot",
+  "Ruler Color": "Warna Penggaris"
 }

apps/readest-app/public/locales/it/translation.json

@@ -946,5 +946,11 @@
   "Model available": "Modello disponibile",
   "Connection": "Connessione",
   "Test Connection": "Testa connessione",
-  "Connected": "Connesso"
+  "Connected": "Connesso",
+  "Custom Colors": "Colori personalizzati",
+  "Color E-Ink Mode": "Modalità E-Ink a colori",
+  "Reading Ruler": "Righello di lettura",
+  "Enable Reading Ruler": "Abilita righello di lettura",
+  "Lines to Highlight": "Righe da evidenziare",
+  "Ruler Color": "Colore del righello"
 }

apps/readest-app/public/locales/ja/translation.json

@@ -926,5 +926,11 @@
   "Model available": "モデルが利用可能",
   "Connection": "接続",
   "Test Connection": "接続をテスト",
-  "Connected": "接続済み"
+  "Connected": "接続済み",
+  "Custom Colors": "カスタムカラー",
+  "Color E-Ink Mode": "カラー電子ペーパーモード",
+  "Reading Ruler": "リーディングルーラー",
+  "Enable Reading Ruler": "リーディングルーラーを有効にする",
+  "Lines to Highlight": "ハイライトする行数",
+  "Ruler Color": "ルーラーの色"
 }

apps/readest-app/public/locales/ko/translation.json

@@ -926,5 +926,11 @@
   "Model available": "모델 사용 가능",
   "Connection": "연결",
   "Test Connection": "연결 테스트",
-  "Connected": "연결됨"
+  "Connected": "연결됨",
+  "Custom Colors": "사용자 정의 색상",
+  "Color E-Ink Mode": "컬러 E-Ink 모드",
+  "Reading Ruler": "읽기 자",
+  "Enable Reading Ruler": "읽기 자 활성화",
+  "Lines to Highlight": "강조할 줄 수",
+  "Ruler Color": "자 색상"
 }

apps/readest-app/public/locales/ms/translation.json

@@ -926,5 +926,11 @@
   "Model available": "Model tersedia",
   "Connection": "Sambungan",
   "Test Connection": "Uji Sambungan",
-  "Connected": "Disambung"
+  "Connected": "Disambung",
+  "Custom Colors": "Warna Tersuai",
+  "Color E-Ink Mode": "Mod E-Ink Warna",
+  "Reading Ruler": "Pembaris Membaca",
+  "Enable Reading Ruler": "Dayakan Pembaris Membaca",
+  "Lines to Highlight": "Baris untuk Diserlahkan",
+  "Ruler Color": "Warna Pembaris"
 }

apps/readest-app/public/locales/nl/translation.json

@@ -936,5 +936,11 @@
   "Model available": "Model beschikbaar",
   "Connection": "Verbinding",
   "Test Connection": "Verbinding testen",
-  "Connected": "Verbonden"
+  "Connected": "Verbonden",
+  "Custom Colors": "Aangepaste kleuren",
+  "Color E-Ink Mode": "Kleur E-Ink modus",
+  "Reading Ruler": "Leesliniaal",
+  "Enable Reading Ruler": "Leesliniaal inschakelen",
+  "Lines to Highlight": "Regels om te markeren",
+  "Ruler Color": "Kleur van liniaal"
 }

apps/readest-app/public/locales/pl/translation.json

@@ -956,5 +956,11 @@
   "Model available": "Model dostępny",
   "Connection": "Połączenie",
   "Test Connection": "Testuj połączenie",
-  "Connected": "Połączono"
+  "Connected": "Połączono",
+  "Custom Colors": "Niestandardowe kolory",
+  "Color E-Ink Mode": "Tryb kolorowego e-papieru",
+  "Reading Ruler": "Linijka do czytania",
+  "Enable Reading Ruler": "Włącz linijkę do czytania",
+  "Lines to Highlight": "Linie do wyróżnienia",
+  "Ruler Color": "Kolor linijki"
 }

apps/readest-app/public/locales/pt/translation.json

@@ -946,5 +946,11 @@
   "Model available": "Modelo disponível",
   "Connection": "Conexão",
   "Test Connection": "Testar conexão",
-  "Connected": "Conectado"
+  "Connected": "Conectado",
+  "Custom Colors": "Cores personalizadas",
+  "Color E-Ink Mode": "Modo E-Ink colorido",
+  "Reading Ruler": "Régua de leitura",
+  "Enable Reading Ruler": "Ativar régua de leitura",
+  "Lines to Highlight": "Linhas para destacar",
+  "Ruler Color": "Cor da régua"
 }

apps/readest-app/public/locales/ru/translation.json

@@ -956,5 +956,11 @@
   "Model available": "Модель доступна",
   "Connection": "Соединение",
   "Test Connection": "Проверить соединение",
-  "Connected": "Подключено"
+  "Connected": "Подключено",
+  "Custom Colors": "Пользовательские цвета",
+  "Color E-Ink Mode": "Режим цветных электронных чернил",
+  "Reading Ruler": "Линейка для чтения",
+  "Enable Reading Ruler": "Включить линейку для чтения",
+  "Lines to Highlight": "Строк для выделения",
+  "Ruler Color": "Цвет линейки"
 }

apps/readest-app/public/locales/si/translation.json

@@ -936,5 +936,11 @@
   "Model available": "මාදිලිය ලබා ගත හැකිය",
   "Connection": "සම්බන්ධතාවය",
   "Test Connection": "සම්බන්ධතාවය පරීක්ෂා කරන්න",
-  "Connected": "සම්බන්ධ විය"
+  "Connected": "සම්බන්ධ විය",
+  "Custom Colors": "අභිමත වර්ණ",
+  "Color E-Ink Mode": "වර්ණ E-Ink මාදිලිය",
+  "Reading Ruler": "කියවීමේ රූල",
+  "Enable Reading Ruler": "කියවීමේ රූල සක්‍රීය කරන්න",
+  "Lines to Highlight": "මතුකර පෙන්විය යුතු පේළි",
+  "Ruler Color": "රූලේ වර්ණය"
 }

apps/readest-app/public/locales/sv/translation.json

@@ -936,5 +936,11 @@
   "Model available": "Modell tillgänglig",
   "Connection": "Anslutning",
   "Test Connection": "Testa anslutning",
-  "Connected": "Ansluten"
+  "Connected": "Ansluten",
+  "Custom Colors": "Anpassade färger",
+  "Color E-Ink Mode": "Färg-E-Ink-läge",
+  "Reading Ruler": "Läs-linjal",
+  "Enable Reading Ruler": "Aktivera läs-linjal",
+  "Lines to Highlight": "Rader att markera",
+  "Ruler Color": "Linjalens färg"
 }

apps/readest-app/public/locales/ta/translation.json

@@ -936,5 +936,11 @@
   "Model available": "மாதிரி கிடைக்கிறது",
   "Connection": "இணைப்பு",
   "Test Connection": "இணைப்பைச் சோதிக்கவும்",
-  "Connected": "இணைக்கப்பட்டது"
+  "Connected": "இணைக்கப்பட்டது",
+  "Custom Colors": "தனிப்பயன் வண்ணங்கள்",
+  "Color E-Ink Mode": "வண்ண இ-இங்க் பயன்முறை",
+  "Reading Ruler": "வாசிப்பு அளவுகோல்",
+  "Enable Reading Ruler": "வாசிப்பு அளவுகோலை இயக்கு",
+  "Lines to Highlight": "சிறப்பித்துக் காட்ட வேண்டிய வரிகள்",
+  "Ruler Color": "அளவுகோல் வண்ணம்"
 }

apps/readest-app/public/locales/th/translation.json

@@ -926,5 +926,11 @@
   "Model available": "โมเดลพร้อมใช้งาน",
   "Connection": "การเชื่อมต่อ",
   "Test Connection": "ทดสอบการเชื่อมต่อ",
-  "Connected": "เชื่อมต่อแล้ว"
+  "Connected": "เชื่อมต่อแล้ว",
+  "Custom Colors": "สีที่กำหนดเอง",
+  "Color E-Ink Mode": "โหมด E-Ink สี",
+  "Reading Ruler": "ไม้บรรทัดการอ่าน",
+  "Enable Reading Ruler": "เปิดใช้งานไม้บรรทัดการอ่าน",
+  "Lines to Highlight": "บรรทัดที่ต้องการเน้น",
+  "Ruler Color": "สีไม้บรรทัด"
 }

apps/readest-app/public/locales/tr/translation.json

@@ -936,5 +936,11 @@
   "Model available": "Model mevcut",
   "Connection": "Bağlantı",
   "Test Connection": "Bağlantıyı Test Et",
-  "Connected": "Bağlandı"
+  "Connected": "Bağlandı",
+  "Custom Colors": "Özel Renkler",
+  "Color E-Ink Mode": "Renkli E-Ink Modu",
+  "Reading Ruler": "Okuma Cetveli",
+  "Enable Reading Ruler": "Okuma Cetvelini Etkinleştir",
+  "Lines to Highlight": "Vurgulanacak Satırlar",
+  "Ruler Color": "Cetvel Rengi"
 }

apps/readest-app/public/locales/uk/translation.json

@@ -956,5 +956,11 @@
   "Model available": "Модель доступна",
   "Connection": "З'єднання",
   "Test Connection": "Перевірити з'єднання",
-  "Connected": "Підключено"
+  "Connected": "Підключено",
+  "Custom Colors": "Спеціальні кольори",
+  "Color E-Ink Mode": "Кольоровий режим E-Ink",
+  "Reading Ruler": "Лінійка для читання",
+  "Enable Reading Ruler": "Увімкнути лінійку для читання",
+  "Lines to Highlight": "Рядки для виділення",
+  "Ruler Color": "Коліර් лінійки"
 }

apps/readest-app/public/locales/vi/translation.json

@@ -926,5 +926,11 @@
   "Model available": "Mô hình khả dụng",
   "Connection": "Kết nối",
   "Test Connection": "Kiểm tra kết nối",
-  "Connected": "Đã kết nối"
+  "Connected": "Đã kết nối",
+  "Custom Colors": "Màu tùy chỉnh",
+  "Color E-Ink Mode": "Chế độ E-Ink màu",
+  "Reading Ruler": "Thước đọc",
+  "Enable Reading Ruler": "Bật thước đọc",
+  "Lines to Highlight": "Số dòng cần làm nổi bật",
+  "Ruler Color": "Màu thước"
 }

apps/readest-app/public/locales/zh-CN/translation.json

@@ -926,5 +926,11 @@
   "Model available": "模型可用",
   "Connection": "连接",
   "Test Connection": "测试连接",
-  "Connected": "已连接"
+  "Connected": "已连接",
+  "Custom Colors": "自定义颜色",
+  "Color E-Ink Mode": "彩色墨水屏模式",
+  "Reading Ruler": "阅读尺",
+  "Enable Reading Ruler": "启用阅读尺",
+  "Lines to Highlight": "突出显示行数",
+  "Ruler Color": "尺子颜色"
 }

apps/readest-app/public/locales/zh-TW/translation.json

@@ -926,5 +926,11 @@
   "Model available": "模型可用",
   "Connection": "連線",
   "Test Connection": "測試連線",
-  "Connected": "已連線"
+  "Connected": "已連線",
+  "Custom Colors": "自定義顏色",
+  "Color E-Ink Mode": "彩色墨水屏模式",
+  "Reading Ruler": "閱讀尺",
+  "Enable Reading Ruler": "啟用閱讀尺",
+  "Lines to Highlight": "突出顯示行數",
+  "Ruler Color": "尺子顏色"
 }

apps/readest-app/src/app/reader/components/annotator/Annotator.tsx

@@ -304,7 +304,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
   const onDrawAnnotation = (event: Event) => {
     const viewSettings = getViewSettings(bookKey)!;
-    const isEink = viewSettings.isEink;
+    const isBwEink = viewSettings.isEink && !viewSettings.isColorEink;
     const detail = (event as CustomEvent).detail;
     const { draw, annotation, doc, range } = detail;
     const { style, color } = annotation as BookNote;
@@ -318,7 +318,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       const { writingMode } = defaultView.getComputedStyle(el);
       draw(Overlayer.bubble, { writingMode });
     } else if (style === 'highlight') {
-      draw(Overlayer.highlight, { color: isEink ? einkBgColor : hexColor });
+      draw(Overlayer.highlight, { color: isBwEink ? einkBgColor : hexColor });
     } else if (['underline', 'squiggly'].includes(style as string)) {
       const { defaultView } = doc;
       const node = range.startContainer;
@@ -334,7 +334,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         : (lineHeightValue - fontSizeValue) / 2 - strokeWidth + horizontalCompensation;
       draw(Overlayer[style as keyof typeof Overlayer], {
         writingMode,
-        color: isEink ? einkFgColor : hexColor,
+        color: isBwEink ? einkFgColor : hexColor,
         padding,
       });
     }

apps/readest-app/src/app/reader/components/annotator/HighlightOptions.tsx

@@ -46,6 +46,8 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
   const { isDarkMode } = useThemeStore();
   const globalReadSettings = settings.globalReadSettings;
   const isEink = settings.globalViewSettings.isEink;
+  const isColorEink = settings.globalViewSettings.isColorEink;
+  const isBwEink = isEink && !isColorEink;
   const einkBgColor = isDarkMode ? '#000000' : '#ffffff';
   const einkFgColor = isDarkMode ? '#ffffff' : '#000000';
   const customColors = globalReadSettings.customHighlightColors;
@@ -117,10 +119,10 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
                 height: size16,
                 ...(style === 'highlight' &&
                   selectedStyle === 'highlight' && {
-                    backgroundColor: isEink
+                    backgroundColor: isBwEink
                       ? einkFgColor
                       : getColorHex(customColors, selectedColor),
-                    color: isEink ? einkBgColor : '#d1d5db',
+                    color: isBwEink ? einkBgColor : '#d1d5db',
                     paddingTop: '2px',
                   }),
                 ...(style === 'highlight' &&
@@ -129,12 +131,12 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
                     paddingTop: '2px',
                   }),
                 ...((style === 'underline' || style === 'squiggly') && {
-                  color: isEink ? einkFgColor : '#d1d5db',
+                  color: isBwEink ? einkFgColor : '#d1d5db',
                   textDecoration: 'underline',
                   textDecorationThickness: '2px',
                   textDecorationColor:
                     selectedStyle === style
-                      ? isEink
+                      ? isBwEink
                         ? einkFgColor
                         : getColorHex(customColors, selectedColor)
                       : '#d1d5db',
@@ -162,7 +164,7 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
       >
         {defaultColors
           .concat(userColors)
-          .filter((c) => (isEink ? selectedColor === c : true))
+          .filter((c) => (isBwEink ? selectedColor === c : true))
           .map((color) => (
             <div key={color} className='flex items-center justify-center'>
               <button
@@ -179,7 +181,7 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
                 {selectedColor === color && (
                   <FaCheckCircle
                     size={size16}
-                    style={{ fill: isEink ? einkFgColor : customColors[color] || color }}
+                    style={{ fill: isBwEink ? einkFgColor : customColors[color] || color }}
                   />
                 )}
               </button>

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

@@ -43,6 +43,7 @@ const ControlPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRes
   const [copyToNotebook, setCopyToNotebook] = useState(viewSettings.copyToNotebook);
   const [animated, setAnimated] = useState(viewSettings.animated);
   const [isEink, setIsEink] = useState(viewSettings.isEink);
+  const [isColorEink, setIsColorEink] = useState(viewSettings.isColorEink);
   const [autoScreenBrightness, setAutoScreenBrightness] = useState(settings.autoScreenBrightness);
   const [allowScript, setAllowScript] = useState(viewSettings.allowScript);
 
@@ -147,6 +148,11 @@ const ControlPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRes
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isEink]);
 
+  useEffect(() => {
+    saveViewSettings(envConfig, bookKey, 'isColorEink', isColorEink);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isColorEink]);
+
   useEffect(() => {
     if (autoScreenBrightness === settings.autoScreenBrightness) return;
     saveSysSettings(envConfig, 'autoScreenBrightness', autoScreenBrightness);
@@ -369,6 +375,18 @@ const ControlPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRes
                   />
                 </div>
               )}
+              {(appService?.isAndroidApp || appService?.appPlatform === 'web') && (
+                <div className='config-item'>
+                  <span className=''>{_('Color E-Ink Mode')}</span>
+                  <input
+                    type='checkbox'
+                    className='toggle'
+                    disabled={!isEink}
+                    checked={isColorEink}
+                    onChange={() => setIsColorEink(!isColorEink)}
+                  />
+                </div>
+              )}
               {appService?.isMobileApp && (
                 <div className='config-item'>
                   <span className=''>{_('Auto Screen Brightness')}</span>

apps/readest-app/src/hooks/useEinkMode.ts

@@ -1,20 +1,14 @@
-import { useThemeStore } from '@/store/themeStore';
 import { useCallback } from 'react';
 
 export const useEinkMode = () => {
-  const { setIsEinkMode } = useThemeStore();
-  const applyEinkMode = useCallback(
-    (isEink: boolean) => {
-      setIsEinkMode(isEink);
-      if (isEink) {
-        document.body.classList.add('no-transitions');
-      } else {
-        document.body.classList.remove('no-transitions');
-      }
-      document.documentElement.setAttribute('data-eink', isEink.toString());
-    },
-    [setIsEinkMode],
-  );
+  const applyEinkMode = useCallback((isEink: boolean) => {
+    if (isEink) {
+      document.body.classList.add('no-transitions');
+    } else {
+      document.body.classList.remove('no-transitions');
+    }
+    document.documentElement.setAttribute('data-eink', isEink.toString());
+  }, []);
 
   return { applyEinkMode };
 };

apps/readest-app/src/hooks/useTheme.ts

@@ -18,10 +18,12 @@ export const useTheme = ({
 }: UseThemeProps = {}) => {
   const { appService } = useEnv();
   const { settings } = useSettingsStore();
+  const isEink = settings?.globalViewSettings?.isEink;
+  const isColorEink = settings?.globalViewSettings?.isColorEink;
+  const isBwEink = isEink && !isColorEink;
   const {
     themeColor,
     isDarkMode,
-    isEinkMode,
     showSystemUI,
     dismissSystemUI,
     updateAppTheme,
@@ -120,15 +122,15 @@ export const useTheme = ({
     document.documentElement.style.setProperty('color-scheme', colorScheme);
     document.documentElement.style.setProperty(
       '--overlayer-highlight-opacity',
-      isEinkMode ? '1.0' : '0.3',
+      isBwEink ? '1.0' : '0.3',
     );
     document.documentElement.style.setProperty(
       '--overlayer-highlight-blend-mode',
-      isEinkMode ? 'difference' : isDarkMode ? 'lighten' : 'normal',
+      isBwEink ? 'difference' : isDarkMode ? 'lighten' : 'normal',
     );
     document.documentElement.style.setProperty(
       '--bg-texture-blend-mode',
       isDarkMode ? 'lighten' : 'multiply',
     );
-  }, [themeColor, isDarkMode, isEinkMode]);
+  }, [themeColor, isDarkMode, isBwEink]);
 };

apps/readest-app/src/services/constants.ts

@@ -165,8 +165,6 @@ export const DEFAULT_BOOK_LAYOUT: BookLayout = {
   maxColumnCount: 2,
   maxInlineSize: getDefaultMaxInlineSize(),
   maxBlockSize: getDefaultMaxBlockSize(),
-  animated: false,
-  isEink: false,
   writingMode: 'auto',
   vertical: false,
   rtl: false,
@@ -251,6 +249,10 @@ export const DEFAULT_VIEW_CONFIG: ViewConfig = {
   progressStyle: 'fraction',
   progressInfoMode: 'all',
 
+  animated: false,
+  isEink: false,
+  isColorEink: false,
+
   readingRulerEnabled: false,
   readingRulerLines: 2,
   readingRulerPosition: 33,

apps/readest-app/src/store/themeStore.ts

@@ -20,7 +20,6 @@ interface ThemeState {
   systemIsDarkMode: boolean;
   themeCode: ThemeCode;
   isDarkMode: boolean;
-  isEinkMode: boolean;
   systemUIVisible: boolean;
   statusBarHeight: number;
   systemUIAlwaysHidden: boolean;
@@ -33,7 +32,6 @@ interface ThemeState {
   getIsDarkMode: () => boolean;
   setThemeMode: (mode: ThemeMode) => void;
   setThemeColor: (color: string) => void;
-  setIsEinkMode: (isEink: boolean) => void;
   updateAppTheme: (color: keyof Palette) => void;
   saveCustomTheme: (
     envConfig: EnvConfigType,
@@ -74,7 +72,6 @@ export const useThemeStore = create<ThemeState>((set, get) => {
     themeColor: initialThemeColor,
     systemIsDarkMode,
     isDarkMode,
-    isEinkMode: false,
     themeCode,
     systemUIVisible: false,
     statusBarHeight: 24,
@@ -86,9 +83,6 @@ export const useThemeStore = create<ThemeState>((set, get) => {
     setStatusBarHeight: (height: number) => set({ statusBarHeight: height }),
     setSystemUIAlwaysHidden: (hidden: boolean) => set({ systemUIAlwaysHidden: hidden }),
     getIsDarkMode: () => get().isDarkMode,
-    setIsEinkMode: (isEink: boolean) => {
-      set({ isEinkMode: isEink });
-    },
     setThemeMode: (mode) => {
       if (typeof window !== 'undefined' && localStorage) {
         localStorage.setItem('themeMode', mode);

apps/readest-app/src/types/book.ts

@@ -119,8 +119,6 @@ export interface BookLayout {
   maxColumnCount: number;
   maxInlineSize: number;
   maxBlockSize: number;
-  animated: boolean;
-  isEink: boolean;
   writingMode: WritingMode;
   vertical: boolean;
   rtl: boolean;
@@ -202,6 +200,10 @@ export interface ViewConfig {
   progressStyle: 'percentage' | 'fraction';
   progressInfoMode: 'remaining' | 'progress' | 'all' | 'none';
 
+  animated: boolean;
+  isEink: boolean;
+  isColorEink: boolean;
+
   readingRulerEnabled: boolean;
   readingRulerLines: number;
   readingRulerPosition: number;