mirror of
1
Fork 0

[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
This commit is contained in:
JP 2023-11-08 03:53:37 +02:00 committed by Gusted
parent c87903a0cc
commit dcdb4a372d
No known key found for this signature in database
GPG Key ID: FD821B732837125F
8 changed files with 50 additions and 2 deletions

View File

@ -82,7 +82,7 @@ var UI = struct {
ReactionMaxUserNum: 10, ReactionMaxUserNum: 10,
MaxDisplayFileSize: 8388608, MaxDisplayFileSize: 8388608,
DefaultTheme: `forgejo-auto`, 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`}, Reactions: []string{`+1`, `-1`, `laugh`, `hooray`, `confused`, `heart`, `rocket`, `eyes`},
CustomEmojis: []string{`git`, `gitea`, `codeberg`, `gitlab`, `github`, `gogs`, `forgejo`}, 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:"}, 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 // UpdateThemeForm form for updating a users' theme
type UpdateThemeForm struct { type UpdateThemeForm struct {
Theme string `binding:"Required;MaxSize(30)"` Theme string `binding:"Required;MaxSize(64)"`
} }
// Validate validates the field // 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;
}