diff --git a/release-notes/8.0.0/feat/3870.md b/release-notes/8.0.0/feat/3870.md
new file mode 100644
index 0000000000..497ba19c5d
--- /dev/null
+++ b/release-notes/8.0.0/feat/3870.md
@@ -0,0 +1 @@
+Use CSS-native pattern for image diff background, add dark theme support
diff --git a/web_src/css/features/imagediff.css b/web_src/css/features/imagediff.css
index ad3165e8d8..c8ead2ba4a 100644
--- a/web_src/css/features/imagediff.css
+++ b/web_src/css/features/imagediff.css
@@ -13,7 +13,9 @@
 
 .image-diff-container img {
   border: 1px solid var(--color-primary-light-7);
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC") right bottom var(--color-primary-light-7);
+  --gradient: conic-gradient(var(--checkerboard-color-1) 90deg, var(--checkerboard-color-2) 90deg 180deg, var(--checkerboard-color-1) 180deg 270deg, var(--checkerboard-color-2) 270deg);
+  background: var(--gradient);
+  background-size: 20px 20px;
 }
 
 .image-diff-container .before-container {
diff --git a/web_src/css/themes/theme-forgejo-dark.css b/web_src/css/themes/theme-forgejo-dark.css
index 0a5c64e736..b0fb7c22e1 100644
--- a/web_src/css/themes/theme-forgejo-dark.css
+++ b/web_src/css/themes/theme-forgejo-dark.css
@@ -242,6 +242,9 @@
   --color-highlight-fg: var(--color-primary-light-4);
   --color-highlight-bg: var(--color-primary-alpha-20);
   --color-overlay-backdrop: #080808c0;
+  /* pattern colors for image diff */
+  --checkerboard-color-1: #474747;
+  --checkerboard-color-2: #313131;
   accent-color: var(--color-accent);
   color-scheme: dark;
 }
diff --git a/web_src/css/themes/theme-forgejo-light.css b/web_src/css/themes/theme-forgejo-light.css
index d5ecf7332f..f2bafc148b 100644
--- a/web_src/css/themes/theme-forgejo-light.css
+++ b/web_src/css/themes/theme-forgejo-light.css
@@ -259,6 +259,9 @@
   --color-highlight-fg: var(--color-primary-light-4);
   --color-highlight-bg: var(--color-primary-light-6);
   --color-overlay-backdrop: #080808c0;
+  /* pattern colors for gradient */
+  --checkerboard-color-1: #ffffff;
+  --checkerboard-color-2: #e5e5e5;
   accent-color: var(--color-accent);
   color-scheme: light;
 }
diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index 325d31ea14..f226f2264c 100644
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -238,6 +238,9 @@
   --color-highlight-fg: #87651e;
   --color-highlight-bg: #352c1c;
   --color-overlay-backdrop: #080808c0;
+  /* pattern colors for image diff */
+  --checkerboard-color-1: #313131;
+  --checkerboard-color-2: #212121;
   accent-color: var(--color-accent);
   color-scheme: dark;
 }
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index 695645aaa5..f266e3583d 100644
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -238,6 +238,9 @@
   --color-highlight-fg: #eed200;
   --color-highlight-bg: #fffbdd;
   --color-overlay-backdrop: #080808c0;
+  /* pattern colors for gradient */
+  --checkerboard-color-1: #ffffff;
+  --checkerboard-color-2: #e5e5e5;
   accent-color: var(--color-accent);
   color-scheme: light;
 }