Rethink themes implementation to allow for easier colorblind variants #245

jeanpaul commented 2024年11月24日 21:09:06 +01:00

Description

Colorblind variants of the forgejo themes were introduced in forgejo/forgejo#1746 and forgejo/forgejo#6059.

As there are 2 types of colorblindness to account for (Deuteranopia/Protanopia for red & green colors, Tritanopia for blue & yellow colors), each theme requires 2 variants. In addition, a theme was needed for each light, dark and auto theme, resulting in 6 new selections in total.

This poses two problems:

1. There are too many themes to select from due to the *-auto-* themes
2. It isn't preferred to implement colorblind variants of other themes (e.g. gitea-*) to not clutter the UI/UX further for users that don't need these themes.

After a long discussion that can be found in forgejo/forgejo#1746, some solutions were proposed. Please add any other possible/feasible solutions you can think of below as we are brainstorming together.

Suggested Solutions

Allow user to set preferred light/dark theme separately

Allowing the user to set each theme independently of the other would remove the need for all *-auto-* themes, significantly reducing the number of options presented to the user.

Pros:

1. This is a popular feature request that will benefit users in general, regardless of need for colorblind themes

Cons:

1. Four selections/variants still have to be added for each theme manually

Configuring colorblind variants using accessibility add-ons

@Daniel proposed the following:

A potential solution for the combinatoric explosion of themes could be to allow configuring a base theme and an add-on theme, which is just a CSS file that is included after the base theme CSS. Then we could have the normal forgejo-[light|dark|auto] and gitea-[light|dark|auto] themes as base themes, and the following addon themes:

• None (default)
• light-deuteranopia-protanopia
• light-tritanopia
• dark-deuteranopia-protanopia
• dark-tritanopia

And each add-on themes would look like the following

:root {
 --color-diff-removed-word-bg: #c8c850;
 --color-diff-removed-row-border: #c8c850;
 --color-diff-removed-row-bg: #ffecc4;
 --color-diff-added-word-bg: #b8c0ff;
 --color-diff-added-row-border: #b8c0ff;
 --color-diff-added-row-bg: #e0e0ff;
 --color-code-bg: #ffffff;
}

Pros:

1. This could be presented via a nice UX to users, presenting an option under the themes section to "Adjust theme for colorblindness" and choosing one of two options:
   • deuteranopia-protanopia
   • tritanopia
     This would not clutter the UI for users that don't need these themes, as well as allowing colorblind users to quickly change between themes without worrying of having to select the right variant
2. This would technically work for any and all themes in general, including any themes that forks ship.
3. @fnetX: What about [using this as] "accessible theme add-ons", [...] it would allow adding CSS snippets that do different things, such as "High contrast", "more spacing" etc.

Cons:

1. Uncertainty of the technical complexity needed to achieve this
2. A rather major change to the platform in general

## Description Colorblind variants of the forgejo themes were introduced in https://codeberg.org/forgejo/forgejo/pulls/1746 and https://codeberg.org/forgejo/forgejo/pulls/6059. As there are 2 types of colorblindness to account for (Deuteranopia/Protanopia for red & green colors, Tritanopia for blue & yellow colors), each theme requires 2 variants. In addition, a theme was needed for each `light`, `dark` and `auto` theme, resulting in 6 new selections in total. This poses two problems: 1. There are too many themes to select from due to the `*-auto-*` themes 2. It isn't preferred to implement colorblind variants of other themes (e.g. `gitea-*`) to not clutter the UI/UX further for users that don't need these themes. After a long discussion that can be found in https://codeberg.org/forgejo/forgejo/pulls/1746, some solutions were proposed. Please add any other possible/feasible solutions you can think of below as we are brainstorming together. ## Suggested Solutions ### Allow user to set preferred light/dark theme separately Allowing the user to set each theme independently of the other would remove the need for all `*-auto-*` themes, significantly reducing the number of options presented to the user. Pros: 1. This is a popular feature request that will benefit users in general, regardless of need for colorblind themes Cons: 1. Four selections/variants still have to be added for each theme manually ### Configuring colorblind variants using accessibility add-ons [@Daniel](https://codeberg.org/DanielGibson) proposed the following: > A potential solution for the combinatoric explosion of themes could be to allow configuring a base theme and an add-on theme, which is just a CSS file that is included after the base theme CSS. Then we could have the normal forgejo-[light|dark|auto] and gitea-[light|dark|auto] themes as base themes, and the following addon themes: - None (default) - light-deuteranopia-protanopia - light-tritanopia - dark-deuteranopia-protanopia - dark-tritanopia And each add-on themes would look like the following ```css :root { --color-diff-removed-word-bg: #c8c850; --color-diff-removed-row-border: #c8c850; --color-diff-removed-row-bg: #ffecc4; --color-diff-added-word-bg: #b8c0ff; --color-diff-added-row-border: #b8c0ff; --color-diff-added-row-bg: #e0e0ff; --color-code-bg: #ffffff; } ``` Pros: 1. This could be presented via a nice UX to users, presenting an option under the themes section to "Adjust theme for colorblindness" and choosing one of two options: - deuteranopia-protanopia - tritanopia This would not clutter the UI for users that don't need these themes, as well as allowing colorblind users to quickly change between themes without worrying of having to select the right variant 2. This would technically work for any and all themes in general, including any themes that forks ship. 3. @fnetX: What about [using this as] "accessible theme add-ons", [...] it would allow adding CSS snippets that do different things, such as "High contrast", "more spacing" etc. Cons: 1. Uncertainty of the technical complexity needed to achieve this 2. A rather major change to the platform in general

DanielGibson commented 2024年11月24日 21:58:45 +01:00

Thanks for creating this post! :)

Allowing the user to set each theme independently of the other would remove the need for all -auto- themes, significantly reducing the number of options presented to the user.

The user already is allowed to set each theme independently. The light/dark themes can be selected.
It's just that the -auto- themes exist additionally, even though IMHO having a theme that automatically selects the dark/light version only makes sense for the default theme (so it looks good if the user hasn't selected a theme themselves) - once the user selects a theme, they will most probably explicitly select a light or dark version (instead of auto) anyway.
So my idea was to only keep the forgejo-auto theme and remove all other -auto- themes (gitea-auto, forgejo-auto-deuteranopia-protanopia, forgejo-auto-tritanopia - and when adding colorblind versions of the gitea theme, that's two more -auto- themes that don't have to be added).
See forgejo/forgejo#1746 (comment) for my full post on this

Thanks for creating this post! :) > Allowing the user to set each theme independently of the other would remove the need for all *-auto-* themes, significantly reducing the number of options presented to the user. The user already *is* allowed to set each theme independently. The light/dark themes can be selected. It's just that the -auto- themes exist **additionally**, even though IMHO having a theme that automatically selects the dark/light version only makes sense for the default theme (so it looks good if the user hasn't selected a theme themselves) - once the user selects a theme, they will most probably explicitly select a light or dark version (instead of auto) anyway. So my idea was to only keep the `forgejo-auto` theme and remove all other `-auto-` themes (gitea-auto, forgejo-auto-deuteranopia-protanopia, forgejo-auto-tritanopia - and when adding colorblind versions of the gitea theme, that's two more -auto- themes that don't have to be added). See https://codeberg.org/forgejo/forgejo/pulls/1746#issuecomment-2466665 for my full post on this

jeanpaul commented 2024年11月24日 22:42:29 +01:00

I actually meant 'independently' in the sense that I can select

• When my browser is in light mode: switch to theme A
• When my browser is in dark mode: switch to theme B

Check out how GitHub approaches this:
Github day and night theme selectors

This allows me to

• e.g. set 'Dark Default' for night theme for example, and 'Dark Dimmed' for the day theme.
• I can set a light theme for night and dark theme for day if for whatever reason I want that.
• I can select a colorblind theme for the night theme, but keep the default for day theme.

This would be like choosing gitea-light for my light theme and forgejo-dark for my dark theme.

once the user selects a theme, they will most probably explicitly select a light or dark version (instead of auto) anyway.

I don't agree - at least not for my personal preference. I find it really essential for my website to switch themes when I switch my OS theme.

I actually meant 'independently' in the sense that I can select - When my browser is in light mode: switch to theme A - When my browser is in dark mode: switch to theme B Check out how GitHub approaches this:  This allows me to - e.g. set 'Dark Default' for night theme for example, and 'Dark Dimmed' for the day theme. - I can set a light theme for night and dark theme for day if for whatever reason I want that. - I can select a colorblind theme for the night theme, but keep the default for day theme. This would be like choosing gitea-light for my light theme and forgejo-dark for my dark theme. > once the user selects a theme, they will most probably explicitly select a light or dark version (instead of auto) anyway. I don't agree - at least not for my personal preference. I find it really essential for my website to switch themes when I switch my OS theme.

fnetX commented 2024年11月24日 22:45:41 +01:00

What about "accessible theme add-ons". It would be weird to have both colorblind variants enabled at the same time, but it would allow adding CSS snippets that do different things, such as "High contrast", "more spacing" etc.

What about "accessible theme add-ons". It would be weird to have both colorblind variants enabled at the same time, but it would allow adding CSS snippets that do different things, such as "High contrast", "more spacing" etc.

jeanpaul commented 2024年11月24日 22:49:07 +01:00

it would allow adding CSS snippets that do different things, such as "High contrast", "more spacing" etc

That's a really good idea! I'll add it to the list of pros for that suggestion

> it would allow adding CSS snippets that do different things, such as "High contrast", "more spacing" etc That's a really good idea! I'll add it to the list of pros for that suggestion

DanielGibson commented 2024年11月25日 00:28:50 +01:00

This would be like choosing gitea-light for my light theme and forgejo-dark for my dark theme.

ah ok, I misunderstood, sorry!

I find it really essential for my website to switch themes when I switch my OS theme.

I didn't know people regularly switch their OS theme - good to know this is a thing! :)
Out of interest: When do you do that? Night vs day?

What about "accessible theme add-ons". It would be weird to have both colorblind variants enabled at the same time, but it would allow adding CSS snippets that do different things, such as "High contrast", "more spacing" etc.

That would be even more flexible than my suggestion - I like it!
I guess the very best solution would be to allow the user to also specify their own additional CSS, though I don't know if that has any negative performance or security implications.

> This would be like choosing gitea-light for my light theme and forgejo-dark for my dark theme. ah ok, I misunderstood, sorry! > I find it really essential for my website to switch themes when I switch my OS theme. I didn't know people regularly switch their OS theme - good to know this is a thing! :) Out of interest: When do you do that? Night vs day? > What about "accessible theme add-ons". It would be weird to have both colorblind variants enabled at the same time, but it would allow adding CSS snippets that do different things, such as "High contrast", "more spacing" etc. That would be even more flexible than my suggestion - I like it! I guess the very best solution would be to allow the user to **also** specify their *own* additional CSS, though I don't know if that has any negative performance or security implications.

jeanpaul commented 2024年11月25日 00:44:48 +01:00

Out of interest: When do you do that? Night vs day?

I actually use Fedora Linux with the GNOME desktop environment, and I use the Night theme switcher extension to switch my OS theme based on time of day. I find it helps me compartmentalize better the different parts of my day to visually have a difference.

The more important reason though is that I use a laptop that doesn't have a very bright screen, so if I'm working in a coffeeshop or outdoors I'll need the light theme in order to see well. GNOME has a handy quick setting (like Android) to switch themes so I do click it very often as well.

MacOS also has an option for an "auto" theme where it'll set it to light during the day and vice versa.

I guess for desktops it's not common, but for laptops, at least from the people I know, it's extremely common.

> Out of interest: When do you do that? Night vs day? I actually use Fedora Linux with the GNOME desktop environment, and I use the [Night theme switcher extension](https://extensions.gnome.org/extension/2236/night-theme-switcher/) to switch my OS theme based on time of day. I find it helps me compartmentalize better the different parts of my day to visually have a difference. The more important reason though is that I use a laptop that doesn't have a very bright screen, so if I'm working in a coffeeshop or outdoors I'll need the light theme in order to see well. GNOME has a handy quick setting (like Android) to switch themes so I do click it very often as well. MacOS also has an option for an "auto" theme where it'll set it to light during the day and vice versa. I guess for desktops it's not common, but for laptops, at least from the people I know, it's extremely common.