darkreader 4.9.83 → 4.9.84

package/README.md

@@ -43,7 +43,7 @@ Please note that if you encounter error `Too many open files (os error 24)`, the
 
 ### Bundling with official Firefox store signatures (experimental)
 
-Prior to publication, extension stores provide digital signatures for extensions. These digital signatures certify the integrity of the archive (that extension bundle did not get corrupted or bit-rotted) and that extension store preformed very basic extension validation.
+Prior to publication, extension stores provide digital signatures for extensions. These digital signatures certify the integrity of the archive (that extension bundle did not get corrupted or bit-rotted) and that extension store performed very basic extension validation.
 
 Dark Reader repository contains these digital signatures and you can add them to the extension bundle. The following will build Dark Reader for Firefox version 4.9.63:
 ```
@@ -147,7 +147,7 @@ Step 1: change Dark Reader's settings.
 - Click on the Dark Reader icon.
 - Click on the `Dev tools` button (in the bottom-right corner).
 - Click on the `Preview new design button`.
-- Enable the `Enable on restricted pages` setting under `Settings` -> `Site list`.
+- Enable the `Enable on restricted pages` setting under `Settings` -> `Advanced`.
 
 Step 2: change Firefox's settings.
 

package/darkreader.js

@@ -1,5 +1,5 @@
 /**
- * Dark Reader v4.9.83
+ * Dark Reader v4.9.84
  * https://darkreader.org/
  */
 
@@ -127,6 +127,7 @@
     const isMatchMediaChangeEventListenerSupported =
         typeof MediaQueryList === "function" &&
         typeof MediaQueryList.prototype.addEventListener === "function";
+    const isLayerRuleSupported = typeof CSSLayerBlockRule === "function";
     (() => {
         const m = userAgent.match(/chrom(?:e|ium)(?:\/| )([^ ]+)/);
         if (m && m[1]) {
@@ -1156,7 +1157,7 @@
         if (layerRules.has(rule)) {
             return true;
         }
-        if (rule instanceof CSSLayerBlockRule) {
+        if (isLayerRuleSupported && rule instanceof CSSLayerBlockRule) {
             layerRules.add(rule);
             return true;
         }
@@ -2348,18 +2349,10 @@
                 isDark: false,
                 isLight: false,
                 isTransparent: false,
-                isLarge: false,
-                isTooLarge: false
-            };
-        }
-        if (sw * sh > LARGE_IMAGE_PIXELS_COUNT) {
-            return {
-                isDark: false,
-                isLight: false,
-                isTransparent: false,
-                isLarge: true
+                isLarge: false
             };
         }
+        const isLarge = sw * sh > LARGE_IMAGE_PIXELS_COUNT;
         const sourcePixelsCount = sw * sh;
         const k = Math.min(
             1,
@@ -2412,7 +2405,7 @@
             isTransparent:
                 transparentPixelsCount / totalPixelsCount >=
                 TRANSPARENT_IMAGE_THRESHOLD,
-            isLarge: false
+            isLarge
         };
     }
     let isBlobURLSupported = null;
@@ -2745,6 +2738,11 @@
             `    border-color: ${modifyBorderColor({r: 128, g: 128, b: 128}, theme)};`
         );
         lines.push("}");
+        lines.push("mark {");
+        lines.push(
+            `    color: ${modifyForegroundColor({r: 0, g: 0, b: 0}, theme)};`
+        );
+        lines.push("}");
         lines.push("::placeholder {");
         lines.push(
             `    color: ${modifyForegroundColor({r: 169, g: 169, b: 169}, theme)};`
@@ -2766,6 +2764,10 @@
         if (theme.selectionColor) {
             lines.push(getModifiedSelectionStyle(theme));
         }
+        if (isLayerRuleSupported) {
+            lines.unshift("@layer {");
+            lines.push("}");
+        }
         return lines.join("\n");
     }
     function getSelectionColor(theme) {
@@ -3100,9 +3102,9 @@
                 const logSrc = imageDetails.src.startsWith("data:")
                     ? "data:"
                     : imageDetails.src;
-                if (isLarge) {
-                    logInfo(`Not modifying too large image ${logSrc}`);
-                    result = null;
+                if (isLarge && isLight && !isTransparent && theme.mode === 1) {
+                    logInfo(`Hiding large light image ${logSrc}`);
+                    result = "none";
                 } else if (
                     isDark &&
                     isTransparent &&
@@ -4155,6 +4157,11 @@
                     "}"
                 ].join("\n");
             })
+            .concat([
+                "[data-darkreader-inline-invert] {",
+                "    filter: invert(100%) hue-rotate(180deg);",
+                "}"
+            ])
             .join("\n");
     }
     function getInlineStyleElements(root) {
@@ -4292,7 +4299,23 @@
         attrObservers.clear();
     }
     const inlineStyleCache = new WeakMap();
+    const svgInversionCache = new WeakSet();
+    const svgAnalysisConditionCache = new WeakMap();
     const themeProps = ["brightness", "contrast", "grayscale", "sepia", "mode"];
+    function shouldAnalyzeSVGAsImage(svg) {
+        if (svgAnalysisConditionCache.has(svg)) {
+            return svgAnalysisConditionCache.get(svg);
+        }
+        const shouldAnalyze = Boolean(
+            svg &&
+                (svg.role === "img" ||
+                    svg.parentElement?.role === "img" ||
+                    svg.getAttribute("class")?.includes("logo") ||
+                    svg.parentElement?.getAttribute("class")?.includes("logo"))
+        );
+        svgAnalysisConditionCache.set(svg, shouldAnalyze);
+        return shouldAnalyze;
+    }
     function getInlineStyleCacheKey(el, theme) {
         return INLINE_STYLE_ATTRS.map(
             (attr) => `${attr}="${el.getAttribute(attr)}"`
@@ -4401,6 +4424,46 @@
                 return;
             }
         }
+        const isSVGElement = element instanceof SVGElement;
+        const svg = isSVGElement
+            ? element.ownerSVGElement ??
+              (element instanceof SVGSVGElement ? element : null)
+            : null;
+        if (isSVGElement && theme.mode === 1 && svg) {
+            if (svgInversionCache.has(svg)) {
+                return;
+            }
+            if (shouldAnalyzeSVGAsImage(svg)) {
+                svgInversionCache.add(svg);
+                const handleSVGRoot = () => {
+                    let svgString = svg.outerHTML;
+                    svgString = svgString.replaceAll(
+                        '<style class="darkreader darkreader--sync" media="screen"></style>',
+                        ""
+                    );
+                    const dataURL = `data:image/svg+xml;base64,${btoa(svgString)}`;
+                    getImageDetails(dataURL).then((details) => {
+                        if (
+                            (details.isDark && details.isTransparent) ||
+                            (details.isLarge &&
+                                details.isLight &&
+                                !details.isTransparent)
+                        ) {
+                            svg.setAttribute(
+                                "data-darkreader-inline-invert",
+                                ""
+                            );
+                        }
+                    });
+                };
+                if (isReadyStateComplete()) {
+                    handleSVGRoot();
+                } else {
+                    addReadyStateCompleteListener(handleSVGRoot);
+                }
+                return;
+            }
+        }
         if (element.hasAttribute("bgcolor")) {
             let value = element.getAttribute("bgcolor");
             if (
@@ -4433,7 +4496,7 @@
             }
             setCustomProp("color", "color", value);
         }
-        if (element instanceof SVGElement) {
+        if (isSVGElement) {
             if (element.hasAttribute("fill")) {
                 const SMALL_SVG_LIMIT = 32;
                 const value = element.getAttribute("fill");

package/index.d.ts

@@ -153,7 +153,7 @@ declare namespace DarkReader {
 
         /**
          * A toggle to disable the proxying of `document.styleSheets`.
-         * This is a API-Exclusive option, as it can break legitmate websites,
+         * This is a API-Exclusive option, as it can break legitimate websites,
          * who are using the Dark Reader API.
          */
         disableStyleSheetsProxy: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "darkreader",
-  "version": "4.9.83",
+  "version": "4.9.84",
   "description": "Dark mode for every website",
   "scripts": {
     "api": "node --max-old-space-size=3072 tasks/cli.js build --api",