From da58ecdd5bd1cfbc7b635c5dabe6e8ded49e33d6 Mon Sep 17 00:00:00 2001 From: cartermp Date: Mon, 23 Mar 2026 15:33:41 -0700 Subject: [PATCH] more --- src/lib/__tests__/emailHtml.test.ts | 7 ++++--- src/lib/emailHtml.ts | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/lib/__tests__/emailHtml.test.ts b/src/lib/__tests__/emailHtml.test.ts index cc4ed62..ce930e9 100644 --- a/src/lib/__tests__/emailHtml.test.ts +++ b/src/lib/__tests__/emailHtml.test.ts @@ -77,10 +77,11 @@ describe("prepareHtml", () => { "dark mode filter must not be in a CSS @media rule"); }); - it("injects counter-filter on img and video to preserve image colors", () => { + it("injects counter-filter on img/video/picture/canvas to preserve image colors", () => { const result = prepareHtml(lightEmail); - // img and video get the same filter applied twice (self-inverse for images) - assert.ok(result.includes("img,video{filter:invert(1) hue-rotate(180deg)}"), `got: ${result}`); + // These elements get the same filter applied twice (self-inverse). + // !important ensures email CSS cannot override the counter-filter. + assert.ok(result.includes("img,video,picture,canvas{filter:invert(1) hue-rotate(180deg)!important}"), `got: ${result}`); }); }); diff --git a/src/lib/emailHtml.ts b/src/lib/emailHtml.ts index 413f297..4057dea 100644 --- a/src/lib/emailHtml.ts +++ b/src/lib/emailHtml.ts @@ -37,7 +37,7 @@ export function prepareHtml(html: string): string { ? "" : `if(window.matchMedia&&window.matchMedia('(prefers-color-scheme:dark)').matches){` + `var ds=document.createElement('style');` + - `ds.textContent='html{filter:invert(1) hue-rotate(180deg)}img,video{filter:invert(1) hue-rotate(180deg)}';` + + `ds.textContent='html{filter:invert(1) hue-rotate(180deg)}img,video,picture,canvas{filter:invert(1) hue-rotate(180deg)!important}';` + `document.head.appendChild(ds);}`; const inject = [ -- 2.51.2