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 https://next.forgejo.org/image-test/image-diff/commit/e6d3623c7e0277e09cf9a19278b1259840fb268799d6b65100904ed82d6b05d2
* 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>

This commit is contained in:

0ko

2024-05-24 17:33:13 +00:00

parent 509a077ec0

commit da12320a0c

6 changed files with 16 additions and 1 deletions

									
										web_src/css/themes/theme-forgejo-dark.css
									
		+3
		
												View File
												
				@@ -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;

				}