From b07c9eb6310bf110e219f95da16571d599598bd5 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Fri, 5 Jun 2026 00:28:30 +0800
Subject: [PATCH] fix(eink): make Custom Fonts panel readable in e-ink mode
 (#4454) (#4464)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The selected custom-font card used `bg-primary/50`, whose opacity suffix
dodges the e-ink `.bg-primary` normalizer — leaving a dark primary fill
under force-black `text-base-content` text, i.e. black-on-black (#4454).
Add `eink-bordered` so the selected card gets the same white-bg /
black-border / black-text treatment every other selected surface gets,
while staying distinct from the faint-bordered unselected cards.

The Import Font "+" badge had the same class of bug: e-ink's substring
matchers catch its `group-hover:bg-base-content` and `text-base-content/60`
utilities and paint a black glyph on a black circle. Pin the badge to an
intentional base-content circle with a base-100 glyph so the "+" stays
legible.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/readest-app/src/components/settings/CustomFonts.tsx | 6 +++++-
 apps/readest-app/src/styles/globals.css                  | 7 +++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/readest-app/src/components/settings/CustomFonts.tsx b/apps/readest-app/src/components/settings/CustomFonts.tsx
index dfe94ca2..ea7549ca 100644
--- a/apps/readest-app/src/components/settings/CustomFonts.tsx
+++ b/apps/readest-app/src/components/settings/CustomFonts.tsx
@@ -198,6 +198,8 @@ const CustomFonts: React.FC<CustomFontsProps> = ({ bookKey, onBack }) => {
         >
           <span
             className={clsx(
+              // eink-inverted keeps the "+" legible on its dark badge (#4454).
+              'eink-inverted',
               'flex h-5 w-5 items-center justify-center rounded-full',
               'bg-base-200 text-base-content/60',
               'transition-colors duration-150',
@@ -250,7 +252,9 @@ const CustomFonts: React.FC<CustomFontsProps> = ({ bookKey, onBack }) => {
             className={clsx(
               'card h-12 border shadow-sm',
               currentFontFamily === family.name
-                ? 'border-primary/50 bg-primary/50'
+                ? // eink-bordered: bg-primary/50 dodges the eink normalizer, so
+                  // without it the selected card is black-on-black (#4454).
+                  'border-primary/50 bg-primary/50 eink-bordered'
                 : `border-base-200 bg-base-100 ${isDeleteMode ? '' : 'cursor-pointer'}`,
             )}
             onClick={!isDeleteMode ? () => handleSelectFamily(family) : undefined}
diff --git a/apps/readest-app/src/styles/globals.css b/apps/readest-app/src/styles/globals.css
index 06fc0fe3..6ef6d017 100644
--- a/apps/readest-app/src/styles/globals.css
+++ b/apps/readest-app/src/styles/globals.css
@@ -530,6 +530,13 @@ input[type='range'].slider-input {
   background-color: theme('colors.base-content') !important;
 }
 
+/* Inverted chip for e-ink: base-content fill, base-100 content. Declared after
+   the substring matchers above so the content color wins the cascade. */
+[data-eink='true'] .eink-inverted {
+  background-color: theme('colors.base-content') !important;
+  color: theme('colors.base-100') !important;
+}
+
 [data-eink='true'] [class*='font-light'] {
   font-weight: normal !important;
 }