From 0cd0034316df953c3196dbfb35b1e1e8370f78fc Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Fri, 20 Mar 2026 03:08:40 +0100
Subject: [PATCH] Abort dynamic color extraction on manga page leave

The in-flight image request updated the theme regardless of if the manga page was still opened or not
---
 CHANGELOG.md                                        | 1 +
 src/features/manga/components/details/Thumbnail.tsx | 9 +++++++++
 2 files changed, 10 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ce00bf90..53088741 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -33,6 +33,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - (**Browse**) Fix incorrectly showing "local source" source in the source language filter (the local source can't be disabled)
 - (**Reader**) Fix page shift when toggling the "offset double spreads" setting (currently: enable: shift to the right; disable: shift to the left – now: inverted)
 - (**Reader**) Fix "auto webtoon mode" detection for manga source languages other than english and the current selected language
+- (**Manga**) Fix dynamic manga page color theme not getting reset after leaving the manga page
 
 ## [20251230.01] (r2937) - 2025-12-30
 
diff --git a/src/features/manga/components/details/Thumbnail.tsx b/src/features/manga/components/details/Thumbnail.tsx
index 58c6a438..b9f2f78f 100644
--- a/src/features/manga/components/details/Thumbnail.tsx
+++ b/src/features/manga/components/details/Thumbnail.tsx
@@ -45,6 +45,7 @@ export const Thumbnail = ({
             return () => {};
         }
 
+        let aborted = false;
         let imageRequest: ImageRequest = {
             response: Promise.resolve(''),
             cleanup: noOp,
@@ -55,11 +56,15 @@ export const Thumbnail = ({
             imageRequest = await requestManager.requestImage(url);
             const image = await imageRequest.response;
 
+            if (aborted) {return;}
+
             const img = new Image();
             img.crossOrigin = 'anonymous';
             img.src = image;
 
             img.onload = () => {
+                if (aborted) {return;}
+
                 const isLargeImage = img.width > 600 && img.height > 900;
 
                 Promise.all([
@@ -73,6 +78,8 @@ export const Thumbnail = ({
                         ],
                     }),
                 ]).then(([palette, averageColor]) => {
+                    if (aborted) {return;}
+
                     if (
                         !palette.Vibrant ||
                         !palette.DarkVibrant ||
@@ -95,6 +102,8 @@ export const Thumbnail = ({
         fetchImage().catch(() => {});
 
         return () => {
+            aborted = true;
+            imageRequest.abortRequest();
             imageRequest.cleanup();
             setDynamicColor(null);
         };