From 2d12210606142f8bbf0ef692588c4f659d0c38e8 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Tue, 22 Jul 2025 00:17:16 +0800
Subject: [PATCH] css: multiply img color in light mode when overriding book
 color (#1656)

This fixed image color issue for EPUBs in #1649.
---
 apps/readest-app/src/utils/style.ts | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/apps/readest-app/src/utils/style.ts b/apps/readest-app/src/utils/style.ts
index 98262348..89cd1524 100644
--- a/apps/readest-app/src/utils/style.ts
+++ b/apps/readest-app/src/utils/style.ts
@@ -110,6 +110,13 @@ const getColorStyles = (
     html, body {
       color: ${fg};
     }
+    html[has-background], body[has-background] {
+      --background-set: var(--theme-bg-color);
+    }
+    html {
+      background-color: var(--theme-bg-color, transparent);
+      background: var(--background-set, none);
+    }
     div, p, h1, h2, h3, h4, h5, h6 {
       ${overrideColor ? `background-color: ${bg} !important;` : ''}
       ${overrideColor ? `color: ${fg} !important;` : ''}
@@ -129,6 +136,7 @@ const getColorStyles = (
     }
     img {
       ${isDarkMode && invertImgColorInDark ? 'filter: invert(100%);' : ''}
+      ${!isDarkMode && overrideColor ? 'mix-blend-mode: multiply;' : ''}
     }
     /* inline images */
     p img, span img, sup img {
@@ -190,18 +198,11 @@ const getLayoutStyles = (
       white-space: pre-wrap !important;
       tab-size: 2;
   }
-  html[has-background], body[has-background] {
-    --background-set: var(--theme-bg-color);
-  }
   html, body {
     ${writingMode === 'auto' ? '' : `writing-mode: ${writingMode} !important;`}
     text-align: var(--default-text-align);
     max-height: unset;
   }
-  html {
-    background-color: var(--theme-bg-color, transparent);
-    background: var(--background-set, none);
-  }
   body {
     overflow: unset;
     zoom: ${zoomLevel};