From 915a2cd86fe6c1072302286baf59e6fb199c59bf Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 15 Jan 2026 07:18:33 +0100 Subject: [PATCH] Rename CSS variables and improve colorblind themes (#36353) Followup https://github.com/go-gitea/gitea/pull/36215, rename the variables for consistency with existing vars and change green to value of `--color-blue` in the relevant color blind themes: image The blue coloring also matched GitHub: image --------- Co-authored-by: Lunny Xiao --- templates/repo/diff/stats.tmpl | 4 ++-- web_src/css/repo.css | 4 ++-- .../theme-gitea-dark-protanopia-deuteranopia.css | 15 ++++++++------- .../css/themes/theme-gitea-dark-tritanopia.css | 10 +++++----- web_src/css/themes/theme-gitea-dark.css | 4 ++-- .../theme-gitea-light-protanopia-deuteranopia.css | 15 ++++++++------- .../css/themes/theme-gitea-light-tritanopia.css | 10 +++++----- web_src/css/themes/theme-gitea-light.css | 4 ++-- 8 files changed, 34 insertions(+), 32 deletions(-) diff --git a/templates/repo/diff/stats.tmpl b/templates/repo/diff/stats.tmpl index 31797cd970..09ce9b3478 100644 --- a/templates/repo/diff/stats.tmpl +++ b/templates/repo/diff/stats.tmpl @@ -6,8 +6,8 @@ {{if or .Addition .Deletion}}
- {{if .Addition}}+{{.Addition}}{{end}} - {{if .Deletion}}-{{.Deletion}}{{end}} + {{if .Addition}}+{{.Addition}}{{end}} + {{if .Deletion}}-{{.Deletion}}{{end}} {{/* if the denominator is zero, then the float result is "width: NaNpx", as before, it just works */}} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 4de1f3ccdf..abb891cf9b 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1752,13 +1752,13 @@ tbody.commit-list { .diff-stats-bar { display: inline-block; - background-color: var(--color-diff-prompt-del-fg); /* the background is used as "text foreground color" */ + background-color: var(--color-diff-removed-fg); /* the background is used as "text foreground color" */ height: 12px; width: 44px; } .diff-stats-bar .diff-stats-add-bar { - background-color: var(--color-diff-prompt-add-fg); + background-color: var(--color-diff-added-fg); height: 100%; } diff --git a/web_src/css/themes/theme-gitea-dark-protanopia-deuteranopia.css b/web_src/css/themes/theme-gitea-dark-protanopia-deuteranopia.css index 9f2b6ce73f..01f53e3908 100644 --- a/web_src/css/themes/theme-gitea-dark-protanopia-deuteranopia.css +++ b/web_src/css/themes/theme-gitea-dark-protanopia-deuteranopia.css @@ -7,12 +7,13 @@ gitea-theme-meta-info { } /* red/green colorblind-friendly colors */ -/* from GitHub: --diffBlob-addition-*, --diffBlob-deletion-*, etc */ :root { - --color-diff-added-linenum-bg: #1979fd46; - --color-diff-added-row-bg: #1979fd20; - --color-diff-added-word-bg: #1979fd66; - --color-diff-removed-linenum-bg: #c8622146; - --color-diff-removed-row-bg: #c8622120; - --color-diff-removed-word-bg: #c8622166; + --color-diff-added-fg: #58a6ff; + --color-diff-added-linenum-bg: #243d5d; + --color-diff-added-row-bg: #132339; + --color-diff-added-word-bg: #214d87; + --color-diff-removed-fg: #f0883e; + --color-diff-removed-linenum-bg: #5b361c; + --color-diff-removed-row-bg: #3c2419; + --color-diff-removed-word-bg: #824e1f; } diff --git a/web_src/css/themes/theme-gitea-dark-tritanopia.css b/web_src/css/themes/theme-gitea-dark-tritanopia.css index 1dbd9967dd..dd4e0502c4 100644 --- a/web_src/css/themes/theme-gitea-dark-tritanopia.css +++ b/web_src/css/themes/theme-gitea-dark-tritanopia.css @@ -1,4 +1,4 @@ -@import "./theme-gitea-dark-protanopia-deuteranopia.css"; +@import "./theme-gitea-dark.css"; gitea-theme-meta-info { --theme-display-name: "Dark"; @@ -7,9 +7,9 @@ gitea-theme-meta-info { } /* blue/yellow colorblind-friendly colors */ -/* from GitHub: blue yellow blindness is based on red green blindness, and --diffBlob-deletion-* restored to the normal theme color */ :root { - --color-diff-removed-linenum-bg: #482121; - --color-diff-removed-row-bg: #301e1e; - --color-diff-removed-word-bg: #6f3333; + --color-diff-added-fg: #58a6ff; + --color-diff-added-linenum-bg: #243d5d; + --color-diff-added-row-bg: #132339; + --color-diff-added-word-bg: #214d87; } diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index 7998f54990..f58c222c9a 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -148,18 +148,18 @@ gitea-theme-meta-info { --color-grey-light: #818f9e; --color-gold: #b1983b; --color-white: #ffffff; + --color-diff-added-fg: #87ab63; --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-linenum-bg: #482121; --color-diff-removed-row-bg: #301e1e; --color-diff-removed-row-border: #634343; --color-diff-removed-word-bg: #6f3333; - --color-diff-prompt-add-fg: #87ab63; - --color-diff-prompt-del-fg: #cc4848; --color-diff-inactive: #22282d; --color-error-border: #a04141; --color-error-bg: #522; 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 421085a2a7..6350cdd156 100644 --- a/web_src/css/themes/theme-gitea-light-protanopia-deuteranopia.css +++ b/web_src/css/themes/theme-gitea-light-protanopia-deuteranopia.css @@ -7,12 +7,13 @@ gitea-theme-meta-info { } /* red/green colorblind-friendly colors */ -/* from GitHub: --diffBlob-addition-*, --diffBlob-deletion-*, etc */ :root { - --color-diff-added-linenum-bg: #54aeff4d; - --color-diff-added-row-bg: #ddf4ff80; - --color-diff-added-word-bg: #54aeff66; - --color-diff-removed-linenum-bg: #ffb77c4d; - --color-diff-removed-row-bg: #fff1e580; - --color-diff-removed-word-bg: #ffb77c80; + --color-diff-added-fg: #2185d0; + --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-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 a50fd9c1a4..15f3019be4 100644 --- a/web_src/css/themes/theme-gitea-light-tritanopia.css +++ b/web_src/css/themes/theme-gitea-light-tritanopia.css @@ -1,4 +1,4 @@ -@import "./theme-gitea-light-protanopia-deuteranopia.css"; +@import "./theme-gitea-light.css"; gitea-theme-meta-info { --theme-display-name: "Light"; @@ -7,9 +7,9 @@ gitea-theme-meta-info { } /* blue/yellow colorblind-friendly colors */ -/* from GitHub: blue yellow blindness is based on red green blindness, and --diffBlob-deletion-* restored to the normal theme color */ :root { - --color-diff-removed-linenum-bg: #ffcecb; - --color-diff-removed-row-bg: #ffeef0; - --color-diff-removed-word-bg: #fdb8c0; + --color-diff-added-fg: #2185d0; + --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 d169492041..1969b52ed1 100644 --- a/web_src/css/themes/theme-gitea-light.css +++ b/web_src/css/themes/theme-gitea-light.css @@ -148,18 +148,18 @@ gitea-theme-meta-info { --color-grey-light: #7c838a; --color-gold: #a1882b; --color-white: #ffffff; + --color-diff-added-fg: #21ba45; --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-linenum-bg: #ffcecb; --color-diff-removed-row-bg: #ffeef0; --color-diff-removed-row-border: #f1c0c0; --color-diff-removed-word-bg: #fdb8c0; - --color-diff-prompt-add-fg: #21ba45; - --color-diff-prompt-del-fg: #db2828; --color-diff-inactive: #f0f2f4; --color-error-border: #e0b4b4; --color-error-bg: #fff6f6;