From ae7bafe4450066bb10aefb389ac9070bfd06accf Mon Sep 17 00:00:00 2001
From: Rayan Salhab <r.salhab@aiyexpertsolutions.com>
Date: Wed, 22 Jul 2026 14:42:52 +0300
Subject: [PATCH] enhance: improve diff contrast in light and dark themes
 (#37477)

Fixes https://github.com/go-gitea/gitea/issues/37448

Adjust the diff stat counter and syntax colors in both light and dark
themes to github-like colors that meet a >= 5:1 contrast floor (>= 7:1
for syntax names on diff rows), and make the counters semibold.

---------

Signed-off-by: cyphercodes <cyphercodes@users.noreply.github.com>
Co-authored-by: cyphercodes <cyphercodes@users.noreply.github.com>
Co-authored-by: Hermes Agent (GPT-5.5) <hermes-agent@nousresearch.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Hermes Agent <hermes@noreply.local>
Co-authored-by: silverwind <me@silverwind.io>
---
 templates/repo/diff/stats.tmpl                              | 4 ++--
 web_src/css/themes/theme-gitea-dark.css                     | 6 +++---
 .../themes/theme-gitea-light-protanopia-deuteranopia.css    | 4 ++--
 web_src/css/themes/theme-gitea-light-tritanopia.css         | 2 +-
 web_src/css/themes/theme-gitea-light.css                    | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/templates/repo/diff/stats.tmpl b/templates/repo/diff/stats.tmpl
index 09ce9b3478..dca72dbb4e 100644
--- a/templates/repo/diff/stats.tmpl
+++ b/templates/repo/diff/stats.tmpl
@@ -6,8 +6,8 @@
 {{if or .Addition .Deletion}}
 <div class="flex-text-block tw-flex-shrink-0 tw-text-[13px] {{if .Classes}}{{.Classes}}{{end}}">
 	<span>
-		{{if .Addition}}<span class="tw-text-diff-added-fg">+{{.Addition}}</span>{{end}}
-		{{if .Deletion}}<span class="tw-text-diff-removed-fg">-{{.Deletion}}</span>{{end}}
+		{{if .Addition}}<strong class="tw-text-diff-added-fg">+{{.Addition}}</strong>{{end}}
+		{{if .Deletion}}<strong class="tw-text-diff-removed-fg">-{{.Deletion}}</strong>{{end}}
 	</span>
 	<span class="diff-stats-bar" data-tooltip-content="{{ctx.Locale.Tr "repo.diff.stats_desc_file" (Eval .Addition "+" .Deletion) .Addition .Deletion}}">
 		{{/* if the denominator is zero, then the float result is "width: NaNpx", as before, it just works */}}
diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index bd0530cdb7..1d6cfa7501 100644
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -163,14 +163,14 @@ gitea-theme-meta-info {
   --color-grey-light: #898d96;
   --color-gold: #b1983b;
   --color-white: #ffffff;
-  --color-diff-added-fg: #87ab63;
+  --color-diff-added-fg: #93b373;
   --color-diff-added-linenum-bg: #274227;
   --color-diff-added-row-bg: #203224;
   --color-diff-added-row-border: #314a37;
   --color-diff-added-word-bg: #3c653c;
   --color-diff-moved-row-bg: #818044;
   --color-diff-moved-row-border: #bcca6f;
-  --color-diff-removed-fg: #cc4848;
+  --color-diff-removed-fg: #fb5f5b;
   --color-diff-removed-linenum-bg: #482121;
   --color-diff-removed-row-bg: #301e1e;
   --color-diff-removed-row-border: #634343;
@@ -270,7 +270,7 @@ gitea-theme-meta-info {
   --color-syntax-keyword: #ff8854;
   --color-syntax-bool: #25bbc9;
   --color-syntax-control: #dd9e17;
-  --color-syntax-name: #c7a618;
+  --color-syntax-name: #fabd2f;
   --color-syntax-type: #eb8cb3;
   --color-syntax-number: #63b2dd;
   --color-syntax-operator: #ff8854;
diff --git a/web_src/css/themes/theme-gitea-light-protanopia-deuteranopia.css b/web_src/css/themes/theme-gitea-light-protanopia-deuteranopia.css
index 6350cdd156..68f82ad5b3 100644
--- a/web_src/css/themes/theme-gitea-light-protanopia-deuteranopia.css
+++ b/web_src/css/themes/theme-gitea-light-protanopia-deuteranopia.css
@@ -8,11 +8,11 @@ gitea-theme-meta-info {
 
 /* red/green colorblind-friendly colors */
 :root {
-  --color-diff-added-fg: #2185d0;
+  --color-diff-added-fg: #0860cc;
   --color-diff-added-linenum-bg: #b6e3ff;
   --color-diff-added-row-bg: #ddf4ff;
   --color-diff-added-word-bg: #b6e3ff;
-  --color-diff-removed-fg: #fc6500;
+  --color-diff-removed-fg: #a84400;
   --color-diff-removed-linenum-bg: #ffd8b5;
   --color-diff-removed-row-bg: #fff1e5;
   --color-diff-removed-word-bg: #ffd8b5;
diff --git a/web_src/css/themes/theme-gitea-light-tritanopia.css b/web_src/css/themes/theme-gitea-light-tritanopia.css
index 15f3019be4..fc283b5080 100644
--- a/web_src/css/themes/theme-gitea-light-tritanopia.css
+++ b/web_src/css/themes/theme-gitea-light-tritanopia.css
@@ -8,7 +8,7 @@ gitea-theme-meta-info {
 
 /* blue/yellow colorblind-friendly colors */
 :root {
-  --color-diff-added-fg: #2185d0;
+  --color-diff-added-fg: #0860cc;
   --color-diff-added-linenum-bg: #b6e3ff;
   --color-diff-added-row-bg: #ddf4ff;
   --color-diff-added-word-bg: #b6e3ff;
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index fceb7d31f3..4dd8cece81 100644
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -163,14 +163,14 @@ gitea-theme-meta-info {
   --color-grey-light: #7c838a;
   --color-gold: #a1882b;
   --color-white: #ffffff;
-  --color-diff-added-fg: #21ba45;
+  --color-diff-added-fg: #177231;
   --color-diff-added-linenum-bg: #d1f8d9;
   --color-diff-added-row-bg: #e6ffed;
   --color-diff-added-row-border: #e6ffed;
   --color-diff-added-word-bg: #acf2bd;
   --color-diff-moved-row-bg: #f1f8d1;
   --color-diff-moved-row-border: #d0e27f;
-  --color-diff-removed-fg: #db2828;
+  --color-diff-removed-fg: #c61f2b;
   --color-diff-removed-linenum-bg: #ffcecb;
   --color-diff-removed-row-bg: #ffeef0;
   --color-diff-removed-row-border: #f1c0c0;