Repository: darkreader/darkreader (ts)

Issue:
Incorrect coloring of map legends on wikipedia
Please see the following colored map legend on wikipedia with dark reader on and then off

https://i.imgur.com/2Um4ToF.png

https://i.imgur.com/ocp4HFu.png

As you can see, with dark reader on, some of the colors get darkened when they shouldn't 

The source page is 
https://en.wikipedia.org/wiki/2019–20_coronavirus_pandemic


Pull request:
Ignore section
Well add your description here as you and me both knows already what this does

closes #2185 
TODO see if more Issues has this origin

Patch:
diff --git a/src/config/dynamic-theme-fixes.config b/src/config/dynamic-theme-fixes.config
index 6f789180..042ee14f 100644
--- a/src/config/dynamic-theme-fixes.config
+++ b/src/config/dynamic-theme-fixes.config
@@ -3374,6 +3374,9 @@ INVERT
 
 wikipedia.org
 
+IGNORE INLINE STYLE
+.legend-color
+
 INVERT
 .mwe-math-element
 .mw-ext-score
diff --git a/src/definitions.d.ts b/src/definitions.d.ts
index 2a630812..763217b0 100644
--- a/src/definitions.d.ts
+++ b/src/definitions.d.ts
@@ -102,6 +102,7 @@ export interface Shortcuts {
 
 export interface DynamicThemeFix {
     url: string[];
+    ignoreInlineStyle: string[];
     invert: string[];
     css: string;
 }
diff --git a/src/generators/dynamic-theme.ts b/src/generators/dynamic-theme.ts
index 3dd3e3ea..ff66bb98 100644
--- a/src/generators/dynamic-theme.ts
+++ b/src/generators/dynamic-theme.ts
@@ -5,6 +5,7 @@ import {compareURLPatterns, isURLInList} from '../utils/url';
 import {DynamicThemeFix} from '../definitions';
 
 const dynamicThemeFixesCommands = {
+    'IGNORE INLINE STYLE': 'ignoreInlineStyle',
     'INVERT': 'invert',
     'CSS': 'css',
 };
@@ -50,6 +51,7 @@ export function getDynamicThemeFixesFor(url: string, frameURL: string, fixes: Dy
 
     const common = {
         url: fixes[0].url,
+        ignoreInlineStyle: fixes[0].ignoreInlineStyle || [],
         invert: fixes[0].invert || [],
         css: fixes[0].css || [],
     };
@@ -73,6 +75,7 @@ export function getDynamicThemeFixesFor(url: string, frameURL: string, fixes: Dy
 
     return {
         url: match.url,
+        ignoreInlineStyle: common.ignoreInlineStyle.concat(match.ignoreInlineStyle || []),
         invert: common.invert.concat(match.invert || []),
         css: [common.css, match.css].filter((s) => s).join('\n'),
     };
diff --git a/src/inject/dynamic-theme/index.ts b/src/inject/dynamic-theme/index.ts
index 550d1f27..5421191d 100644
--- a/src/inject/dynamic-theme/index.ts
+++ b/src/inject/dynamic-theme/index.ts
@@ -161,7 +161,7 @@ function createDynamicStyleOverrides() {
             inlineStyleElements.push(...Array.from(elements as NodeListOf<HTMLLinkElement | HTMLStyleElement>));
         }
     });
-    inlineStyleElements.forEach((el) => overrideInlineStyle(el as HTMLElement, filter));
+    inlineStyleElements.forEach((el) => overrideInlineStyle(el as HTMLElement, filter, fixes.ignoreInlineStyle));
 }
 
 let loadingStylesCounter = 0;
@@ -313,7 +313,7 @@ function watchForUpdates() {
     });
 
     watchForInlineStyles((element) => {
-        overrideInlineStyle(element, filter);
+        overrideInlineStyle(element, filter, fixes.ignoreInlineStyle);
         if (element === document.documentElement) {
             const rootVariables = getElementCSSVariables(document.documentElement);
             if (rootVariables.size > 0) {
@@ -325,7 +325,7 @@ function watchForUpdates() {
         const inlineStyleElements = root.querySelectorAll(INLINE_STYLE_SELECTOR);
         if (inlineStyleElements.length > 0) {
             createShadowStaticStyleOverrides(root);
-            inlineStyleElements.forEach((el) => overrideInlineStyle(el as HTMLElement, filter));
+            inlineStyleElements.forEach((el) => overrideInlineStyle(el as HTMLElement, filter, fixes.ignoreInlineStyle));
         }
     });
 
diff --git a/src/inject/dynamic-theme/inline-style.ts b/src/inject/dynamic-theme/inline-style.ts
index c5287505..03b4132e 100644
--- a/src/inject/dynamic-theme/inline-style.ts
+++ b/src/inject/dynamic-theme/inline-style.ts
@@ -185,7 +185,16 @@ function getInlineStyleCacheKey(el: HTMLElement, theme: FilterConfig) {
         .join(' ');
 }
 
-export function overrideInlineStyle(element: HTMLElement, theme: FilterConfig) {
+function shouldIgnoreInlineStyle (element: HTMLElement, selectors: string[]) {
+    for (const ingnoredSelector of selectors) {
+        if (element.matches(ingnoredSelector)) {
+            return true;
+        }
+    }
+    return false;
+}
+
+export function overrideInlineStyle(element: HTMLElement, theme: FilterConfig, ignoreSelectors: string[]) {
     const cacheKey = getInlineStyleCacheKey(element, theme);
     if (cacheKey === inlineStyleCache.get(element)) {
         return;
@@ -211,6 +220,17 @@ export function overrideInlineStyle(element: HTMLElement, theme: FilterConfig) {
         unsetProps.delete(targetCSSProp);
     }
 
+    if (ignoreSelectors.length > 0) {
+        if (shouldIgnoreInlineStyle(element, ignoreSelectors)) {
+            unsetProps.forEach((cssProp) => {
+                const {store, dataAttr} = overrides[cssProp];
+                store.delete(element);
+                element.removeAttribute(dataAttr);
+            });
+            return;
+        }
+    }
+
     if (element.hasAttribute('bgcolor')) {
         let value = element.getAttribute('bgcolor');
         if (value.match(/^[0-9a-f]{3}$/i) || value.match(/^[0-9a-f]{6}$/i)) {


Test patch:
diff --git a/tests/config.tests.ts b/tests/config.tests.ts
index 29ddeff0..36aa7548 100644
--- a/tests/config.tests.ts
+++ b/tests/config.tests.ts
@@ -62,7 +62,7 @@ test('Dynamic Theme Fixes config', async () => {
     expect(fixes.map(({url}) => url[0])).toEqual(fixes.map(({url}) => url[0]).sort(compareURLPatterns));
 
     // selectors should have no comma
-    expect(fixes.every(({invert}) => (invert || []).every((s) => s.indexOf(',') < 0))).toBe(true);
+    expect(fixes.every(({invert, ignoreInlineStyle}) => (invert || []).concat(ignoreInlineStyle || []).every((s) => s.indexOf(',') < 0))).toBe(true);
 
     // fixes are properly formatted
     expect(throwIfDifferent(file, formatDynamicThemeFixes(fixes), 'Dynamic fixes format error')).not.toThrow();
@@ -81,9 +81,13 @@ test('Dynamic Theme Fixes config', async () => {
         'twitter.com',
         'UNSUPPORTED', 'a', 'b',
         'INVERT', 'c', 'd',
+        '========',
+        'wikipedia.org',
+        'IGNORE INLINE STYLE', 'a', 'b',
     ].join('\r\n'))).toEqual([
         {url: ['inbox.google.com', 'mail.google.com'], invert: ['a', 'b'], css: '.x { color: white !important; }'},
         {url: ['twitter.com'], invert: ['c', 'd']},
+        {url: ['wikipedia.org'], ignoreInlineStyle: ['a', 'b']},
     ]);
 });