css: properly handle theme color in dark mode for code blocks, closes #2281 (#2290)

apps/readest-app/src/app/reader/components/FoliateViewer.tsx

@@ -23,6 +23,7 @@ import { useKOSync } from '../hooks/useKOSync';
 import {
   applyFixedlayoutStyles,
   applyImageStyle,
+  applyThemeModeClass,
   applyTranslationStyle,
   getStyles,
   keepTextAlignment,
@@ -178,9 +179,8 @@ const FoliateViewer: React.FC<{
       }
 
       applyImageStyle(detail.doc);
-
+      applyThemeModeClass(detail.doc, isDarkMode);
       keepTextAlignment(detail.doc);
-
       removeTabIndex(detail.doc);
 
       // Inline scripts in tauri platforms are not executed by default
@@ -396,10 +396,13 @@ const FoliateViewer: React.FC<{
     if (viewRef.current && viewRef.current.renderer) {
       const viewSettings = getViewSettings(bookKey)!;
       viewRef.current.renderer.setStyles?.(getStyles(viewSettings));
-      if (bookDoc.rendition?.layout === 'pre-paginated') {
-        const docs = viewRef.current.renderer.getContents();
-        docs.forEach(({ doc }) => applyFixedlayoutStyles(doc, viewSettings));
-      }
+      const docs = viewRef.current.renderer.getContents();
+      docs.forEach(({ doc }) => {
+        if (bookDoc.rendition?.layout === 'pre-paginated') {
+          applyFixedlayoutStyles(doc, viewSettings);
+        }
+        applyThemeModeClass(doc, isDarkMode);
+      });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [themeCode, isDarkMode, viewSettings?.overrideColor, viewSettings?.invertImgColorInDark]);

apps/readest-app/src/utils/style.ts

@@ -132,7 +132,7 @@ const getColorStyles = (
       background-color: var(--theme-bg-color, transparent);
       background: var(--background-set, none);
     }
-    section, div, p, font, h1, h2, h3, h4, h5, h6, li, span {
+    section, blockquote, div, p, font, h1, h2, h3, h4, h5, h6, li, span {
       ${overrideColor ? `background-color: ${bg} !important;` : ''}
       ${overrideColor ? `color: ${fg} !important;` : ''}
       ${overrideColor ? `border-color: ${fg} !important;` : ''}
@@ -162,6 +162,16 @@ const getColorStyles = (
     p img, span img, sup img {
       mix-blend-mode: ${isDarkMode ? 'screen' : 'multiply'};
     }
+    /* code */
+    body.theme-dark code {
+      ${isDarkMode ? `color: ${fg}cc;` : ''}
+      ${isDarkMode ? `background: color-mix(in srgb, ${bg} 90%, #000);` : ''}
+      ${isDarkMode ? `background-color: color-mix(in srgb, ${bg} 90%, #000);` : ''}
+    }
+    blockquote, table * {
+      ${isDarkMode ? `background: color-mix(in srgb, ${bg} 80%, #000);` : ''}
+      ${isDarkMode ? `background-color: color-mix(in srgb, ${bg} 80%, #000);` : ''}
+    }
     /* override inline hardcoded text color */
     font[color="#000000"], font[color="#000"], font[color="black"],
     font[color="rgb(0,0,0)"], font[color="rgb(0, 0, 0)"],
@@ -586,6 +596,11 @@ export const transformStylesheet = (vw: number, vh: number, css: string) => {
   return css;
 };
 
+export const applyThemeModeClass = (document: Document, isDarkMode: boolean) => {
+  document.body.classList.remove('theme-light', 'theme-dark');
+  document.body.classList.add(isDarkMode ? 'theme-dark' : 'theme-light');
+};
+
 export const applyImageStyle = (document: Document) => {
   document.querySelectorAll('img').forEach((img) => {
     const parent = img.parentNode;