[THEME] Add colorblind theme variants

This PR adds colorblind theme variants of the forgejo themes. I duplicated the forjego light and dark themes and only changed the lines related to diff colors for added and removed rows/words.

I am not a designer, and I am also colorblind, so better suggestions of colors are most welcome. However, this is a good start as I can at least personally see the colors now. I got the colors for the dark theme from the GitHub diff colors, the light ones I couldn't get from GitHub as they use white as a plain background, which Forgejo's theme doesn't, so they were decided on after a bit of random testing.

Resolves #986

(cherry picked from commit dcdb4a372da814eda27065c58d03100f0589f0a7)
This commit is contained in:
JP 2023-11-08 03:53:37 +02:00 committed by Earl Warren
parent 88171e0030
commit 56c8f98e4c
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
8 changed files with 50 additions and 2 deletions

View file

@ -82,7 +82,7 @@ var UI = struct {
ReactionMaxUserNum: 10,
MaxDisplayFileSize: 8388608,
DefaultTheme: `forgejo-auto`,
Themes: []string{`forgejo-auto`, `forgejo-light`, `forgejo-dark`, `gitea-auto`, `gitea-light`, `gitea-dark`},
Themes: []string{`forgejo-auto`, `forgejo-light`, `forgejo-dark`, `gitea-auto`, `gitea-light`, `gitea-dark`, `forgejo-auto-deuteranopia-protanopia`, `forgejo-light-deuteranopia-protanopia`, `forgejo-dark-deuteranopia-protanopia`, `forgejo-auto-tritanopia`, `forgejo-light-tritanopia`, `forgejo-dark-tritanopia`},
Reactions: []string{`+1`, `-1`, `laugh`, `hooray`, `confused`, `heart`, `rocket`, `eyes`},
CustomEmojis: []string{`git`, `gitea`, `codeberg`, `gitlab`, `github`, `gogs`, `forgejo`},
CustomEmojisMap: map[string]string{"git": ":git:", "gitea": ":gitea:", "codeberg": ":codeberg:", "gitlab": ":gitlab:", "github": ":github:", "gogs": ":gogs:", "forgejo": ":forgejo:"},

View file

@ -277,7 +277,7 @@ func (f *AddEmailForm) Validate(req *http.Request, errs binding.Errors) binding.
// UpdateThemeForm form for updating a users' theme
type UpdateThemeForm struct {
Theme string `binding:"Required;MaxSize(30)"`
Theme string `binding:"Required;MaxSize(64)"`
}
// Validate validates the field

View file

@ -0,0 +1,2 @@
@import "theme-forgejo-light-deuteranopia-protanopia.css";
@import "theme-forgejo-dark-deuteranopia-protanopia.css" (prefers-color-scheme: dark);

View file

@ -0,0 +1,2 @@
@import "theme-forgejo-light-tritanopia.css";
@import "theme-forgejo-dark-tritanopia.css" (prefers-color-scheme: dark);

View file

@ -0,0 +1,11 @@
@import "./theme-forgejo-dark.css";
:root {
--color-diff-removed-word-bg: #693F17;
--color-diff-removed-row-border: #693F17;
--color-diff-removed-row-bg: #221B17;
--color-diff-added-word-bg: #214D88;
--color-diff-added-row-border: #214D88;
--color-diff-added-row-bg: #13233A;
--color-code-bg: #0D1117;
}

View file

@ -0,0 +1,11 @@
@import "./theme-forgejo-dark.css";
:root {
--color-diff-removed-word-bg: #792E2E;
--color-diff-removed-row-border: #792E2E;
--color-diff-removed-row-bg: #25171C;
--color-diff-added-word-bg: #214D88;
--color-diff-added-row-border: #214D88;
--color-diff-added-row-bg: #13233A;
--color-code-bg: #0D1117;
}

View file

@ -0,0 +1,11 @@
@import "./theme-forgejo-light.css";
:root {
--color-diff-removed-word-bg: #FFDBB0;
--color-diff-removed-row-border: #FFDBB0;
--color-diff-removed-row-bg: #FFFAF3;
--color-diff-added-word-bg: #B1DBFF;
--color-diff-added-row-border: #B1DBFF;
--color-diff-added-row-bg: #EEF9FF;
--color-code-bg: #FFFFFF;
}

View file

@ -0,0 +1,11 @@
@import "./theme-forgejo-light.css";
:root {
--color-diff-removed-word-bg: #FFD0CE;
--color-diff-removed-row-border: #FFD0CE;
--color-diff-removed-row-bg: #FFF5F4;
--color-diff-added-word-bg: #B1DBFF;
--color-diff-added-row-border: #EEF9FF;
--color-diff-added-row-bg: #EEF9FF;
--color-code-bg: #FFFFFF;
}