[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 go-gitea#986

(cherry picked from commit dcdb4a372da814eda27065c58d03100f0589f0a7)

Author: jpkhawam

modules/setting/ui.go

@@ -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:"},

services/forms/user_form.go

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

web_src/css/themes/theme-forgejo-auto-deuteranopia-protanopia.css

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

web_src/css/themes/theme-forgejo-auto-tritanopia.css

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

web_src/css/themes/theme-forgejo-dark-deuteranopia-protanopia.css

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

web_src/css/themes/theme-forgejo-dark-tritanopia.css

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

web_src/css/themes/theme-forgejo-light-deuteranopia-protanopia.css

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

web_src/css/themes/theme-forgejo-light-tritanopia.css

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