From 56c8f98e4c3cab88e3646acda658c6e28a08b0c9 Mon Sep 17 00:00:00 2001 From: JP Date: Wed, 8 Nov 2023 03:53:37 +0200 Subject: [PATCH] [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) --- modules/setting/ui.go | 2 +- services/forms/user_form.go | 2 +- .../theme-forgejo-auto-deuteranopia-protanopia.css | 2 ++ web_src/css/themes/theme-forgejo-auto-tritanopia.css | 2 ++ .../theme-forgejo-dark-deuteranopia-protanopia.css | 11 +++++++++++ web_src/css/themes/theme-forgejo-dark-tritanopia.css | 11 +++++++++++ .../theme-forgejo-light-deuteranopia-protanopia.css | 11 +++++++++++ web_src/css/themes/theme-forgejo-light-tritanopia.css | 11 +++++++++++ 8 files changed, 50 insertions(+), 2 deletions(-) create mode 100644 web_src/css/themes/theme-forgejo-auto-deuteranopia-protanopia.css create mode 100644 web_src/css/themes/theme-forgejo-auto-tritanopia.css create mode 100644 web_src/css/themes/theme-forgejo-dark-deuteranopia-protanopia.css create mode 100644 web_src/css/themes/theme-forgejo-dark-tritanopia.css create mode 100644 web_src/css/themes/theme-forgejo-light-deuteranopia-protanopia.css create mode 100644 web_src/css/themes/theme-forgejo-light-tritanopia.css diff --git a/modules/setting/ui.go b/modules/setting/ui.go index 7056f96ad4..02a213d478 100644 --- a/modules/setting/ui.go +++ b/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:"}, diff --git a/services/forms/user_form.go b/services/forms/user_form.go index cbab274238..fd4649025f 100644 --- a/services/forms/user_form.go +++ b/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 diff --git a/web_src/css/themes/theme-forgejo-auto-deuteranopia-protanopia.css b/web_src/css/themes/theme-forgejo-auto-deuteranopia-protanopia.css new file mode 100644 index 0000000000..5f97fa377c --- /dev/null +++ b/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); diff --git a/web_src/css/themes/theme-forgejo-auto-tritanopia.css b/web_src/css/themes/theme-forgejo-auto-tritanopia.css new file mode 100644 index 0000000000..256a7038a2 --- /dev/null +++ b/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); diff --git a/web_src/css/themes/theme-forgejo-dark-deuteranopia-protanopia.css b/web_src/css/themes/theme-forgejo-dark-deuteranopia-protanopia.css new file mode 100644 index 0000000000..95601bf12d --- /dev/null +++ b/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; +} diff --git a/web_src/css/themes/theme-forgejo-dark-tritanopia.css b/web_src/css/themes/theme-forgejo-dark-tritanopia.css new file mode 100644 index 0000000000..adafbee0af --- /dev/null +++ b/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; +} diff --git a/web_src/css/themes/theme-forgejo-light-deuteranopia-protanopia.css b/web_src/css/themes/theme-forgejo-light-deuteranopia-protanopia.css new file mode 100644 index 0000000000..918a143ad7 --- /dev/null +++ b/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; +} diff --git a/web_src/css/themes/theme-forgejo-light-tritanopia.css b/web_src/css/themes/theme-forgejo-light-tritanopia.css new file mode 100644 index 0000000000..3bf7694a06 --- /dev/null +++ b/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; +}