Force colors except when using a white background

Fixes #1016. The main idea is taken from Readium CSS and is basically what Apple does, too. So there's not even a need to provide a way to opt out.
johnfactotum · Sep 24, 2023 · 29eed7e · 29eed7e
1 parent 6ebd8dd
commit 29eed7e
Showing 1 changed file with 34 additions and 0 deletions.
diff --git a/src/reader/reader.js b/src/reader/reader.js
@@ -187,6 +187,40 @@ const getCSS = ({ lineHeight, justify, hyphenate, invert, theme, userStylesheet
         tab-size: 2;
     }
 `, `
+    @media (prefers-color-scheme: light) {
+        ${theme.light.bg !== '#ffffff' ? `
+        html, body {
+            color: ${theme.light.fg} !important;
+            background: none !important;
+        }
+        body * {
+            color: inherit !important;
+            border-color: currentColor !important;
+            background-color: ${theme.light.bg} !important;
+        }
+        a:any-link {
+            color: ${theme.light.link} !important;
+        }
+        svg, img {
+            background-color: transparent !important;
+            mix-blend-mode: multiply;
+        }` : ''}
+    }
+    @media (prefers-color-scheme: dark) {
+        ${invert ? '' : `
+        html, body {
+            color: ${theme.dark.fg} !important;
+            background: none !important;
+        }
+        body * {
+            color: inherit !important;
+            border-color: currentColor !important;
+            background-color: ${theme.dark.bg} !important;
+        }
+        a:any-link {
+            color: ${theme.dark.link} !important;
+        }`}
+    }
     p, li, blockquote, dd {
         line-height: ${lineHeight};
         text-align: ${justify ? 'justify' : 'start'};