sdgoij/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-01-16 17:10:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rename CSS variables and improve colorblind themes (#36353)

Browse Source 
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:

<img width="1305" height="303" alt="image"
src="https://github.com/user-attachments/assets/3d131ab7-99ab-4b03-93ab-715ce0030b08"
/>


The blue coloring also matched GitHub:

<img width="1313" height="393" alt="image"
src="https://github.com/user-attachments/assets/f97e35b2-4ff4-49b0-841f-ffd49a02e03d"
/>

---------

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
silverwind
2026-01-15 07:18:33 +01:00
committed by GitHub
parent 8e9fb4d14c
commit 915a2cd86f
8 changed files with 34 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/repo/diff/stats.tmpl
View File

@@ -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-prompt-add-fg">+{{.Addition}}</span>{{end}}
{{if .Deletion}}<span class="tw-text-diff-prompt-del-fg">-{{.Deletion}}</span>{{end}}
{{if .Addition}}<span class="tw-text-diff-added-fg">+{{.Addition}}</span>{{end}}
{{if .Deletion}}<span class="tw-text-diff-removed-fg">-{{.Deletion}}</span>{{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 */}}

4
web_src/css/repo.css
View File

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

15
web_src/css/themes/theme-gitea-dark-protanopia-deuteranopia.css
View File

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

10
web_src/css/themes/theme-gitea-dark-tritanopia.css
View File

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

4
web_src/css/themes/theme-gitea-dark.css
View File

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

15
web_src/css/themes/theme-gitea-light-protanopia-deuteranopia.css
View File

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

10
web_src/css/themes/theme-gitea-light-tritanopia.css
View File

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

4
web_src/css/themes/theme-gitea-light.css
View File

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