darkreader 4.9.87 → 4.9.92

package/README.md

@@ -50,9 +50,9 @@ Dark Reader repository contains these digital signatures and you can add them to
 npm run build -- --firefox --version=4.9.63
 ```
 
-Please note that only Firefox Add-ons store signatures are present in the repositiry right now. Also, due to NodeJS and TypeScript version compatibility, one might have to first check out the old revision (commit), then build the extension files, then check out the recent commit and create the bundle (by running only `signature` and `zip` steps).
+Please note that only Firefox Add-ons store signatures are present in the repository right now. Also, due to NodeJS and TypeScript version compatibility, one might have to first check out the old revision (commit), then build the extension files, then check out the recent commit and create the bundle (by running only `signature` and `zip` steps).
 
-## Using Dark Reader for a website
+## Using Dark Reader on a website
 
 You can use Dark Reader to enable dark mode on your website!
 
@@ -117,46 +117,76 @@ Be aware that Dark Reader will add the `chrome` object onto the `window` object.
 
 ## Site fixes
 
-Automatically syncing the site fixes to every Dark Reader user was disabled because the GitHub team does not allow using GitHub as a CDN. The storage of these files would be expensive, and making requests to other resources would look suspicious. Each new release of Dark Reader will include these changes.
+Automatically syncing the site fixes for every Dark Reader user was disabled because the GitHub team does not allow using GitHub as a content delivery network (CDN). The storage of these files would be expensive, and making requests to other resources would look suspicious. Each new release of Dark Reader will include the new changes.
 
-However, this can be enabled using the following steps:
+However, this can be manually enabled with the following steps:
 
-- Click on the Dark Reader icon.
-- Click on the `Dev tools` button (in the bottom-right corner).
-- Click on the `Preview new design` button.
-- Enable the `Synchronize site fixes` setting under `Settings` -> `Manage settings`.
+1. Click on the Dark Reader extension icon.
+2. Click on the `Dev tools` button (in the bottom-right corner).
+3. Go to `Advanced` and click on the `Preview new design` button.
+4. Close the developer tools window and click on the Dark Reader extension icon again.
+5. Go to `Settings` -> `Advanced` and enable the `Synchronize sites fixes` setting.
 
 To force a synchronization of the sites fixes (when the corresponding setting is enabled), perform the following steps:
 
-- Click on the Dark Reader icon.
-- Click on the `Dev tools` button (in the bottom-right corner).
-- Click on the `Reset` button. This will remove any custom site fixes you may have.
+1. Click on the Dark Reader extension icon.
+2. Go to `Settings` -> `Advanced` -> `Dev tools`.
+3. For each "Editor" section, click on `Reset changes`, confirm with `OK`, and then click on `Apply`. Afterwards, close the developer tools window and reload the desired page(s).
 
-## Enable Dark Reader for restricted websites on Firefox
+## Enable Dark Reader on restricted pages on Mozilla Firefox
 
 By default, Dark Reader does not work on some websites due to **security restrictions** enforced by Mozilla.
 
-The following instructions will guide you on how to bypass those restrictions.
+The following instructions will guide you on how to disable those restrictions.
 
 **Proceed with caution. This exposes you to a security risk if you do not know what you are doing.**
 
+**Be sure that you do not have any suspicious or malicious-looking extension installed before proceeding.**
+
 **These settings will apply to all extensions, and not just Dark Reader.**
 
 Step 1: change Dark Reader's settings.
 
-- Click on the Dark Reader icon.
-- Click on the `Dev tools` button (in the bottom-right corner).
-- Click on the `Preview new design button`.
-- Enable the `Enable on restricted pages` setting under `Settings` -> `Advanced`.
+1. Click on the Dark Reader extension icon.
+2. Click on the `Dev tools` button (in the bottom-right corner).
+3. Go to `Advanced` and click on the `Preview new design` button.
+4. Close the developer tools window and click on the Dark Reader extension icon again.
+5. Go to `Settings` -> `Advanced` and enable the `Enable on restricted pages` setting.
 
 Step 2: change Firefox's settings.
 
 - Type `about:config` in the address bar and press Enter.
-A warning page may appear. Click `Accept the Risk and Continue` to proceed.
-- Search for and set `extensions.webextensions.restrictedDomains` to an empty value.
-- Create `extensions.webextensions.addons-restricted-domains@mozilla.com.disabled` with `boolean` as type and set its value to `true`.
-- Set `privacy.resistFingerprinting.block_mozAddonManager` to `true`.
-- Restart Firefox.
+  - A warning page may appear. Click `Accept the Risk and Continue` to proceed.
+- Search for and set `extensions.webextensions.restrictedDomains` to an empty value (if the preference does not exist, create with it `String` as the type).
+- Set `privacy.resistFingerprinting.block_mozAddonManager` to `true` (if the preference does not exist, create with it `Boolean` as the type).
+
+After changing the necessary settings for both Dark Reader and Firefox, reload the desired page(s).
+
+**If you had previously changed any of the following preferences, please reset them to their default values as they are only related to security and are not necessary for Dark Reader to work on restricted websites.**
+To reset them, click on the reset (or delete icon, if present) icon at the most-right corner of the preference line in `about:config`.
+- `extensions.webextensions.addons-restricted-domains@mozilla.com.disabled`
+- `extensions.quarantinedDomains.enabled`
+- `extensions.quarantinedDomains.list`
+
+### Clarification about quarantined domains ("Run on sites with restrictions" option)
+<details><summary>Quarantined domains and Dark Reader — an explanation</summary>
+
+The option "Run on sites with restrictions", present in some extensions, is only related to quarantined domains, and is not needed for Dark Reader to work on restricted websites.
+
+More information about quarantined domains: [Why are some add-ons not allowed on sites restricted by Mozilla?](https://support.mozilla.org/en-US/kb/quarantined-domains)
+
+For Dark Reader, the option is not shown because Dark Reader is a [Recommended](https://support.mozilla.org/en-US/kb/recommended-extensions-program) extension by Mozilla.
+
+Due to it being a Recommended extension, it means it meets the "highest standards of security, functionality, and user experience". The quarantined domains are only related to security, and because Dark Reader is considered secure by Mozilla, that option is not shown, meaning **it will always run even on quarantined domains**.
+
+[From Firefox's source code:](https://searchfox.org/mozilla-central/source/toolkit/components/extensions/Extension.sys.mjs#2937-2938)
+
+```
+// Privileged extensions and any extensions with a recommendation state are
+// exempt from the quarantined domains.
+```
+
+</details>
 
 <h2 align="center">Contributors</h2>
 <br/>

package/darkreader.js

@@ -1,5 +1,5 @@
 /**
- * Dark Reader v4.9.87
+ * Dark Reader v4.9.92
  * https://darkreader.org/
  */
 
@@ -355,20 +355,35 @@
         darkSchemeTextColor: DEFAULT_COLORS.darkScheme.text,
         lightSchemeBackgroundColor: DEFAULT_COLORS.lightScheme.background,
         lightSchemeTextColor: DEFAULT_COLORS.lightScheme.text,
-        scrollbarColor: isMacOS ? "" : "auto",
+        scrollbarColor: "",
         selectionColor: "auto",
         styleSystemControls: !isCSSColorSchemePropSupported,
         lightColorScheme: "Default",
         darkColorScheme: "Default",
         immediateModify: false
     };
+    const filterModeSites = [
+        "*.officeapps.live.com",
+        "*.sharepoint.com",
+        "docs.google.com",
+        "onedrive.live.com"
+    ];
     ({
         schemeVersion: 0,
         enabled: true,
         fetchNews: true,
         theme: DEFAULT_THEME,
         presets: [],
-        customThemes: [],
+        customThemes: filterModeSites.map((url) => {
+            const engine = isChromium
+                ? ThemeEngine.svgFilter
+                : ThemeEngine.cssFilter;
+            return {
+                url: [url],
+                theme: {...DEFAULT_THEME, engine},
+                builtIn: true
+            };
+        }),
         enabledByDefault: true,
         enabledFor: [],
         disabledFor: [],
@@ -389,10 +404,11 @@
             longitude: null
         },
         previewNewDesign: false,
+        previewNewestDesign: false,
         enableForPDF: true,
         enableForProtectedPages: false,
         enableContextMenus: false,
-        detectDarkTheme: false
+        detectDarkTheme: true
     });
 
     function isArrayLike(items) {
@@ -1935,12 +1951,6 @@
         fnCache.set(id, color);
         return color;
     }
-    function noopHSL(hsl) {
-        return hsl;
-    }
-    function modifyColor(rgb, theme) {
-        return modifyColorWithCache(rgb, theme, noopHSL);
-    }
     function modifyLightSchemeColor(rgb, theme) {
         const poleBg = getBgPole(theme);
         const poleFg = getFgPole(theme);
@@ -2738,7 +2748,7 @@
             lines.push(`    color-scheme: dark !important;`);
             lines.push("}");
             lines.push("iframe {");
-            lines.push(`    color-scheme: initial;`);
+            lines.push(`    color-scheme: dark !important;`);
             lines.push("}");
         }
         const bgSelectors = joinSelectors(
@@ -2846,70 +2856,26 @@
         return lines.join("\n");
     }
     function getModifiedScrollbarStyle(theme) {
-        const lines = [];
         let colorTrack;
-        let colorIcons;
         let colorThumb;
-        let colorThumbHover;
-        let colorThumbActive;
-        let colorCorner;
         if (theme.scrollbarColor === "auto") {
             colorTrack = modifyBackgroundColor({r: 241, g: 241, b: 241}, theme);
-            colorIcons = modifyForegroundColor({r: 96, g: 96, b: 96}, theme);
             colorThumb = modifyBackgroundColor({r: 176, g: 176, b: 176}, theme);
-            colorThumbHover = modifyBackgroundColor(
-                {r: 144, g: 144, b: 144},
-                theme
-            );
-            colorThumbActive = modifyBackgroundColor(
-                {r: 96, g: 96, b: 96},
-                theme
-            );
-            colorCorner = modifyBackgroundColor(
-                {r: 255, g: 255, b: 255},
-                theme
-            );
         } else {
             const rgb = parseColorWithCache(theme.scrollbarColor);
             const hsl = rgbToHSL(rgb);
-            const isLight = hsl.l > 0.5;
-            const lighten = (lighter) => ({
-                ...hsl,
-                l: clamp(hsl.l + lighter, 0, 1)
-            });
             const darken = (darker) => ({
                 ...hsl,
                 l: clamp(hsl.l - darker, 0, 1)
             });
             colorTrack = hslToString(darken(0.4));
-            colorIcons = hslToString(isLight ? darken(0.4) : lighten(0.4));
             colorThumb = hslToString(hsl);
-            colorThumbHover = hslToString(lighten(0.1));
-            colorThumbActive = hslToString(lighten(0.2));
-            colorCorner = hslToString(darken(0.5));
         }
-        lines.push("::-webkit-scrollbar {");
-        lines.push(`    background-color: ${colorTrack};`);
-        lines.push(`    color: ${colorIcons};`);
-        lines.push("}");
-        lines.push("::-webkit-scrollbar-thumb {");
-        lines.push(`    background-color: ${colorThumb};`);
-        lines.push("}");
-        lines.push("::-webkit-scrollbar-thumb:hover {");
-        lines.push(`    background-color: ${colorThumbHover};`);
-        lines.push("}");
-        lines.push("::-webkit-scrollbar-thumb:active {");
-        lines.push(`    background-color: ${colorThumbActive};`);
-        lines.push("}");
-        lines.push("::-webkit-scrollbar-corner {");
-        lines.push(`    background-color: ${colorCorner};`);
-        lines.push("}");
-        if (isFirefox) {
-            lines.push("* {");
-            lines.push(`    scrollbar-color: ${colorThumb} ${colorTrack};`);
-            lines.push("}");
-        }
-        return lines.join("\n");
+        return [
+            `* {`,
+            `    scrollbar-color: ${colorThumb} ${colorTrack};`,
+            `}`
+        ].join("\n");
     }
     function getModifiedFallbackStyle(theme, {strict}) {
         const factory = defaultFallbackFactory;
@@ -2996,6 +2962,9 @@
         isCancelled
     ) {
         try {
+            if (shouldIgnoreImage(rule.selectorText, ignoreImageSelectors)) {
+                return value;
+            }
             const gradients = parseGradient(value);
             const urls = getMatches(cssURLRegex, value);
             if (urls.length === 0 && gradients.length === 0) {
@@ -3052,11 +3021,6 @@
                 };
             };
             const getURLModifier = (urlValue) => {
-                if (
-                    shouldIgnoreImage(rule.selectorText, ignoreImageSelectors)
-                ) {
-                    return null;
-                }
                 let url = getCSSURLValue(urlValue);
                 const isURLEmpty = url.length === 0;
                 const {parentStyleSheet} = rule;
@@ -4489,8 +4453,8 @@
         }
         const isSVGElement = element instanceof SVGElement;
         const svg = isSVGElement
-            ? element.ownerSVGElement ??
-              (element instanceof SVGSVGElement ? element : null)
+            ? (element.ownerSVGElement ??
+              (element instanceof SVGSVGElement ? element : null))
             : null;
         if (isSVGElement && theme.mode === 1 && svg) {
             if (svgInversionCache.has(svg)) {
@@ -6889,32 +6853,23 @@
         document.head.appendChild(overrideStyle);
         setupNodePositionWatcher(overrideStyle, "override");
         const variableStyle = createOrUpdateStyle("darkreader--variables");
-        const selectionColors = getSelectionColor(theme);
-        const {
-            darkSchemeBackgroundColor,
-            darkSchemeTextColor,
-            lightSchemeBackgroundColor,
-            lightSchemeTextColor,
-            mode
-        } = theme;
-        let schemeBackgroundColor =
-            mode === 0 ? lightSchemeBackgroundColor : darkSchemeBackgroundColor;
-        let schemeTextColor =
-            mode === 0 ? lightSchemeTextColor : darkSchemeTextColor;
-        schemeBackgroundColor = modifyBackgroundColor(
-            parseColorWithCache(schemeBackgroundColor),
+        const selectionColors = theme?.selectionColor
+            ? getSelectionColor(theme)
+            : null;
+        const neutralBackgroundColor = modifyBackgroundColor(
+            parseColorWithCache("#ffffff"),
             theme
         );
-        schemeTextColor = modifyForegroundColor(
-            parseColorWithCache(schemeTextColor),
+        const neutralTextColor = modifyForegroundColor(
+            parseColorWithCache("#000000"),
             theme
         );
         variableStyle.textContent = [
             `:root {`,
-            `   --darkreader-neutral-background: ${schemeBackgroundColor};`,
-            `   --darkreader-neutral-text: ${schemeTextColor};`,
-            `   --darkreader-selection-background: ${selectionColors.backgroundColorSelection};`,
-            `   --darkreader-selection-text: ${selectionColors.foregroundColorSelection};`,
+            `   --darkreader-neutral-background: ${neutralBackgroundColor};`,
+            `   --darkreader-neutral-text: ${neutralTextColor};`,
+            `   --darkreader-selection-background: ${selectionColors?.backgroundColorSelection ?? "initial"};`,
+            `   --darkreader-selection-text: ${selectionColors?.foregroundColorSelection ?? "initial"};`,
             `}`
         ].join("\n");
         document.head.insertBefore(variableStyle, inlineStyle.nextSibling);
@@ -6999,7 +6954,11 @@
         return $cssText.replace(/\${(.+?)}/g, (_, $color) => {
             const color = parseColorWithCache($color);
             if (color) {
-                return modifyColor(color, theme);
+                const lightness = getSRGBLightness(color.r, color.g, color.b);
+                if (lightness > 0.5) {
+                    return modifyBackgroundColor(color, theme);
+                }
+                return modifyForegroundColor(color, theme);
             }
             return $color;
         });

package/package.json

@@ -1,18 +1,22 @@
 {
   "name": "darkreader",
-  "version": "4.9.87",
+  "version": "4.9.92",
   "description": "Dark mode for every website",
   "scripts": {
     "api": "node --max-old-space-size=3072 tasks/cli.js build --api",
     "build": "node --max-old-space-size=3072 tasks/cli.js build --release",
     "build:all": "node --max-old-space-size=3072 tasks/cli.js build --debug --release --api",
+    "build:firefox": "node --max-old-space-size=3072 tasks/cli.js build --release --firefox",
+    "build:plus": "node --max-old-space-size=3072 tasks/cli.js build --plus --release",
     "code-style": "npm run lint",
     "debug": "node --max-old-space-size=3072 tasks/cli.js build --debug",
     "debug:watch": "node --max-old-space-size=3072 tasks/cli.js build --debug --watch --chrome --firefox",
     "debug:watch:mv3": "node --max-old-space-size=3072 tasks/cli.js build --debug --watch --chrome-mv3",
+    "debug:watch:plus": "node --max-old-space-size=3072 tasks/cli.js build --debug --watch --plus --chrome",
     "dependencies:upgrade": "node tasks/dependencies.js",
     "lint": "eslint --ignore-pattern '!.eslint-plugin-local.js' -- 'src/**/*.ts' 'src/**/*.tsx' 'tasks/**/*.js' 'tests/[!coverage]**/*.js' 'tests/**/*.ts' '.eslintrc.js' 'index.d.ts'",
     "lint:bundle": "(node ./tasks/check-exists.js ./build/debug/chrome || node tasks/build.js --debug --api --chrome) && eslint -- 'build/debug/chrome/**/*.js' 'darkreader.js'",
+    "plus-link": "cd src && ln -s ../../darkreader-plus plus",
     "prepublishOnly": "npm test && npm run api",
     "release": "npm test && npm run lint && node tasks/cli.js build --release",
     "test": "npm run test:unit",
@@ -55,30 +59,33 @@
     "type": "opencollective",
     "url": "https://opencollective.com/darkreader/donate"
   },
+  "dependencies": {
+    "malevic": "0.20.2"
+  },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.7",
     "@rollup/plugin-typescript": "11.1.6",
-    "@types/chrome": "0.0.268",
+    "@types/chrome": "0.0.269",
     "@types/eslint": "8.56.10",
     "@types/jasmine": "5.1.4",
     "@types/jest": "29.5.12",
     "@types/karma": "6.3.8",
     "@types/karma-coverage": "2.0.3",
-    "@types/node": "20.14.9",
-    "@types/ws": "8.5.10",
-    "@typescript-eslint/eslint-plugin": "7.14.1",
-    "@typescript-eslint/parser": "7.14.1",
+    "@types/node": "22.2.0",
+    "@types/ws": "8.5.12",
+    "@typescript-eslint/eslint-plugin": "7.16.0",
+    "@typescript-eslint/parser": "7.16.0",
     "chokidar": "3.6.0",
     "eslint": "8.57.0",
     "eslint-plugin-compat": "5.0.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-local": "4.2.2",
-    "globby": "14.0.1",
-    "jasmine-core": "5.1.2",
+    "globby": "14.0.2",
+    "jasmine-core": "5.2.0",
     "jest": "29.7.0",
     "jest-extended": "4.0.2",
-    "karma": "6.4.3",
+    "karma": "6.4.4",
     "karma-chrome-launcher": "3.2.0",
     "karma-coverage": "2.2.1",
     "karma-firefox-launcher": "2.1.3",
@@ -87,16 +94,15 @@
     "karma-safari-launcher": "1.0.0",
     "karma-spec-reporter": "0.0.36",
     "less": "4.2.0",
-    "malevic": "0.20.1",
-    "prettier": "3.3.2",
-    "puppeteer-core": "22.12.1",
-    "rollup": "4.18.0",
+    "prettier": "3.3.3",
+    "puppeteer-core": "23.0.2",
+    "rollup": "4.20.0",
     "rollup-plugin-istanbul": "5.0.0",
-    "ts-jest": "29.1.5",
+    "ts-jest": "29.2.4",
     "tslib": "2.6.3",
-    "typescript": "5.5.2",
+    "typescript": "5.5.4",
     "web-ext": "8.2.0",
-    "ws": "8.17.1",
+    "ws": "8.18.0",
     "yazl": "2.5.1"
   }
 }