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 = [