darkreader 4.9.105 → 4.9.109

package/darkreader.js

@@ -1,5 +1,5 @@
 /**
- * Dark Reader v4.9.105
+ * Dark Reader v4.9.109
  * https://darkreader.org/
  */
 
@@ -43,6 +43,8 @@
             "ui-bg-apply-dev-static-themes";
         MessageTypeUItoBG["RESET_DEV_STATIC_THEMES"] =
             "ui-bg-reset-dev-static-themes";
+        MessageTypeUItoBG["START_ACTIVATION"] = "ui-bg-start-activation";
+        MessageTypeUItoBG["RESET_ACTIVATION"] = "ui-bg-reset-activation";
         MessageTypeUItoBG["COLOR_SCHEME_CHANGE"] = "ui-bg-color-scheme-change";
         MessageTypeUItoBG["HIDE_HIGHLIGHTS"] = "ui-bg-hide-highlights";
     })(MessageTypeUItoBG || (MessageTypeUItoBG = {}));
@@ -372,9 +374,7 @@
     ];
     ({
         customThemes: filterModeSites.map((url) => {
-            const engine = isChromium
-                ? ThemeEngine.svgFilter
-                : ThemeEngine.cssFilter;
+            const engine = ThemeEngine.cssFilter;
             return {
                 url: [url],
                 theme: {...DEFAULT_THEME, engine},
@@ -985,10 +985,16 @@
     function parse($color) {
         const c = $color.trim().toLowerCase();
         if (c.includes("(from ")) {
+            if (c.indexOf("(from") !== c.lastIndexOf("(from")) {
+                return null;
+            }
             return domParseColor(c);
         }
         if (c.match(rgbMatch)) {
             if (c.startsWith("rgb(#") || c.startsWith("rgba(#")) {
+                if (c.lastIndexOf("rgb") > 0) {
+                    return null;
+                }
                 return domParseColor(c);
             }
             return parseRGB(c);
@@ -1011,7 +1017,10 @@
         if (
             c.endsWith(")") &&
             supportedColorFuncs.some(
-                (fn) => c.startsWith(fn) && c[fn.length] === "("
+                (fn) =>
+                    c.startsWith(fn) &&
+                    c[fn.length] === "(" &&
+                    c.lastIndexOf(fn) === 0
             )
         ) {
             return domParseColor(c);
@@ -1840,6 +1849,9 @@
         forEach(rules, (rule) => {
             if (isStyleRule(rule)) {
                 iterate(rule);
+                if (rule.cssRules?.length > 0) {
+                    iterateCSSRules(rule.cssRules, iterate);
+                }
             } else if (isImportRule(rule)) {
                 try {
                     iterateCSSRules(
@@ -2097,862 +2109,855 @@
         return null;
     }
 
-    const gradientLength = "gradient".length;
-    const conicGradient = "conic-";
-    const conicGradientLength = conicGradient.length;
-    const radialGradient = "radial-";
-    const linearGradient = "linear-";
-    function parseGradient(value) {
-        const result = [];
-        let index = 0;
-        let startIndex = conicGradient.length;
-        while ((index = value.indexOf("gradient", startIndex)) !== -1) {
-            let typeGradient;
-            [linearGradient, radialGradient, conicGradient].find(
-                (possibleType) => {
-                    if (index - possibleType.length >= 0) {
-                        const possibleGradient = value.substring(
-                            index - possibleType.length,
-                            index
-                        );
-                        if (possibleGradient === possibleType) {
-                            if (
-                                value.slice(
-                                    index - possibleType.length - 10,
-                                    index - possibleType.length - 1
-                                ) === "repeating"
-                            ) {
-                                typeGradient = `repeating-${possibleType}gradient`;
-                                return true;
-                            }
-                            if (
-                                value.slice(
-                                    index - possibleType.length - 8,
-                                    index - possibleType.length - 1
-                                ) === "-webkit"
-                            ) {
-                                typeGradient = `-webkit-${possibleType}gradient`;
-                                return true;
-                            }
-                            typeGradient = `${possibleType}gradient`;
-                            return true;
-                        }
-                    }
+    let variablesSheet;
+    const registeredColors = new Map();
+    function registerVariablesSheet(sheet) {
+        variablesSheet = sheet;
+        const types = ["background", "text", "border"];
+        registeredColors.forEach((registered) => {
+            types.forEach((type) => {
+                if (registered[type]) {
+                    const {variable, value} = registered[type];
+                    variablesSheet?.cssRules[0].style.setProperty(
+                        variable,
+                        value
+                    );
                 }
-            );
-            if (!typeGradient) {
-                break;
-            }
-            const {start, end} = getParenthesesRange(
-                value,
-                index + gradientLength
-            );
-            const match = value.substring(start + 1, end - 1);
-            startIndex = end + 1 + conicGradientLength;
-            result.push({
-                typeGradient,
-                match,
-                offset: typeGradient.length + 2,
-                index: index - typeGradient.length + gradientLength,
-                hasComma: true
             });
-        }
-        if (result.length) {
-            result[result.length - 1].hasComma = false;
-        }
-        return result;
-    }
-
-    const STORAGE_KEY_IMAGE_DETAILS_LIST = "__darkreader__imageDetails_v2_list";
-    const STORAGE_KEY_IMAGE_DETAILS_PREFIX = "__darkreader__imageDetails_v2_";
-    const STORAGE_KEY_CSS_FETCH_PREFIX = "__darkreader__cssFetch_";
-    let imageCacheTimeout = 0;
-    const imageDetailsCacheQueue = new Map();
-    const cachedImageUrls = [];
-    function writeImageDetailsQueue() {
-        imageDetailsCacheQueue.forEach((details, url) => {
-            if (url && url.startsWith("https://")) {
-                try {
-                    const json = JSON.stringify(details);
-                    sessionStorage.setItem(
-                        `${STORAGE_KEY_IMAGE_DETAILS_PREFIX}${url}`,
-                        json
-                    );
-                    cachedImageUrls.push(url);
-                } catch (err) {}
-            }
         });
-        imageDetailsCacheQueue.clear();
-        sessionStorage.setItem(
-            STORAGE_KEY_IMAGE_DETAILS_LIST,
-            JSON.stringify(cachedImageUrls)
-        );
-    }
-    function writeImageDetailsCache(url, imageDetails) {
-        if (!url || !url.startsWith("https://")) {
-            return;
-        }
-        imageDetailsCacheQueue.set(url, imageDetails);
-        clearTimeout(imageCacheTimeout);
-        imageCacheTimeout = setTimeout(writeImageDetailsQueue, 1000);
     }
-    function readImageDetailsCache(targetMap) {
-        try {
-            const jsonList = sessionStorage.getItem(
-                STORAGE_KEY_IMAGE_DETAILS_LIST
-            );
-            if (!jsonList) {
-                return;
-            }
-            const list = JSON.parse(jsonList);
-            list.forEach((url) => {
-                const json = sessionStorage.getItem(
-                    `${STORAGE_KEY_IMAGE_DETAILS_PREFIX}${url}`
-                );
-                if (json) {
-                    const details = JSON.parse(json);
-                    targetMap.set(url, details);
-                }
-            });
-        } catch (err) {}
+    function releaseVariablesSheet() {
+        variablesSheet = null;
+        clearColorPalette();
     }
-    function writeCSSFetchCache(url, cssText) {
-        const key = `${STORAGE_KEY_CSS_FETCH_PREFIX}${url}`;
-        try {
-            sessionStorage.setItem(key, cssText);
-        } catch (err) {}
+    function getRegisteredVariableValue(type, registered) {
+        return `var(${registered[type].variable}, ${registered[type].value})`;
     }
-    function readCSSFetchCache(url) {
-        const key = `${STORAGE_KEY_CSS_FETCH_PREFIX}${url}`;
-        try {
-            return sessionStorage.getItem(key) ?? null;
-        } catch (err) {}
+    function getRegisteredColor(type, parsed) {
+        const hex = rgbToHexString(parsed);
+        const registered = registeredColors.get(hex);
+        if (registered?.[type]) {
+            return getRegisteredVariableValue(type, registered);
+        }
         return null;
     }
-
-    function toSVGMatrix(matrix) {
-        return matrix
-            .slice(0, 4)
-            .map((m) => m.map((m) => m.toFixed(3)).join(" "))
-            .join(" ");
-    }
-    function getSVGFilterMatrixValue(config) {
-        return toSVGMatrix(createFilterMatrix(config));
-    }
-
-    const MAX_FRAME_DURATION = 1000 / 60;
-    class AsyncQueue {
-        constructor() {
-            this.queue = [];
-            this.timerId = null;
+    function registerColor(type, parsed, value) {
+        const hex = rgbToHexString(parsed);
+        let registered;
+        if (registeredColors.has(hex)) {
+            registered = registeredColors.get(hex);
+        } else {
+            const parsed = parseColorWithCache(hex);
+            registered = {parsed};
+            registeredColors.set(hex, registered);
         }
-        addTask(task) {
-            this.queue.push(task);
-            this.scheduleFrame();
+        const variable = `--darkreader-${type}-${hex.replace("#", "")}`;
+        registered[type] = {variable, value};
+        if (variablesSheet?.cssRules[0]?.style) {
+            variablesSheet?.cssRules[0].style.setProperty(variable, value);
         }
-        stop() {
-            if (this.timerId !== null) {
-                cancelAnimationFrame(this.timerId);
-                this.timerId = null;
+        return getRegisteredVariableValue(type, registered);
+    }
+    function getColorPalette() {
+        const background = [];
+        const border = [];
+        const text = [];
+        registeredColors.forEach((registered) => {
+            if (registered.background) {
+                background.push(registered.parsed);
             }
-            this.queue = [];
-        }
-        scheduleFrame() {
-            if (this.timerId) {
-                return;
+            if (registered.border) {
+                border.push(registered.parsed);
+            }
+            if (registered.text) {
+                text.push(registered.parsed);
             }
-            this.timerId = requestAnimationFrame(() => {
-                this.timerId = null;
-                const start = Date.now();
-                let cb;
-                while ((cb = this.queue.shift())) {
-                    cb();
-                    if (Date.now() - start >= MAX_FRAME_DURATION) {
-                        this.scheduleFrame();
-                        break;
-                    }
-                }
-            });
-        }
-    }
-
-    const resolvers$1 = new Map();
-    const rejectors = new Map();
-    async function bgFetch(request) {
-        if (window.DarkReader?.Plugins?.fetch) {
-            return window.DarkReader.Plugins.fetch(request);
-        }
-        return new Promise((resolve, reject) => {
-            const id = generateUID();
-            resolvers$1.set(id, resolve);
-            rejectors.set(id, reject);
-            chrome.runtime.sendMessage({
-                type: MessageTypeCStoBG.FETCH,
-                data: request,
-                id
-            });
         });
+        return {background, border, text};
+    }
+    function clearColorPalette() {
+        registeredColors.clear();
     }
-    chrome.runtime.onMessage.addListener(({type, data, error, id}) => {
-        if (type === MessageTypeBGtoCS.FETCH_RESPONSE) {
-            const resolve = resolvers$1.get(id);
-            const reject = rejectors.get(id);
-            resolvers$1.delete(id);
-            rejectors.delete(id);
-            if (error) {
-                reject && reject(error);
-            } else {
-                resolve && resolve(data);
-            }
-        }
-    });
 
-    const imageManager = new AsyncQueue();
-    async function getImageDetails(url) {
-        return new Promise(async (resolve, reject) => {
-            try {
-                const dataURL = url.startsWith("data:")
-                    ? url
-                    : await getDataURL(url);
-                const blob =
-                    tryConvertDataURLToBlobSync(dataURL) ??
-                    (await loadAsBlob(url));
-                let image;
-                if (dataURL.startsWith("data:image/svg+xml")) {
-                    image = await loadImage(dataURL);
-                } else {
-                    image =
-                        (await tryCreateImageBitmap(blob)) ??
-                        (await loadImage(dataURL));
-                }
-                imageManager.addTask(() => {
-                    const analysis = analyzeImage(image);
-                    resolve({
-                        src: url,
-                        dataURL: analysis.isLarge ? "" : dataURL,
-                        width: image.width,
-                        height: image.height,
-                        ...analysis
-                    });
-                });
-            } catch (error) {
-                reject(error);
-            }
-        });
+    function getBgPole(theme) {
+        const isDarkScheme = theme.mode === 1;
+        const prop = isDarkScheme
+            ? "darkSchemeBackgroundColor"
+            : "lightSchemeBackgroundColor";
+        return theme[prop];
     }
-    async function getDataURL(url) {
-        const parsedURL = new URL(url);
-        if (parsedURL.origin === location.origin) {
-            return await loadAsDataURL(url);
-        }
-        return await bgFetch({url, responseType: "data-url"});
+    function getFgPole(theme) {
+        const isDarkScheme = theme.mode === 1;
+        const prop = isDarkScheme
+            ? "darkSchemeTextColor"
+            : "lightSchemeTextColor";
+        return theme[prop];
     }
-    async function tryCreateImageBitmap(blob) {
-        try {
-            return await createImageBitmap(blob);
-        } catch (err) {
-            logWarn(
-                `Unable to create image bitmap for type ${blob.type}: ${String(err)}`
-            );
-            return null;
-        }
+    const colorModificationCache = new Map();
+    function clearColorModificationCache() {
+        colorModificationCache.clear();
     }
-    const INCOMPLETE_DOC_LOADING_IMAGE_LIMIT = 256;
-    let loadingImagesCount = 0;
-    async function loadImage(url) {
-        return new Promise((resolve, reject) => {
-            const image = new Image();
-            image.onload = () => resolve(image);
-            image.onerror = () => reject(`Unable to load image ${url}`);
-            if (
-                ++loadingImagesCount <= INCOMPLETE_DOC_LOADING_IMAGE_LIMIT ||
-                isReadyStateComplete()
-            ) {
-                image.src = url;
-            } else {
-                addReadyStateCompleteListener(() => (image.src = url));
-            }
+    const rgbCacheKeys = ["r", "g", "b", "a"];
+    const themeCacheKeys = [
+        "mode",
+        "brightness",
+        "contrast",
+        "grayscale",
+        "sepia",
+        "darkSchemeBackgroundColor",
+        "darkSchemeTextColor",
+        "lightSchemeBackgroundColor",
+        "lightSchemeTextColor"
+    ];
+    function getCacheId(rgb, theme) {
+        let resultId = "";
+        rgbCacheKeys.forEach((key) => {
+            resultId += `${rgb[key]};`;
         });
+        themeCacheKeys.forEach((key) => {
+            resultId += `${theme[key]};`;
+        });
+        return resultId;
     }
-    const MAX_ANALYSIS_PIXELS_COUNT = 32 * 32;
-    let canvas;
-    let context;
-    function createCanvas() {
-        const maxWidth = MAX_ANALYSIS_PIXELS_COUNT;
-        const maxHeight = MAX_ANALYSIS_PIXELS_COUNT;
-        canvas = document.createElement("canvas");
-        canvas.width = maxWidth;
-        canvas.height = maxHeight;
-        context = canvas.getContext("2d", {willReadFrequently: true});
-        context.imageSmoothingEnabled = false;
-    }
-    function removeCanvas() {
-        canvas = null;
-        context = null;
-    }
-    const LARGE_IMAGE_PIXELS_COUNT = 512 * 512;
-    function analyzeImage(image) {
-        if (!canvas) {
-            createCanvas();
-        }
-        let sw;
-        let sh;
-        if (image instanceof HTMLImageElement) {
-            sw = image.naturalWidth;
-            sh = image.naturalHeight;
+    function modifyColorWithCache(
+        rgb,
+        theme,
+        modifyHSL,
+        poleColor,
+        anotherPoleColor
+    ) {
+        let fnCache;
+        if (colorModificationCache.has(modifyHSL)) {
+            fnCache = colorModificationCache.get(modifyHSL);
         } else {
-            sw = image.width;
-            sh = image.height;
+            fnCache = new Map();
+            colorModificationCache.set(modifyHSL, fnCache);
         }
-        if (sw === 0 || sh === 0) {
-            logWarn("Image is empty");
-            return {
-                isDark: false,
-                isLight: false,
-                isTransparent: false,
-                isLarge: false
-            };
+        const id = getCacheId(rgb, theme);
+        if (fnCache.has(id)) {
+            return fnCache.get(id);
         }
-        const isLarge = sw * sh > LARGE_IMAGE_PIXELS_COUNT;
-        const sourcePixelsCount = sw * sh;
-        const k = Math.min(
-            1,
-            Math.sqrt(MAX_ANALYSIS_PIXELS_COUNT / sourcePixelsCount)
+        const hsl = rgbToHSL(rgb);
+        const pole = poleColor == null ? null : parseToHSLWithCache(poleColor);
+        const anotherPole =
+            anotherPoleColor == null
+                ? null
+                : parseToHSLWithCache(anotherPoleColor);
+        const modified = modifyHSL(hsl, pole, anotherPole);
+        const {r, g, b, a} = hslToRGB(modified);
+        const matrix = createFilterMatrix({...theme, mode: 0});
+        const [rf, gf, bf] = applyColorMatrix([r, g, b], matrix);
+        const color =
+            a === 1
+                ? rgbToHexString({r: rf, g: gf, b: bf})
+                : rgbToString({r: rf, g: gf, b: bf, a});
+        fnCache.set(id, color);
+        return color;
+    }
+    function modifyAndRegisterColor(type, rgb, theme, modifier) {
+        const registered = getRegisteredColor(type, rgb);
+        if (registered) {
+            return registered;
+        }
+        const value = modifier(rgb, theme);
+        return registerColor(type, rgb, value);
+    }
+    function modifyLightSchemeColor(rgb, theme) {
+        const poleBg = getBgPole(theme);
+        const poleFg = getFgPole(theme);
+        return modifyColorWithCache(
+            rgb,
+            theme,
+            modifyLightModeHSL,
+            poleFg,
+            poleBg
         );
-        const width = Math.ceil(sw * k);
-        const height = Math.ceil(sh * k);
-        context.clearRect(0, 0, width, height);
-        context.drawImage(image, 0, 0, sw, sh, 0, 0, width, height);
-        const imageData = context.getImageData(0, 0, width, height);
-        const d = imageData.data;
-        const TRANSPARENT_ALPHA_THRESHOLD = 0.05;
-        const DARK_LIGHTNESS_THRESHOLD = 0.4;
-        const LIGHT_LIGHTNESS_THRESHOLD = 0.7;
-        let transparentPixelsCount = 0;
-        let darkPixelsCount = 0;
-        let lightPixelsCount = 0;
-        let i, x, y;
-        let r, g, b, a;
-        let l;
-        for (y = 0; y < height; y++) {
-            for (x = 0; x < width; x++) {
-                i = 4 * (y * width + x);
-                r = d[i + 0];
-                g = d[i + 1];
-                b = d[i + 2];
-                a = d[i + 3];
-                if (a / 255 < TRANSPARENT_ALPHA_THRESHOLD) {
-                    transparentPixelsCount++;
-                } else {
-                    l = getSRGBLightness(r, g, b);
-                    if (l < DARK_LIGHTNESS_THRESHOLD) {
-                        darkPixelsCount++;
-                    }
-                    if (l > LIGHT_LIGHTNESS_THRESHOLD) {
-                        lightPixelsCount++;
-                    }
-                }
+    }
+    function modifyLightModeHSL({h, s, l, a}, poleFg, poleBg) {
+        const isDark = l < 0.5;
+        let isNeutral;
+        if (isDark) {
+            isNeutral = l < 0.2 || s < 0.12;
+        } else {
+            const isBlue = h > 200 && h < 280;
+            isNeutral = s < 0.24 || (l > 0.8 && isBlue);
+        }
+        let hx = h;
+        let sx = s;
+        if (isNeutral) {
+            if (isDark) {
+                hx = poleFg.h;
+                sx = poleFg.s;
+            } else {
+                hx = poleBg.h;
+                sx = poleBg.s;
             }
         }
-        const totalPixelsCount = width * height;
-        const opaquePixelsCount = totalPixelsCount - transparentPixelsCount;
-        const DARK_IMAGE_THRESHOLD = 0.7;
-        const LIGHT_IMAGE_THRESHOLD = 0.7;
-        const TRANSPARENT_IMAGE_THRESHOLD = 0.1;
-        return {
-            isDark: darkPixelsCount / opaquePixelsCount >= DARK_IMAGE_THRESHOLD,
-            isLight:
-                lightPixelsCount / opaquePixelsCount >= LIGHT_IMAGE_THRESHOLD,
-            isTransparent:
-                transparentPixelsCount / totalPixelsCount >=
-                TRANSPARENT_IMAGE_THRESHOLD,
-            isLarge
-        };
+        const lx = scale(l, 0, 1, poleFg.l, poleBg.l);
+        return {h: hx, s: sx, l: lx, a};
     }
-    let isBlobURLSupported = null;
-    let canUseProxy = false;
-    let blobURLCheckRequested = false;
-    const blobURLCheckAwaiters = [];
-    document.addEventListener(
-        "__darkreader__inlineScriptsAllowed",
-        () => (canUseProxy = true),
-        {once: true}
-    );
-    async function requestBlobURLCheck() {
-        if (!canUseProxy) {
-            return;
+    const MAX_BG_LIGHTNESS = 0.4;
+    function modifyBgHSL({h, s, l, a}, pole) {
+        const isDark = l < 0.5;
+        const isBlue = h > 200 && h < 280;
+        const isNeutral = s < 0.12 || (l > 0.8 && isBlue);
+        if (isDark) {
+            const lx = scale(l, 0, 0.5, 0, MAX_BG_LIGHTNESS);
+            if (isNeutral) {
+                const hx = pole.h;
+                const sx = pole.s;
+                return {h: hx, s: sx, l: lx, a};
+            }
+            return {h, s, l: lx, a};
+        }
+        let lx = scale(l, 0.5, 1, MAX_BG_LIGHTNESS, pole.l);
+        if (isNeutral) {
+            const hx = pole.h;
+            const sx = pole.s;
+            return {h: hx, s: sx, l: lx, a};
+        }
+        let hx = h;
+        const isYellow = h > 60 && h < 180;
+        if (isYellow) {
+            const isCloserToGreen = h > 120;
+            if (isCloserToGreen) {
+                hx = scale(h, 120, 180, 135, 180);
+            } else {
+                hx = scale(h, 60, 120, 60, 105);
+            }
         }
-        if (blobURLCheckRequested) {
-            return await new Promise((resolve) =>
-                blobURLCheckAwaiters.push(resolve)
-            );
+        if (hx > 40 && hx < 80) {
+            lx *= 0.75;
         }
-        blobURLCheckRequested = true;
-        await new Promise((resolve) => {
-            document.addEventListener(
-                "__darkreader__blobURLCheckResponse",
-                (e) => {
-                    isBlobURLSupported = e.detail.blobURLAllowed;
-                    resolve();
-                    blobURLCheckAwaiters.forEach((r) => r());
-                    blobURLCheckAwaiters.splice(0);
-                },
-                {once: true}
-            );
-            document.dispatchEvent(
-                new CustomEvent("__darkreader__blobURLCheckRequest")
-            );
-        });
+        return {h: hx, s, l: lx, a};
     }
-    function isBlobURLCheckResultReady() {
-        return isBlobURLSupported != null || !canUseProxy;
+    function _modifyBackgroundColor(rgb, theme) {
+        if (theme.mode === 0) {
+            return modifyLightSchemeColor(rgb, theme);
+        }
+        const pole = getBgPole(theme);
+        return modifyColorWithCache(rgb, theme, modifyBgHSL, pole);
     }
-    function onCSPError(err) {
-        if (err.blockedURI === "blob") {
-            isBlobURLSupported = false;
-            document.removeEventListener("securitypolicyviolation", onCSPError);
+    function modifyBackgroundColor(
+        rgb,
+        theme,
+        shouldRegisterColorVariable = true
+    ) {
+        if (!shouldRegisterColorVariable) {
+            return _modifyBackgroundColor(rgb, theme);
         }
+        return modifyAndRegisterColor(
+            "background",
+            rgb,
+            theme,
+            _modifyBackgroundColor
+        );
     }
-    document.addEventListener("securitypolicyviolation", onCSPError);
-    const objectURLs = new Set();
-    function getFilteredImageURL({dataURL, width, height}, theme) {
-        if (dataURL.startsWith("data:image/svg+xml")) {
-            dataURL = escapeXML(dataURL);
+    const MIN_FG_LIGHTNESS = 0.55;
+    function modifyBlueFgHue(hue) {
+        return scale(hue, 205, 245, 205, 220);
+    }
+    function modifyFgHSL({h, s, l, a}, pole) {
+        const isLight = l > 0.5;
+        const isNeutral = l < 0.2 || s < 0.24;
+        const isBlue = !isNeutral && h > 205 && h < 245;
+        if (isLight) {
+            const lx = scale(l, 0.5, 1, MIN_FG_LIGHTNESS, pole.l);
+            if (isNeutral) {
+                const hx = pole.h;
+                const sx = pole.s;
+                return {h: hx, s: sx, l: lx, a};
+            }
+            let hx = h;
+            if (isBlue) {
+                hx = modifyBlueFgHue(h);
+            }
+            return {h: hx, s, l: lx, a};
         }
-        const matrix = getSVGFilterMatrixValue(theme);
-        const svg = [
-            `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}">`,
-            "<defs>",
-            '<filter id="darkreader-image-filter">',
-            `<feColorMatrix type="matrix" values="${matrix}" />`,
-            "</filter>",
-            "</defs>",
-            `<image width="${width}" height="${height}" filter="url(#darkreader-image-filter)" xlink:href="${dataURL}" />`,
-            "</svg>"
-        ].join("");
-        if (!isBlobURLSupported) {
-            return `data:image/svg+xml;base64,${btoa(svg)}`;
+        if (isNeutral) {
+            const hx = pole.h;
+            const sx = pole.s;
+            const lx = scale(l, 0, 0.5, pole.l, MIN_FG_LIGHTNESS);
+            return {h: hx, s: sx, l: lx, a};
         }
-        const bytes = new Uint8Array(svg.length);
-        for (let i = 0; i < svg.length; i++) {
-            bytes[i] = svg.charCodeAt(i);
+        let hx = h;
+        let lx;
+        if (isBlue) {
+            hx = modifyBlueFgHue(h);
+            lx = scale(l, 0, 0.5, pole.l, Math.min(1, MIN_FG_LIGHTNESS + 0.05));
+        } else {
+            lx = scale(l, 0, 0.5, pole.l, MIN_FG_LIGHTNESS);
         }
-        const blob = new Blob([bytes], {type: "image/svg+xml"});
-        const objectURL = URL.createObjectURL(blob);
-        objectURLs.add(objectURL);
-        return objectURL;
+        return {h: hx, s, l: lx, a};
     }
-    const xmlEscapeChars = {
-        "<": "&lt;",
-        ">": "&gt;",
-        "&": "&amp;",
-        "'": "&apos;",
-        '"': "&quot;"
-    };
-    function escapeXML(str) {
-        return str.replace(/[<>&'"]/g, (c) => xmlEscapeChars[c] ?? c);
+    function _modifyForegroundColor(rgb, theme) {
+        if (theme.mode === 0) {
+            return modifyLightSchemeColor(rgb, theme);
+        }
+        const pole = getFgPole(theme);
+        return modifyColorWithCache(rgb, theme, modifyFgHSL, pole);
     }
-    const dataURLBlobURLs = new Map();
-    function tryConvertDataURLToBlobSync(dataURL) {
-        const colonIndex = dataURL.indexOf(":");
-        const semicolonIndex = dataURL.indexOf(";", colonIndex + 1);
-        const commaIndex = dataURL.indexOf(",", semicolonIndex + 1);
-        const encoding = dataURL
-            .substring(semicolonIndex + 1, commaIndex)
-            .toLocaleLowerCase();
-        const mediaType = dataURL.substring(colonIndex + 1, semicolonIndex);
-        if (encoding !== "base64" || !mediaType) {
-            return null;
+    function modifyForegroundColor(
+        rgb,
+        theme,
+        shouldRegisterColorVariable = true
+    ) {
+        if (!shouldRegisterColorVariable) {
+            return _modifyForegroundColor(rgb, theme);
         }
-        const characters = atob(dataURL.substring(commaIndex + 1));
-        const bytes = new Uint8Array(characters.length);
-        for (let i = 0; i < characters.length; i++) {
-            bytes[i] = characters.charCodeAt(i);
+        return modifyAndRegisterColor(
+            "text",
+            rgb,
+            theme,
+            _modifyForegroundColor
+        );
+    }
+    function modifyBorderHSL({h, s, l, a}, poleFg, poleBg) {
+        const isDark = l < 0.5;
+        const isNeutral = l < 0.2 || s < 0.24;
+        let hx = h;
+        let sx = s;
+        if (isNeutral) {
+            if (isDark) {
+                hx = poleFg.h;
+                sx = poleFg.s;
+            } else {
+                hx = poleBg.h;
+                sx = poleBg.s;
+            }
         }
-        return new Blob([bytes], {type: mediaType});
+        const lx = scale(l, 0, 1, 0.5, 0.2);
+        return {h: hx, s: sx, l: lx, a};
     }
-    async function tryConvertDataURLToBlobURL(dataURL) {
-        if (!isBlobURLSupported) {
-            return null;
+    function _modifyBorderColor(rgb, theme) {
+        if (theme.mode === 0) {
+            return modifyLightSchemeColor(rgb, theme);
         }
-        const hash = getHashCode(dataURL);
-        let blobURL = dataURLBlobURLs.get(hash);
-        if (blobURL) {
-            return blobURL;
+        const poleFg = getFgPole(theme);
+        const poleBg = getBgPole(theme);
+        return modifyColorWithCache(
+            rgb,
+            theme,
+            modifyBorderHSL,
+            poleFg,
+            poleBg
+        );
+    }
+    function modifyBorderColor(rgb, theme, shouldRegisterColorVariable = true) {
+        if (!shouldRegisterColorVariable) {
+            return _modifyBorderColor(rgb, theme);
+        }
+        return modifyAndRegisterColor("border", rgb, theme, _modifyBorderColor);
+    }
+    function modifyShadowColor(rgb, theme) {
+        return modifyBackgroundColor(rgb, theme);
+    }
+    function modifyGradientColor(rgb, theme) {
+        return modifyBackgroundColor(rgb, theme);
+    }
+
+    const gradientLength = "gradient".length;
+    const conicGradient = "conic-";
+    const conicGradientLength = conicGradient.length;
+    const radialGradient = "radial-";
+    const linearGradient = "linear-";
+    function parseGradient(value) {
+        const result = [];
+        let index = 0;
+        let startIndex = conicGradient.length;
+        while ((index = value.indexOf("gradient", startIndex)) !== -1) {
+            let typeGradient;
+            [linearGradient, radialGradient, conicGradient].find(
+                (possibleType) => {
+                    if (index - possibleType.length >= 0) {
+                        const possibleGradient = value.substring(
+                            index - possibleType.length,
+                            index
+                        );
+                        if (possibleGradient === possibleType) {
+                            if (
+                                value.slice(
+                                    index - possibleType.length - 10,
+                                    index - possibleType.length - 1
+                                ) === "repeating"
+                            ) {
+                                typeGradient = `repeating-${possibleType}gradient`;
+                                return true;
+                            }
+                            if (
+                                value.slice(
+                                    index - possibleType.length - 8,
+                                    index - possibleType.length - 1
+                                ) === "-webkit"
+                            ) {
+                                typeGradient = `-webkit-${possibleType}gradient`;
+                                return true;
+                            }
+                            typeGradient = `${possibleType}gradient`;
+                            return true;
+                        }
+                    }
+                }
+            );
+            if (!typeGradient) {
+                break;
+            }
+            const {start, end} = getParenthesesRange(
+                value,
+                index + gradientLength
+            );
+            const match = value.substring(start + 1, end - 1);
+            startIndex = end + 1 + conicGradientLength;
+            result.push({
+                typeGradient,
+                match,
+                offset: typeGradient.length + 2,
+                index: index - typeGradient.length + gradientLength,
+                hasComma: true
+            });
         }
-        let blob = tryConvertDataURLToBlobSync(dataURL);
-        if (!blob) {
-            const response = await fetch(dataURL);
-            blob = await response.blob();
+        if (result.length) {
+            result[result.length - 1].hasComma = false;
         }
-        blobURL = URL.createObjectURL(blob);
-        dataURLBlobURLs.set(hash, blobURL);
-        return blobURL;
-    }
-    function cleanImageProcessingCache() {
-        imageManager && imageManager.stop();
-        removeCanvas();
-        objectURLs.forEach((u) => URL.revokeObjectURL(u));
-        objectURLs.clear();
-        dataURLBlobURLs.forEach((u) => URL.revokeObjectURL(u));
-        dataURLBlobURLs.clear();
+        return result;
     }
 
-    let variablesSheet;
-    const registeredColors = new Map();
-    function registerVariablesSheet(sheet) {
-        variablesSheet = sheet;
-        const types = ["background", "text", "border"];
-        registeredColors.forEach((registered) => {
-            types.forEach((type) => {
-                if (registered[type]) {
-                    const {variable, value} = registered[type];
-                    variablesSheet?.cssRules[0].style.setProperty(
-                        variable,
-                        value
+    const STORAGE_KEY_IMAGE_DETAILS_LIST = "__darkreader__imageDetails_v2_list";
+    const STORAGE_KEY_IMAGE_DETAILS_PREFIX = "__darkreader__imageDetails_v2_";
+    const STORAGE_KEY_CSS_FETCH_PREFIX = "__darkreader__cssFetch_";
+    let imageCacheTimeout = 0;
+    const imageDetailsCacheQueue = new Map();
+    const cachedImageUrls = [];
+    function writeImageDetailsQueue() {
+        imageDetailsCacheQueue.forEach((details, url) => {
+            if (url && url.startsWith("https://")) {
+                try {
+                    const json = JSON.stringify(details);
+                    sessionStorage.setItem(
+                        `${STORAGE_KEY_IMAGE_DETAILS_PREFIX}${url}`,
+                        json
                     );
-                }
-            });
+                    cachedImageUrls.push(url);
+                } catch (err) {}
+            }
         });
+        imageDetailsCacheQueue.clear();
+        sessionStorage.setItem(
+            STORAGE_KEY_IMAGE_DETAILS_LIST,
+            JSON.stringify(cachedImageUrls)
+        );
     }
-    function releaseVariablesSheet() {
-        variablesSheet = null;
-        clearColorPalette();
+    function writeImageDetailsCache(url, imageDetails) {
+        if (!url || !url.startsWith("https://")) {
+            return;
+        }
+        imageDetailsCacheQueue.set(url, imageDetails);
+        clearTimeout(imageCacheTimeout);
+        imageCacheTimeout = setTimeout(writeImageDetailsQueue, 1000);
     }
-    function getRegisteredVariableValue(type, registered) {
-        return `var(${registered[type].variable}, ${registered[type].value})`;
+    function readImageDetailsCache(targetMap) {
+        try {
+            const jsonList = sessionStorage.getItem(
+                STORAGE_KEY_IMAGE_DETAILS_LIST
+            );
+            if (!jsonList) {
+                return;
+            }
+            const list = JSON.parse(jsonList);
+            list.forEach((url) => {
+                const json = sessionStorage.getItem(
+                    `${STORAGE_KEY_IMAGE_DETAILS_PREFIX}${url}`
+                );
+                if (json) {
+                    const details = JSON.parse(json);
+                    targetMap.set(url, details);
+                }
+            });
+        } catch (err) {}
     }
-    function getRegisteredColor(type, parsed) {
-        const hex = rgbToHexString(parsed);
-        const registered = registeredColors.get(hex);
-        if (registered?.[type]) {
-            return getRegisteredVariableValue(type, registered);
-        }
+    function writeCSSFetchCache(url, cssText) {
+        const key = `${STORAGE_KEY_CSS_FETCH_PREFIX}${url}`;
+        try {
+            sessionStorage.setItem(key, cssText);
+        } catch (err) {}
+    }
+    function readCSSFetchCache(url) {
+        const key = `${STORAGE_KEY_CSS_FETCH_PREFIX}${url}`;
+        try {
+            return sessionStorage.getItem(key) ?? null;
+        } catch (err) {}
         return null;
     }
-    function registerColor(type, parsed, value) {
-        const hex = rgbToHexString(parsed);
-        let registered;
-        if (registeredColors.has(hex)) {
-            registered = registeredColors.get(hex);
-        } else {
-            const parsed = parseColorWithCache(hex);
-            registered = {parsed};
-            registeredColors.set(hex, registered);
+
+    function toSVGMatrix(matrix) {
+        return matrix
+            .slice(0, 4)
+            .map((m) => m.map((m) => m.toFixed(3)).join(" "))
+            .join(" ");
+    }
+    function getSVGFilterMatrixValue(config) {
+        return toSVGMatrix(createFilterMatrix(config));
+    }
+
+    const MAX_FRAME_DURATION = 1000 / 60;
+    class AsyncQueue {
+        constructor() {
+            this.queue = [];
+            this.timerId = null;
         }
-        const variable = `--darkreader-${type}-${hex.replace("#", "")}`;
-        registered[type] = {variable, value};
-        if (variablesSheet?.cssRules[0]?.style) {
-            variablesSheet?.cssRules[0].style.setProperty(variable, value);
+        addTask(task) {
+            this.queue.push(task);
+            this.scheduleFrame();
         }
-        return getRegisteredVariableValue(type, registered);
-    }
-    function getColorPalette() {
-        const background = [];
-        const border = [];
-        const text = [];
-        registeredColors.forEach((registered) => {
-            if (registered.background) {
-                background.push(registered.parsed);
-            }
-            if (registered.border) {
-                border.push(registered.parsed);
+        stop() {
+            if (this.timerId !== null) {
+                cancelAnimationFrame(this.timerId);
+                this.timerId = null;
             }
-            if (registered.text) {
-                text.push(registered.parsed);
+            this.queue = [];
+        }
+        scheduleFrame() {
+            if (this.timerId) {
+                return;
             }
-        });
-        return {background, border, text};
-    }
-    function clearColorPalette() {
-        registeredColors.clear();
+            this.timerId = requestAnimationFrame(() => {
+                this.timerId = null;
+                const start = Date.now();
+                let cb;
+                while ((cb = this.queue.shift())) {
+                    cb();
+                    if (Date.now() - start >= MAX_FRAME_DURATION) {
+                        this.scheduleFrame();
+                        break;
+                    }
+                }
+            });
+        }
     }
 
-    function getBgPole(theme) {
-        const isDarkScheme = theme.mode === 1;
-        const prop = isDarkScheme
-            ? "darkSchemeBackgroundColor"
-            : "lightSchemeBackgroundColor";
-        return theme[prop];
-    }
-    function getFgPole(theme) {
-        const isDarkScheme = theme.mode === 1;
-        const prop = isDarkScheme
-            ? "darkSchemeTextColor"
-            : "lightSchemeTextColor";
-        return theme[prop];
-    }
-    const colorModificationCache = new Map();
-    function clearColorModificationCache() {
-        colorModificationCache.clear();
-    }
-    const rgbCacheKeys = ["r", "g", "b", "a"];
-    const themeCacheKeys$1 = [
-        "mode",
-        "brightness",
-        "contrast",
-        "grayscale",
-        "sepia",
-        "darkSchemeBackgroundColor",
-        "darkSchemeTextColor",
-        "lightSchemeBackgroundColor",
-        "lightSchemeTextColor"
-    ];
-    function getCacheId(rgb, theme) {
-        let resultId = "";
-        rgbCacheKeys.forEach((key) => {
-            resultId += `${rgb[key]};`;
+    const resolvers$1 = new Map();
+    const rejectors = new Map();
+    async function bgFetch(request) {
+        if (window.DarkReader?.Plugins?.fetch) {
+            return window.DarkReader.Plugins.fetch(request);
+        }
+        return new Promise((resolve, reject) => {
+            const id = generateUID();
+            resolvers$1.set(id, resolve);
+            rejectors.set(id, reject);
+            chrome.runtime.sendMessage({
+                type: MessageTypeCStoBG.FETCH,
+                data: request,
+                id
+            });
         });
-        themeCacheKeys$1.forEach((key) => {
-            resultId += `${theme[key]};`;
+    }
+    chrome.runtime.onMessage.addListener(({type, data, error, id}) => {
+        if (type === MessageTypeBGtoCS.FETCH_RESPONSE) {
+            const resolve = resolvers$1.get(id);
+            const reject = rejectors.get(id);
+            resolvers$1.delete(id);
+            rejectors.delete(id);
+            if (error) {
+                reject &&
+                    reject(
+                        typeof error === "string" ? new Error(error) : error
+                    );
+            } else {
+                resolve && resolve(data);
+            }
+        }
+    });
+
+    const imageManager = new AsyncQueue();
+    async function getImageDetails(url) {
+        return new Promise(async (resolve, reject) => {
+            try {
+                const dataURL = url.startsWith("data:")
+                    ? url
+                    : await getDataURL(url);
+                const blob =
+                    tryConvertDataURLToBlobSync(dataURL) ??
+                    (await loadAsBlob(url));
+                let image;
+                if (dataURL.startsWith("data:image/svg+xml")) {
+                    image = await loadImage(dataURL);
+                } else {
+                    image =
+                        (await tryCreateImageBitmap(blob)) ??
+                        (await loadImage(dataURL));
+                }
+                imageManager.addTask(() => {
+                    const analysis = analyzeImage(image);
+                    resolve({
+                        src: url,
+                        dataURL: analysis.isLarge ? "" : dataURL,
+                        width: image.width,
+                        height: image.height,
+                        ...analysis
+                    });
+                });
+            } catch (error) {
+                reject(error);
+            }
         });
-        return resultId;
     }
-    function modifyColorWithCache(
-        rgb,
-        theme,
-        modifyHSL,
-        poleColor,
-        anotherPoleColor
-    ) {
-        let fnCache;
-        if (colorModificationCache.has(modifyHSL)) {
-            fnCache = colorModificationCache.get(modifyHSL);
-        } else {
-            fnCache = new Map();
-            colorModificationCache.set(modifyHSL, fnCache);
-        }
-        const id = getCacheId(rgb, theme);
-        if (fnCache.has(id)) {
-            return fnCache.get(id);
+    async function getDataURL(url) {
+        const parsedURL = new URL(url);
+        if (parsedURL.origin === location.origin) {
+            return await loadAsDataURL(url);
         }
-        const hsl = rgbToHSL(rgb);
-        const pole = poleColor == null ? null : parseToHSLWithCache(poleColor);
-        const anotherPole =
-            anotherPoleColor == null
-                ? null
-                : parseToHSLWithCache(anotherPoleColor);
-        const modified = modifyHSL(hsl, pole, anotherPole);
-        const {r, g, b, a} = hslToRGB(modified);
-        const matrix = createFilterMatrix(theme);
-        const [rf, gf, bf] = applyColorMatrix([r, g, b], matrix);
-        const color =
-            a === 1
-                ? rgbToHexString({r: rf, g: gf, b: bf})
-                : rgbToString({r: rf, g: gf, b: bf, a});
-        fnCache.set(id, color);
-        return color;
+        return await bgFetch({url, responseType: "data-url"});
     }
-    function modifyAndRegisterColor(type, rgb, theme, modifier) {
-        const registered = getRegisteredColor(type, rgb);
-        if (registered) {
-            return registered;
+    async function tryCreateImageBitmap(blob) {
+        try {
+            return await createImageBitmap(blob);
+        } catch (err) {
+            logWarn(
+                `Unable to create image bitmap for type ${blob.type}: ${String(err)}`
+            );
+            return null;
         }
-        const value = modifier(rgb, theme);
-        return registerColor(type, rgb, value);
-    }
-    function modifyLightSchemeColor(rgb, theme) {
-        const poleBg = getBgPole(theme);
-        const poleFg = getFgPole(theme);
-        return modifyColorWithCache(
-            rgb,
-            theme,
-            modifyLightModeHSL,
-            poleFg,
-            poleBg
-        );
     }
-    function modifyLightModeHSL({h, s, l, a}, poleFg, poleBg) {
-        const isDark = l < 0.5;
-        let isNeutral;
-        if (isDark) {
-            isNeutral = l < 0.2 || s < 0.12;
-        } else {
-            const isBlue = h > 200 && h < 280;
-            isNeutral = s < 0.24 || (l > 0.8 && isBlue);
-        }
-        let hx = h;
-        let sx = l;
-        if (isNeutral) {
-            if (isDark) {
-                hx = poleFg.h;
-                sx = poleFg.s;
+    const INCOMPLETE_DOC_LOADING_IMAGE_LIMIT = 256;
+    let loadingImagesCount = 0;
+    async function loadImage(url) {
+        return new Promise((resolve, reject) => {
+            const image = new Image();
+            image.onload = () => resolve(image);
+            image.onerror = () => reject(`Unable to load image ${url}`);
+            if (
+                ++loadingImagesCount <= INCOMPLETE_DOC_LOADING_IMAGE_LIMIT ||
+                isReadyStateComplete()
+            ) {
+                image.src = url;
             } else {
-                hx = poleBg.h;
-                sx = poleBg.s;
+                addReadyStateCompleteListener(() => (image.src = url));
             }
-        }
-        const lx = scale(l, 0, 1, poleFg.l, poleBg.l);
-        return {h: hx, s: sx, l: lx, a};
+        });
     }
-    const MAX_BG_LIGHTNESS = 0.4;
-    function modifyBgHSL({h, s, l, a}, pole) {
-        const isDark = l < 0.5;
-        const isBlue = h > 200 && h < 280;
-        const isNeutral = s < 0.12 || (l > 0.8 && isBlue);
-        if (isDark) {
-            const lx = scale(l, 0, 0.5, 0, MAX_BG_LIGHTNESS);
-            if (isNeutral) {
-                const hx = pole.h;
-                const sx = pole.s;
-                return {h: hx, s: sx, l: lx, a};
-            }
-            return {h, s, l: lx, a};
+    const MAX_ANALYSIS_PIXELS_COUNT = 32 * 32;
+    let canvas;
+    let context;
+    function createCanvas() {
+        const maxWidth = MAX_ANALYSIS_PIXELS_COUNT;
+        const maxHeight = MAX_ANALYSIS_PIXELS_COUNT;
+        canvas = document.createElement("canvas");
+        canvas.width = maxWidth;
+        canvas.height = maxHeight;
+        context = canvas.getContext("2d", {willReadFrequently: true});
+        context.imageSmoothingEnabled = false;
+    }
+    function removeCanvas() {
+        canvas = null;
+        context = null;
+    }
+    const LARGE_IMAGE_PIXELS_COUNT = 512 * 512;
+    function analyzeImage(image) {
+        if (!canvas) {
+            createCanvas();
         }
-        let lx = scale(l, 0.5, 1, MAX_BG_LIGHTNESS, pole.l);
-        if (isNeutral) {
-            const hx = pole.h;
-            const sx = pole.s;
-            return {h: hx, s: sx, l: lx, a};
+        let sw;
+        let sh;
+        if (image instanceof HTMLImageElement) {
+            sw = image.naturalWidth;
+            sh = image.naturalHeight;
+        } else {
+            sw = image.width;
+            sh = image.height;
         }
-        let hx = h;
-        const isYellow = h > 60 && h < 180;
-        if (isYellow) {
-            const isCloserToGreen = h > 120;
-            if (isCloserToGreen) {
-                hx = scale(h, 120, 180, 135, 180);
-            } else {
-                hx = scale(h, 60, 120, 60, 105);
+        if (sw === 0 || sh === 0) {
+            logWarn("Image is empty");
+            return {
+                isDark: false,
+                isLight: false,
+                isTransparent: false,
+                isLarge: false
+            };
+        }
+        const isLarge = sw * sh > LARGE_IMAGE_PIXELS_COUNT;
+        const sourcePixelsCount = sw * sh;
+        const k = Math.min(
+            1,
+            Math.sqrt(MAX_ANALYSIS_PIXELS_COUNT / sourcePixelsCount)
+        );
+        const width = Math.ceil(sw * k);
+        const height = Math.ceil(sh * k);
+        context.clearRect(0, 0, width, height);
+        context.drawImage(image, 0, 0, sw, sh, 0, 0, width, height);
+        const imageData = context.getImageData(0, 0, width, height);
+        const d = imageData.data;
+        const TRANSPARENT_ALPHA_THRESHOLD = 0.05;
+        const DARK_LIGHTNESS_THRESHOLD = 0.4;
+        const LIGHT_LIGHTNESS_THRESHOLD = 0.7;
+        let transparentPixelsCount = 0;
+        let darkPixelsCount = 0;
+        let lightPixelsCount = 0;
+        let i, x, y;
+        let r, g, b, a;
+        let l;
+        for (y = 0; y < height; y++) {
+            for (x = 0; x < width; x++) {
+                i = 4 * (y * width + x);
+                r = d[i + 0];
+                g = d[i + 1];
+                b = d[i + 2];
+                a = d[i + 3];
+                if (a / 255 < TRANSPARENT_ALPHA_THRESHOLD) {
+                    transparentPixelsCount++;
+                } else {
+                    l = getSRGBLightness(r, g, b);
+                    if (l < DARK_LIGHTNESS_THRESHOLD) {
+                        darkPixelsCount++;
+                    }
+                    if (l > LIGHT_LIGHTNESS_THRESHOLD) {
+                        lightPixelsCount++;
+                    }
+                }
             }
         }
-        if (hx > 40 && hx < 80) {
-            lx *= 0.75;
+        const totalPixelsCount = width * height;
+        const opaquePixelsCount = totalPixelsCount - transparentPixelsCount;
+        const DARK_IMAGE_THRESHOLD = 0.7;
+        const LIGHT_IMAGE_THRESHOLD = 0.7;
+        const TRANSPARENT_IMAGE_THRESHOLD = 0.1;
+        return {
+            isDark: darkPixelsCount / opaquePixelsCount >= DARK_IMAGE_THRESHOLD,
+            isLight:
+                lightPixelsCount / opaquePixelsCount >= LIGHT_IMAGE_THRESHOLD,
+            isTransparent:
+                transparentPixelsCount / totalPixelsCount >=
+                TRANSPARENT_IMAGE_THRESHOLD,
+            isLarge
+        };
+    }
+    let isBlobURLSupported = null;
+    let canUseProxy = false;
+    let blobURLCheckRequested = false;
+    const blobURLCheckAwaiters = [];
+    document.addEventListener(
+        "__darkreader__inlineScriptsAllowed",
+        () => (canUseProxy = true),
+        {once: true}
+    );
+    async function requestBlobURLCheck() {
+        if (!canUseProxy) {
+            return;
         }
-        return {h: hx, s, l: lx, a};
+        if (blobURLCheckRequested) {
+            return await new Promise((resolve) =>
+                blobURLCheckAwaiters.push(resolve)
+            );
+        }
+        blobURLCheckRequested = true;
+        await new Promise((resolve) => {
+            document.addEventListener(
+                "__darkreader__blobURLCheckResponse",
+                (e) => {
+                    isBlobURLSupported = e.detail.blobURLAllowed;
+                    resolve();
+                    blobURLCheckAwaiters.forEach((r) => r());
+                    blobURLCheckAwaiters.splice(0);
+                },
+                {once: true}
+            );
+            document.dispatchEvent(
+                new CustomEvent("__darkreader__blobURLCheckRequest")
+            );
+        });
     }
-    function _modifyBackgroundColor(rgb, theme) {
-        if (theme.mode === 0) {
-            return modifyLightSchemeColor(rgb, theme);
-        }
-        const pole = getBgPole(theme);
-        return modifyColorWithCache(
-            rgb,
-            {...theme, mode: 0},
-            modifyBgHSL,
-            pole
-        );
+    function isBlobURLCheckResultReady() {
+        return isBlobURLSupported != null || !canUseProxy;
     }
-    function modifyBackgroundColor(
-        rgb,
-        theme,
-        shouldRegisterColorVariable = true
-    ) {
-        if (!shouldRegisterColorVariable) {
-            return _modifyBackgroundColor(rgb, theme);
+    function onCSPError(err) {
+        if (err.blockedURI === "blob") {
+            isBlobURLSupported = false;
+            document.removeEventListener("securitypolicyviolation", onCSPError);
         }
-        return modifyAndRegisterColor(
-            "background",
-            rgb,
-            theme,
-            _modifyBackgroundColor
-        );
-    }
-    const MIN_FG_LIGHTNESS = 0.55;
-    function modifyBlueFgHue(hue) {
-        return scale(hue, 205, 245, 205, 220);
     }
-    function modifyFgHSL({h, s, l, a}, pole) {
-        const isLight = l > 0.5;
-        const isNeutral = l < 0.2 || s < 0.24;
-        const isBlue = !isNeutral && h > 205 && h < 245;
-        if (isLight) {
-            const lx = scale(l, 0.5, 1, MIN_FG_LIGHTNESS, pole.l);
-            if (isNeutral) {
-                const hx = pole.h;
-                const sx = pole.s;
-                return {h: hx, s: sx, l: lx, a};
-            }
-            let hx = h;
-            if (isBlue) {
-                hx = modifyBlueFgHue(h);
-            }
-            return {h: hx, s, l: lx, a};
+    document.addEventListener("securitypolicyviolation", onCSPError);
+    const objectURLs = new Set();
+    function getFilteredImageURL({dataURL, width, height}, theme) {
+        if (dataURL.startsWith("data:image/svg+xml")) {
+            dataURL = escapeXML(dataURL);
         }
-        if (isNeutral) {
-            const hx = pole.h;
-            const sx = pole.s;
-            const lx = scale(l, 0, 0.5, pole.l, MIN_FG_LIGHTNESS);
-            return {h: hx, s: sx, l: lx, a};
+        const matrix = getSVGFilterMatrixValue(theme);
+        const svg = [
+            `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}">`,
+            "<defs>",
+            '<filter id="darkreader-image-filter">',
+            `<feColorMatrix type="matrix" values="${matrix}" />`,
+            "</filter>",
+            "</defs>",
+            `<image width="${width}" height="${height}" filter="url(#darkreader-image-filter)" xlink:href="${dataURL}" />`,
+            "</svg>"
+        ].join("");
+        if (!isBlobURLSupported) {
+            return `data:image/svg+xml;base64,${btoa(svg)}`;
         }
-        let hx = h;
-        let lx;
-        if (isBlue) {
-            hx = modifyBlueFgHue(h);
-            lx = scale(l, 0, 0.5, pole.l, Math.min(1, MIN_FG_LIGHTNESS + 0.05));
-        } else {
-            lx = scale(l, 0, 0.5, pole.l, MIN_FG_LIGHTNESS);
+        const bytes = new Uint8Array(svg.length);
+        for (let i = 0; i < svg.length; i++) {
+            bytes[i] = svg.charCodeAt(i);
         }
-        return {h: hx, s, l: lx, a};
+        const blob = new Blob([bytes], {type: "image/svg+xml"});
+        const objectURL = URL.createObjectURL(blob);
+        objectURLs.add(objectURL);
+        return objectURL;
     }
-    function _modifyForegroundColor(rgb, theme) {
-        if (theme.mode === 0) {
-            return modifyLightSchemeColor(rgb, theme);
-        }
-        const pole = getFgPole(theme);
-        return modifyColorWithCache(
-            rgb,
-            {...theme, mode: 0},
-            modifyFgHSL,
-            pole
-        );
+    const xmlEscapeChars = {
+        "<": "&lt;",
+        ">": "&gt;",
+        "&": "&amp;",
+        "'": "&apos;",
+        '"': "&quot;"
+    };
+    function escapeXML(str) {
+        return str.replace(/[<>&'"]/g, (c) => xmlEscapeChars[c] ?? c);
     }
-    function modifyForegroundColor(
-        rgb,
-        theme,
-        shouldRegisterColorVariable = true
-    ) {
-        if (!shouldRegisterColorVariable) {
-            return _modifyForegroundColor(rgb, theme);
+    const dataURLBlobURLs = new Map();
+    function tryConvertDataURLToBlobSync(dataURL) {
+        const colonIndex = dataURL.indexOf(":");
+        const semicolonIndex = dataURL.indexOf(";", colonIndex + 1);
+        const commaIndex = dataURL.indexOf(",", semicolonIndex + 1);
+        const encoding = dataURL
+            .substring(semicolonIndex + 1, commaIndex)
+            .toLocaleLowerCase();
+        const mediaType = dataURL.substring(colonIndex + 1, semicolonIndex);
+        if (encoding !== "base64" || !mediaType) {
+            return null;
         }
-        return modifyAndRegisterColor(
-            "text",
-            rgb,
-            theme,
-            _modifyForegroundColor
-        );
-    }
-    function modifyBorderHSL({h, s, l, a}, poleFg, poleBg) {
-        const isDark = l < 0.5;
-        const isNeutral = l < 0.2 || s < 0.24;
-        let hx = h;
-        let sx = s;
-        if (isNeutral) {
-            if (isDark) {
-                hx = poleFg.h;
-                sx = poleFg.s;
-            } else {
-                hx = poleBg.h;
-                sx = poleBg.s;
-            }
+        const characters = atob(dataURL.substring(commaIndex + 1));
+        const bytes = new Uint8Array(characters.length);
+        for (let i = 0; i < characters.length; i++) {
+            bytes[i] = characters.charCodeAt(i);
         }
-        const lx = scale(l, 0, 1, 0.5, 0.2);
-        return {h: hx, s: sx, l: lx, a};
+        return new Blob([bytes], {type: mediaType});
     }
-    function _modifyBorderColor(rgb, theme) {
-        if (theme.mode === 0) {
-            return modifyLightSchemeColor(rgb, theme);
+    async function tryConvertDataURLToBlobURL(dataURL) {
+        if (!isBlobURLSupported) {
+            return null;
         }
-        const poleFg = getFgPole(theme);
-        const poleBg = getBgPole(theme);
-        return modifyColorWithCache(
-            rgb,
-            {...theme, mode: 0},
-            modifyBorderHSL,
-            poleFg,
-            poleBg
-        );
-    }
-    function modifyBorderColor(rgb, theme, shouldRegisterColorVariable = true) {
-        if (!shouldRegisterColorVariable) {
-            return _modifyBorderColor(rgb, theme);
+        const hash = getHashCode(dataURL);
+        let blobURL = dataURLBlobURLs.get(hash);
+        if (blobURL) {
+            return blobURL;
         }
-        return modifyAndRegisterColor("border", rgb, theme, _modifyBorderColor);
-    }
-    function modifyShadowColor(rgb, theme) {
-        return modifyBackgroundColor(rgb, theme);
+        let blob = tryConvertDataURLToBlobSync(dataURL);
+        if (!blob) {
+            const response = await fetch(dataURL);
+            blob = await response.blob();
+        }
+        blobURL = URL.createObjectURL(blob);
+        dataURLBlobURLs.set(hash, blobURL);
+        return blobURL;
     }
-    function modifyGradientColor(rgb, theme) {
-        return modifyBackgroundColor(rgb, theme);
+    function cleanImageProcessingCache() {
+        imageManager && imageManager.stop();
+        removeCanvas();
+        objectURLs.forEach((u) => URL.revokeObjectURL(u));
+        objectURLs.clear();
+        dataURLBlobURLs.forEach((u) => URL.revokeObjectURL(u));
+        dataURLBlobURLs.clear();
     }
 
     function getPriority(ruleStyle, property) {
@@ -3223,10 +3228,18 @@
         "auto"
     ]);
     function getColorModifier(prop, value, rule) {
-        if (unparsableColors.has(value.toLowerCase())) {
+        if (
+            unparsableColors.has(value.toLowerCase()) &&
+            !(prop === "color" && value === "initial")
+        ) {
             return value;
         }
-        const rgb = parseColorWithCache(value);
+        let rgb = null;
+        if (prop === "color" && value === "initial") {
+            rgb = {r: 0, g: 0, b: 0, a: 1};
+        } else {
+            rgb = parseColorWithCache(value);
+        }
         if (!rgb) {
             logWarn("Couldn't parse color", value);
             return null;
@@ -3655,7 +3668,7 @@
             return null;
         }
         return (theme) =>
-            `${modifyForegroundColor(thumb, theme)} ${modifyBackgroundColor(thumb, theme)}`;
+            `${modifyForegroundColor(thumb, theme)} ${modifyBackgroundColor(track, theme)}`;
     }
     function getColorSchemeModifier() {
         return (theme) => (theme.mode === 0 ? "dark light" : "dark");
@@ -4014,7 +4027,7 @@
                     const modified = modify();
                     if (unknownVars.size > 0) {
                         const isFallbackResolved = modified.match(
-                            /^var\(.*?, (var\(--darkreader-bg--.*\))|(#[0-9A-Fa-f]+)|([a-z]+)|(rgba?\(.+\))|(hsla?\(.+\))\)$/
+                            /^var\(.*?, ((var\(--darkreader-bg--.*\))|(#[0-9A-Fa-f]+)|([a-z]+)|(rgba?\(.+\))|(hsla?\(.+\)))\)$/
                         );
                         if (isFallbackResolved) {
                             return modified;
@@ -4492,17 +4505,6 @@
         return replaced;
     }
 
-    const themeCacheKeys = [
-        "mode",
-        "brightness",
-        "contrast",
-        "grayscale",
-        "sepia",
-        "darkSchemeBackgroundColor",
-        "darkSchemeTextColor",
-        "lightSchemeBackgroundColor",
-        "lightSchemeTextColor"
-    ];
     function getThemeKey(theme) {
         let resultKey = "";
         themeCacheKeys.forEach((key) => {
@@ -4816,6 +4818,12 @@
             function buildStyleSheet() {
                 function createTarget(group, parent) {
                     const {rule} = group;
+                    if (isStyleRule(rule)) {
+                        const {selectorText} = rule;
+                        const index = parent.cssRules.length;
+                        parent.insertRule(`${selectorText} {}`, index);
+                        return parent.cssRules[index];
+                    }
                     if (isMediaRule(rule)) {
                         const {media} = rule;
                         const index = parent.cssRules.length;
@@ -5123,6 +5131,27 @@
         return {render, destroy, commands};
     }
 
+    const hostsBreakingOnStylePosition = ["www.diffusioneshop.com", "zhale.me"];
+    const mode = hostsBreakingOnStylePosition.includes(location.hostname)
+        ? "away"
+        : "next";
+    function getStyleInjectionMode() {
+        return mode;
+    }
+    function injectStyleAway(styleElement) {
+        let container = document.body.querySelector(
+            ".darkreader-style-container"
+        );
+        if (!container) {
+            container = document.createElement("div");
+            container.classList.add("darkreader");
+            container.classList.add("darkreader-style-container");
+            container.style.display = "none";
+            document.body.append(container);
+        }
+        container.append(styleElement);
+    }
+
     const overrides = {
         "background-color": {
             customProp: "--darkreader-inline-bgcolor",
@@ -5923,22 +5952,29 @@
         rejectorsForLoadingLinks.clear();
     }
     function manageStyle(element, {update, loadingStart, loadingEnd}) {
-        const prevStyles = [];
-        let next = element;
-        while (
-            (next = next.nextElementSibling) &&
-            next.matches(".darkreader")
-        ) {
-            prevStyles.push(next);
-        }
-        let corsCopy =
-            prevStyles.find(
-                (el) => el.matches(".darkreader--cors") && !corsStyleSet.has(el)
-            ) || null;
-        let syncStyle =
-            prevStyles.find(
-                (el) => el.matches(".darkreader--sync") && !syncStyleSet.has(el)
-            ) || null;
+        const inMode = getStyleInjectionMode();
+        let corsCopy = null;
+        let syncStyle = null;
+        if (inMode === "next") {
+            const prevStyles = [];
+            let next = element;
+            while (
+                (next = next.nextElementSibling) &&
+                next.matches(".darkreader")
+            ) {
+                prevStyles.push(next);
+            }
+            corsCopy =
+                prevStyles.find(
+                    (el) =>
+                        el.matches(".darkreader--cors") && !corsStyleSet.has(el)
+                ) || null;
+            syncStyle =
+                prevStyles.find(
+                    (el) =>
+                        el.matches(".darkreader--sync") && !syncStyleSet.has(el)
+                ) || null;
+        }
         let corsCopyPositionWatcher = null;
         let syncStylePositionWatcher = null;
         let cancelAsyncOperations = false;
@@ -6023,21 +6059,31 @@
             return cssRules;
         }
         function insertStyle() {
-            if (corsCopy) {
-                if (element.nextSibling !== corsCopy) {
+            if (inMode === "next") {
+                if (corsCopy) {
+                    if (element.nextSibling !== corsCopy) {
+                        element.parentNode.insertBefore(
+                            corsCopy,
+                            element.nextSibling
+                        );
+                    }
+                    if (corsCopy.nextSibling !== syncStyle) {
+                        element.parentNode.insertBefore(
+                            syncStyle,
+                            corsCopy.nextSibling
+                        );
+                    }
+                } else if (element.nextSibling !== syncStyle) {
                     element.parentNode.insertBefore(
-                        corsCopy,
+                        syncStyle,
                         element.nextSibling
                     );
                 }
-                if (corsCopy.nextSibling !== syncStyle) {
-                    element.parentNode.insertBefore(
-                        syncStyle,
-                        corsCopy.nextSibling
-                    );
+            } else if (inMode === "away") {
+                if (corsCopy && !corsCopy.parentNode) {
+                    injectStyleAway(corsCopy);
                 }
-            } else if (element.nextSibling !== syncStyle) {
-                element.parentNode.insertBefore(syncStyle, element.nextSibling);
+                injectStyleAway(syncStyle);
             }
         }
         function createSyncStyle() {
@@ -6095,7 +6141,12 @@
                         return cssRules;
                     }
                 }
-                cssText = await loadText(element.href);
+                try {
+                    cssText = await loadText(element.href);
+                } catch (err) {
+                    logWarn(err);
+                    cssText = "";
+                }
                 cssBasePath = getCSSBaseBath(element.href);
                 if (cancelAsyncOperations) {
                     return null;
@@ -6127,12 +6178,31 @@
                             corsCopy.textContent = fullCSSText;
                         }
                     } else {
-                        corsCopy = createCORSCopy(element, fullCSSText);
+                        corsCopy = createCORSCopy(
+                            fullCSSText,
+                            inMode === "next"
+                                ? (cc) =>
+                                      element.parentNode.insertBefore(
+                                          cc,
+                                          element.nextSibling
+                                      )
+                                : injectStyleAway
+                        );
+                        if (corsCopy) {
+                            if (inMode === "next") {
+                                element.parentNode.insertBefore(
+                                    corsCopy,
+                                    element.nextSibling
+                                );
+                            } else if (inMode === "away") {
+                                injectStyleAway(corsCopy);
+                            }
+                        }
                     }
                 } catch (err) {
                     logWarn(err);
                 }
-                if (corsCopy) {
+                if (corsCopy && inMode === "next") {
                     corsCopyPositionWatcher = watchForNodePosition(
                         corsCopy,
                         "prev-sibling"
@@ -6199,7 +6269,7 @@
                 removeCSSRulesFromSheet(sheet);
                 if (syncStylePositionWatcher) {
                     syncStylePositionWatcher.run();
-                } else {
+                } else if (inMode === "next") {
                     syncStylePositionWatcher = watchForNodePosition(
                         syncStyle,
                         "prev-sibling",
@@ -6422,7 +6492,7 @@
         cssText = cssText.trim();
         return cssText;
     }
-    function createCORSCopy(srcElement, cssText) {
+    function createCORSCopy(cssText, inject) {
         if (!cssText) {
             return null;
         }
@@ -6431,7 +6501,7 @@
         cors.classList.add("darkreader--cors");
         cors.media = "screen";
         cors.textContent = cssText;
-        srcElement.parentNode.insertBefore(cors, srcElement.nextSibling);
+        inject(cors);
         cors.sheet.disabled = true;
         corsStyleSet.add(cors);
         return cors;
@@ -7234,20 +7304,24 @@
     let isIFrame$1 = null;
     let ignoredImageAnalysisSelectors = [];
     let ignoredInlineSelectors = [];
-    const staticStyleMap = new Map();
+    let staticStyleMap = new WeakMap();
     function createOrUpdateStyle(className, root = document.head || document) {
         let element = root.querySelector(`.${className}`);
+        if (!staticStyleMap.has(root)) {
+            staticStyleMap.set(root, new Map());
+        }
+        const classMap = staticStyleMap.get(root);
         if (element) {
-            staticStyleMap.set(className, element);
-        } else if (staticStyleMap.has(className)) {
-            element = staticStyleMap.get(className);
+            classMap.set(className, element);
+        } else if (classMap.has(className)) {
+            element = classMap.get(className);
         } else {
             element = document.createElement("style");
             element.classList.add("darkreader");
             element.classList.add(className);
             element.media = "screen";
             element.textContent = "";
-            staticStyleMap.set(className, element);
+            classMap.set(className, element);
         }
         return element;
     }
@@ -7273,6 +7347,18 @@
         forEach(nodePositionWatchers.values(), (watcher) => watcher.stop());
         nodePositionWatchers.clear();
     }
+    function injectStaticStyle(style, prevNode, watchAlias, callback) {
+        const mode = getStyleInjectionMode();
+        if (mode === "next") {
+            document.head.insertBefore(
+                style,
+                prevNode ? prevNode.nextSibling : document.head.firstChild
+            );
+            setupNodePositionWatcher(style, watchAlias, callback);
+        } else if (mode === "away") {
+            injectStyleAway(style);
+        }
+    }
     function createStaticStyleOverrides() {
         const fallbackStyle = createOrUpdateStyle(
             "darkreader--fallback",
@@ -7281,24 +7367,21 @@
         fallbackStyle.textContent = getModifiedFallbackStyle(theme, {
             strict: true
         });
-        document.head.insertBefore(fallbackStyle, document.head.firstChild);
-        setupNodePositionWatcher(fallbackStyle, "fallback");
+        injectStaticStyle(fallbackStyle, null, "fallback");
         const userAgentStyle = createOrUpdateStyle("darkreader--user-agent");
         userAgentStyle.textContent = getModifiedUserAgentStyle(
             theme,
             isIFrame$1,
             theme.styleSystemControls
         );
-        document.head.insertBefore(userAgentStyle, fallbackStyle.nextSibling);
-        setupNodePositionWatcher(userAgentStyle, "user-agent");
+        injectStaticStyle(userAgentStyle, fallbackStyle, "user-agent");
         const textStyle = createOrUpdateStyle("darkreader--text");
         if (theme.useFont || theme.textStroke > 0) {
             textStyle.textContent = createTextStyle(theme);
         } else {
             textStyle.textContent = "";
         }
-        document.head.insertBefore(textStyle, fallbackStyle.nextSibling);
-        setupNodePositionWatcher(textStyle, "text");
+        injectStaticStyle(textStyle, userAgentStyle, "text");
         const invertStyle = createOrUpdateStyle("darkreader--invert");
         if (fixes && Array.isArray(fixes.invert) && fixes.invert.length > 0) {
             invertStyle.textContent = [
@@ -7315,17 +7398,10 @@
         } else {
             invertStyle.textContent = "";
         }
-        document.head.insertBefore(invertStyle, textStyle.nextSibling);
-        setupNodePositionWatcher(invertStyle, "invert");
+        injectStaticStyle(invertStyle, textStyle, "invert");
         const inlineStyle = createOrUpdateStyle("darkreader--inline");
         inlineStyle.textContent = getInlineOverrideStyle();
-        document.head.insertBefore(inlineStyle, invertStyle.nextSibling);
-        setupNodePositionWatcher(inlineStyle, "inline");
-        const overrideStyle = createOrUpdateStyle("darkreader--override");
-        overrideStyle.textContent =
-            fixes && fixes.css ? replaceCSSTemplates(fixes.css) : "";
-        document.head.appendChild(overrideStyle);
-        setupNodePositionWatcher(overrideStyle, "override");
+        injectStaticStyle(inlineStyle, invertStyle, "inline");
         const variableStyle = createOrUpdateStyle("darkreader--variables");
         const selectionColors = theme?.selectionColor
             ? getSelectionColor(theme)
@@ -7346,13 +7422,12 @@
             `   --darkreader-selection-text: ${selectionColors?.foregroundColorSelection ?? "initial"};`,
             `}`
         ].join("\n");
-        document.head.insertBefore(variableStyle, inlineStyle.nextSibling);
-        setupNodePositionWatcher(variableStyle, "variables", () =>
+        injectStaticStyle(variableStyle, inlineStyle, "variables", () =>
             registerVariablesSheet(variableStyle.sheet)
         );
         registerVariablesSheet(variableStyle.sheet);
         const rootVarsStyle = createOrUpdateStyle("darkreader--root-vars");
-        document.head.insertBefore(rootVarsStyle, variableStyle.nextSibling);
+        injectStaticStyle(rootVarsStyle, variableStyle, "root-vars");
         const enableStyleSheetsProxy = !(
             fixes && fixes.disableStyleSheetsProxy
         );
@@ -7368,6 +7443,10 @@
             document.head.insertBefore(proxyScript, rootVarsStyle.nextSibling);
             proxyScript.remove();
         }
+        const overrideStyle = createOrUpdateStyle("darkreader--override");
+        overrideStyle.textContent =
+            fixes && fixes.css ? replaceCSSTemplates(fixes.css) : "";
+        injectStaticStyle(overrideStyle, document.head.lastChild, "override");
     }
     const shadowRootsWithOverrides = new Set();
     function createShadowStaticStyleOverridesInner(root) {
@@ -7443,7 +7522,8 @@
     }
     function cleanFallbackStyle() {
         const fallback =
-            staticStyleMap.get("darkreader--fallback") ||
+            staticStyleMap.get(document.head)?.get("darkreader--fallback") ||
+            staticStyleMap.get(document)?.get("darkreader--fallback") ||
             document.querySelector(".darkreader--fallback");
         if (fallback) {
             fallback.textContent = "";
@@ -7992,7 +8072,7 @@
             selectors.forEach((selector) =>
                 removeNode(document.head.querySelector(selector))
             );
-            staticStyleMap.clear();
+            staticStyleMap = new WeakMap();
             removeProxy();
         }
         shadowRootsWithOverrides.forEach((root) => {