darkreader 4.9.105 → 4.9.109

package/darkreader.mjs

@@ -1,5 +1,5 @@
 /**
- * Dark Reader v4.9.105
+ * Dark Reader v4.9.109
  * https://darkreader.org/
  */
 
@@ -29,6 +29,8 @@ var MessageTypeUItoBG;
         "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 = {}));
@@ -355,9 +357,7 @@ const filterModeSites = [
 ];
 ({
     customThemes: filterModeSites.map((url) => {
-        const engine = isChromium
-            ? ThemeEngine.svgFilter
-            : ThemeEngine.cssFilter;
+        const engine = ThemeEngine.cssFilter;
         return {
             url: [url],
             theme: {...DEFAULT_THEME, engine},
@@ -956,10 +956,16 @@ const supportedColorFuncs = [
 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);
@@ -982,7 +988,10 @@ function parse($color) {
     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);
@@ -1798,6 +1807,9 @@ function iterateCSSRules(rules, iterate, onImportError) {
     forEach(rules, (rule) => {
         if (isStyleRule(rule)) {
             iterate(rule);
+            if (rule.cssRules?.length > 0) {
+                iterateCSSRules(rule.cssRules, iterate);
+            }
         } else if (isImportRule(rule)) {
             try {
                 iterateCSSRules(
@@ -2055,817 +2067,812 @@ function getSheetScope(sheet) {
     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];
+}
+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 = [
+    "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;
 }
-async function getDataURL(url) {
-    const parsedURL = new URL(url);
-    if (parsedURL.origin === location.origin) {
-        return await loadAsDataURL(url);
+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);
     }
-    return await bgFetch({url, responseType: "data-url"});
+    const id = getCacheId(rgb, theme);
+    if (fnCache.has(id)) {
+        return fnCache.get(id);
+    }
+    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;
 }
-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;
+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);
 }
-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;
+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 = s;
+    if (isNeutral) {
+        if (isDark) {
+            hx = poleFg.h;
+            sx = poleFg.s;
         } else {
-            addReadyStateCompleteListener(() => (image.src = url));
+            hx = poleBg.h;
+            sx = poleBg.s;
         }
-    });
-}
-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 lx = scale(l, 0, 1, poleFg.l, poleBg.l);
+    return {h: hx, s: sx, l: lx, a};
 }
-const LARGE_IMAGE_PIXELS_COUNT = 512 * 512;
-function analyzeImage(image) {
-    if (!canvas) {
-        createCanvas();
+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 sw;
-    let sh;
-    if (image instanceof HTMLImageElement) {
-        sw = image.naturalWidth;
-        sh = image.naturalHeight;
-    } else {
-        sw = image.width;
-        sh = image.height;
+    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};
     }
-    if (sw === 0 || sh === 0) {
-        logWarn("Image is empty");
-        return {
-            isDark: false,
-            isLight: false,
-            isTransparent: false,
-            isLarge: false
-        };
+    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);
+        }
     }
-    const isLarge = sw * sh > LARGE_IMAGE_PIXELS_COUNT;
-    const sourcePixelsCount = sw * sh;
-    const k = Math.min(
-        1,
-        Math.sqrt(MAX_ANALYSIS_PIXELS_COUNT / sourcePixelsCount)
+    if (hx > 40 && hx < 80) {
+        lx *= 0.75;
+    }
+    return {h: hx, s, l: lx, a};
+}
+function _modifyBackgroundColor(rgb, theme) {
+    if (theme.mode === 0) {
+        return modifyLightSchemeColor(rgb, theme);
+    }
+    const pole = getBgPole(theme);
+    return modifyColorWithCache(rgb, theme, modifyBgHSL, pole);
+}
+function modifyBackgroundColor(rgb, theme, shouldRegisterColorVariable = true) {
+    if (!shouldRegisterColorVariable) {
+        return _modifyBackgroundColor(rgb, theme);
+    }
+    return modifyAndRegisterColor(
+        "background",
+        rgb,
+        theme,
+        _modifyBackgroundColor
     );
-    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++;
-                }
-            }
+}
+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 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
-    };
+    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};
+    }
+    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);
+    }
+    return {h: hx, s, 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;
+function _modifyForegroundColor(rgb, theme) {
+    if (theme.mode === 0) {
+        return modifyLightSchemeColor(rgb, theme);
     }
-    if (blobURLCheckRequested) {
-        return await new Promise((resolve) =>
-            blobURLCheckAwaiters.push(resolve)
-        );
+    const pole = getFgPole(theme);
+    return modifyColorWithCache(rgb, theme, modifyFgHSL, pole);
+}
+function modifyForegroundColor(rgb, theme, shouldRegisterColorVariable = true) {
+    if (!shouldRegisterColorVariable) {
+        return _modifyForegroundColor(rgb, theme);
     }
-    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 modifyAndRegisterColor("text", rgb, theme, _modifyForegroundColor);
 }
-function isBlobURLCheckResultReady() {
-    return isBlobURLSupported != null || !canUseProxy;
+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 lx = scale(l, 0, 1, 0.5, 0.2);
+    return {h: hx, s: sx, l: lx, a};
 }
-function onCSPError(err) {
-    if (err.blockedURI === "blob") {
-        isBlobURLSupported = false;
-        document.removeEventListener("securitypolicyviolation", onCSPError);
+function _modifyBorderColor(rgb, theme) {
+    if (theme.mode === 0) {
+        return modifyLightSchemeColor(rgb, theme);
     }
+    const poleFg = getFgPole(theme);
+    const poleBg = getBgPole(theme);
+    return modifyColorWithCache(rgb, theme, modifyBorderHSL, poleFg, poleBg);
 }
-document.addEventListener("securitypolicyviolation", onCSPError);
-const objectURLs = new Set();
-function getFilteredImageURL({dataURL, width, height}, theme) {
-    if (dataURL.startsWith("data:image/svg+xml")) {
-        dataURL = escapeXML(dataURL);
+function modifyBorderColor(rgb, theme, shouldRegisterColorVariable = true) {
+    if (!shouldRegisterColorVariable) {
+        return _modifyBorderColor(rgb, theme);
     }
-    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)}`;
+    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
+        });
     }
-    const bytes = new Uint8Array(svg.length);
-    for (let i = 0; i < svg.length; i++) {
-        bytes[i] = svg.charCodeAt(i);
+    if (result.length) {
+        result[result.length - 1].hasComma = false;
     }
-    const blob = new Blob([bytes], {type: "image/svg+xml"});
-    const objectURL = URL.createObjectURL(blob);
-    objectURLs.add(objectURL);
-    return objectURL;
-}
-const xmlEscapeChars = {
-    "<": "&lt;",
-    ">": "&gt;",
-    "&": "&amp;",
-    "'": "&apos;",
-    '"': "&quot;"
-};
-function escapeXML(str) {
-    return str.replace(/[<>&'"]/g, (c) => xmlEscapeChars[c] ?? c);
+    return result;
 }
-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;
-    }
-    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 new Blob([bytes], {type: mediaType});
+
+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)
+    );
 }
-async function tryConvertDataURLToBlobURL(dataURL) {
-    if (!isBlobURLSupported) {
-        return null;
-    }
-    const hash = getHashCode(dataURL);
-    let blobURL = dataURLBlobURLs.get(hash);
-    if (blobURL) {
-        return blobURL;
-    }
-    let blob = tryConvertDataURLToBlobSync(dataURL);
-    if (!blob) {
-        const response = await fetch(dataURL);
-        blob = await response.blob();
+function writeImageDetailsCache(url, imageDetails) {
+    if (!url || !url.startsWith("https://")) {
+        return;
     }
-    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();
+    imageDetailsCacheQueue.set(url, imageDetails);
+    clearTimeout(imageCacheTimeout);
+    imageCacheTimeout = setTimeout(writeImageDetailsQueue, 1000);
 }
-
-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);
+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);
             }
         });
-    });
-}
-function releaseVariablesSheet() {
-    variablesSheet = null;
-    clearColorPalette();
+    } catch (err) {}
 }
-function getRegisteredVariableValue(type, registered) {
-    return `var(${registered[type].variable}, ${registered[type].value})`;
+function writeCSSFetchCache(url, cssText) {
+    const key = `${STORAGE_KEY_CSS_FETCH_PREFIX}${url}`;
+    try {
+        sessionStorage.setItem(key, cssText);
+    } catch (err) {}
 }
-function getRegisteredColor(type, parsed) {
-    const hex = rgbToHexString(parsed);
-    const registered = registeredColors.get(hex);
-    if (registered?.[type]) {
-        return getRegisteredVariableValue(type, registered);
-    }
+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);
+    stop() {
+        if (this.timerId !== null) {
+            cancelAnimationFrame(this.timerId);
+            this.timerId = null;
         }
-        if (registered.border) {
-            border.push(registered.parsed);
+        this.queue = [];
+    }
+    scheduleFrame() {
+        if (this.timerId) {
+            return;
         }
-        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
+        });
+    });
+}
+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 {background, border, text};
 }
-function clearColorPalette() {
-    registeredColors.clear();
-}
-
-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];
+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"});
 }
-const colorModificationCache = new Map();
-function clearColorModificationCache() {
-    colorModificationCache.clear();
+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 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]};`;
-    });
-    themeCacheKeys$1.forEach((key) => {
-        resultId += `${theme[key]};`;
+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));
+        }
     });
-    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);
-    }
-    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;
 }
-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);
+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 modifyLightSchemeColor(rgb, theme) {
-    const poleBg = getBgPole(theme);
-    const poleFg = getFgPole(theme);
-    return modifyColorWithCache(rgb, theme, modifyLightModeHSL, poleFg, poleBg);
+function removeCanvas() {
+    canvas = null;
+    context = null;
 }
-function modifyLightModeHSL({h, s, l, a}, poleFg, poleBg) {
-    const isDark = l < 0.5;
-    let isNeutral;
-    if (isDark) {
-        isNeutral = l < 0.2 || s < 0.12;
+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;
     } else {
-        const isBlue = h > 200 && h < 280;
-        isNeutral = s < 0.24 || (l > 0.8 && isBlue);
+        sw = image.width;
+        sh = image.height;
     }
-    let hx = h;
-    let sx = l;
-    if (isNeutral) {
-        if (isDark) {
-            hx = poleFg.h;
-            sx = poleFg.s;
-        } else {
-            hx = poleBg.h;
-            sx = poleBg.s;
-        }
+    if (sw === 0 || sh === 0) {
+        logWarn("Image is empty");
+        return {
+            isDark: false,
+            isLight: false,
+            isTransparent: false,
+            isLarge: false
+        };
     }
-    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};
+    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++;
+                }
+            }
         }
-        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);
-        }
+    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;
     }
-    if (hx > 40 && hx < 80) {
-        lx *= 0.75;
+    if (blobURLCheckRequested) {
+        return await new Promise((resolve) =>
+            blobURLCheckAwaiters.push(resolve)
+        );
     }
-    return {h: hx, s, l: lx, a};
+    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) {
@@ -3126,10 +3133,18 @@ const unparsableColors = new Set([
     "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;
@@ -3531,7 +3546,7 @@ function getScrollbarColorModifier(value) {
         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");
@@ -3882,7 +3897,7 @@ class VariablesStore {
                 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;
@@ -4352,17 +4367,6 @@ function insertVarValues(source, varValues, fullStack = new Set()) {
     return replaced;
 }
 
-const themeCacheKeys = [
-    "mode",
-    "brightness",
-    "contrast",
-    "grayscale",
-    "sepia",
-    "darkSchemeBackgroundColor",
-    "darkSchemeTextColor",
-    "lightSchemeBackgroundColor",
-    "lightSchemeTextColor"
-];
 function getThemeKey(theme) {
     let resultKey = "";
     themeCacheKeys.forEach((key) => {
@@ -4673,6 +4677,12 @@ function createStyleSheetModifier() {
         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;
@@ -4973,6 +4983,25 @@ function createAdoptedStyleSheetFallback() {
     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",
@@ -5738,19 +5767,27 @@ function cleanLoadingLinks() {
     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;
@@ -5830,18 +5867,28 @@ function manageStyle(element, {update, loadingStart, loadingEnd}) {
         return cssRules;
     }
     function insertStyle() {
-        if (corsCopy) {
-            if (element.nextSibling !== corsCopy) {
-                element.parentNode.insertBefore(corsCopy, element.nextSibling);
+        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(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() {
@@ -5899,7 +5946,12 @@ function manageStyle(element, {update, loadingStart, loadingEnd}) {
                     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;
@@ -5930,12 +5982,31 @@ function manageStyle(element, {update, loadingStart, loadingEnd}) {
                         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"
@@ -6002,7 +6073,7 @@ function manageStyle(element, {update, loadingStart, loadingEnd}) {
             removeCSSRulesFromSheet(sheet);
             if (syncStylePositionWatcher) {
                 syncStylePositionWatcher.run();
-            } else {
+            } else if (inMode === "next") {
                 syncStylePositionWatcher = watchForNodePosition(
                     syncStyle,
                     "prev-sibling",
@@ -6223,7 +6294,7 @@ async function replaceCSSImports(cssText, basePath, cache = new Map()) {
     cssText = cssText.trim();
     return cssText;
 }
-function createCORSCopy(srcElement, cssText) {
+function createCORSCopy(cssText, inject) {
     if (!cssText) {
         return null;
     }
@@ -6232,7 +6303,7 @@ function createCORSCopy(srcElement, cssText) {
     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;
@@ -7007,20 +7078,24 @@ let fixes = null;
 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;
 }
@@ -7045,27 +7120,36 @@ function stopStylePositionWatchers() {
     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", document);
     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 = [
@@ -7082,17 +7166,10 @@ function createStaticStyleOverrides() {
     } 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)
@@ -7113,13 +7190,12 @@ function createStaticStyleOverrides() {
         `   --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);
     const enableCustomElementRegistryProxy = !(
         fixes && fixes.disableCustomElementRegistryProxy
@@ -7133,6 +7209,10 @@ function createStaticStyleOverrides() {
         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) {
@@ -7208,7 +7288,8 @@ function replaceCSSTemplates($cssText) {
 }
 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 = "";
@@ -7737,7 +7818,7 @@ function removeDynamicTheme() {
         selectors.forEach((selector) =>
             removeNode(document.head.querySelector(selector))
         );
-        staticStyleMap.clear();
+        staticStyleMap = new WeakMap();
         removeProxy();
     }
     shadowRootsWithOverrides.forEach((root) => {