Replace imgage diff png background pattern with gradient (#3870)

Made the checkerboard background be more flexible in terms of scale and coloring. Provides dark theme for image diff.

I suppose these colors should not be re-used for a color-picker for a example, because it's usually more convenient to always have it in the light mode.

## Test

* go to e6d3623c7e
* or migrate https://next.forgejo.org/image-test/image-diff to your local instance

## Before/after

![image](/attachments/3835a455-69e0-4aec-bc67-5b226d8016c1)

(Old any - New Forgejo dark - New Gitea dark - New Forgejo/Gitea light)

---

Gradient property is taken from [here](https://www.reddit.com/r/css/comments/u08pf3/how_to_make_a_checkerboard_using_background/).

[CSS compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient#browser_compatibility): about four years of browser versions.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3870
Reviewed-by: Mai-Lapyst <mai-lapyst@noreply.codeberg.org>

release-notes/8.0.0/feat/3870.md

@@ -0,0 +1 @@
+Use CSS-native pattern for image diff background, add dark theme support

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 {

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;
 }

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;
 }

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;
 }

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;
 }