Update colors of codeberg-dark for better readability and less strain #42

Fixes Codeberg/Community#751

I attached before and after images to show how it's supposed to look like. I edited the comments in the .less file to try to document my motivations.

I didn't test this commit on a running Gitea. However, I opened the "Inspect" browser tab to test-edit the actual CSS var definitions (not as singled out element overrides), and double-checked the old values match those in the file I edited. Therefore, I'm hoping there's a chance I did this correctly anyway.

CC @mray IIRC you created the codeberg-dark theme.

CC @mray IIRC you created the codeberg-dark theme.

No. I didn't create anything. I don't code.

Sorry for the ping then.

Judging from the screenshot I like the change

Hey random person, not associated with the codeberg project, here that cares a lot about color contrast. Hope it is okay if I share my opinion.

I like that the text for folders and the text in the readme is easier to read on the after shot. :)
But it's way harder for me now to see which tab is opened (<> Code in this case).
The contrast ratio between the activated tab and the surrounding area is 1.08, which is really low.

In general, if you want to include as many people as possible, then please use a contrast checker: https://contrast-ratio.com/
Link to the WCAG requirements regarding color contrast: https://www.w3.org/TR/WCAG/#contrast-minimum

Hm yeah, you're right, that's bad. Maybe it would make sense then to only brighten the links and just leave out the other color change?

Because for tab contrast, it kind of requires the tab background to be dark but then the rest of the page background can't be brighter - not without making things disjoint. I can't think of a good way right now, at least.

Or does someone have some idea what could work and still look nice?

After some pondering, I've had this idea:

--color-navbar #1b2c40; /* brightened from --color-secondary for tab contrast */
--color-primary: #4793cc; /* from brand palette, brightened for readability */
--color-secondary-light-3: #0c1a24; /* 75% shade from dark-1, then brightened for less eye strain */

As you can see, I also brightened the navbar a little to make up for the contrast loss. See attached images. In overall, it gives the theme a slightly brighter but still dark, and just less harsh note I think.

Compare this also to the arc-green theme available on Codeberg, that similarly has a dark but more mellow look to it.

I'm sure not everyone will like these changes, but I personally think they make it a bit easier to look at and read.

See attached screenshots! (Created by changing the CSS vars as specified in the Firefox Inspector.)

Feel free to add your suggested changes. I'll try locally to confirm that this actually works ...

I am fiddling with Gitea CSS right now myself, and every change has unwanted side effects everywhere – but I hope it works better for you :D

Yeah, ripple effects are difficult, tried to only do minor tweaks and still, see what @fap had found 😂 (And e.g. the org page contrast is lowered with the newest changes here but it was really high before, so looks still okay to me.)

To me, the contrast is too low and I don't like gray color.

Could you be more specific what area you think is too low contrast? Too much contrast in just some spots also makes it more straining on the eyes, I think. Most areas should be unchanged in contrast due to the boxes around most things. What do you mean by "gray color"?

For what it's worth regarding liking or not liking it, the change wasn't really motivated by making it look prettier but readability in some spots like the file list.

Please be patient and wait. I will send detailed feedbacks few days later, maybe this weekend.

Sorry for making you waiting too long! OK! Time for feedbacks!

1. It should be light blue instead of light gray.

• Light blue: image
• Gray: image
  
  

2. I'm okay with the new border color around README.md. The new border should have a little darker color. I still prefer the original one but I can live with it.

• The new border: image
• The original border: image
  
  

3. The links are too light for me. The links should be darker.

• The original links: image
• The new links: image

AND MOST IMPORTANTLY, there should be an option to use the old theme (maybe under the name 'high contrast mode')!

I could be wrong but I think changing the top bar to a lighter blue will lower the contrast again even if it looks more prominent, same for lightening the background (affects e.g. group pages). So I personally wouldn't recommend these changes. But lightening the links even further as you suggest (beyond what this PR already does) will probably look a bit odd without these other two ideas, right? So I'm not sure what to make of it as a whole. However, I sure shouldn't be the person to make the final call anyway.

I updated the words to be more clear. Can you re-read it, again? Codeberg/gitea#42 (comment)

changing the top bar to a lighter blue will lower the contrast again

But I find light blue has higher contrast than gray.

lightening the background

I mean that the background should should be little darker.

I cant use that tool right now to check since I'm traveling, but I find in some ways it has less. Desaturated stuff like the links on more saturated bgs (like your tweak) can kinda get drowned, if that makes sense. As a side note, better if you always post all the hex colors of your suggestions, screenshots alone might deceive due to color profiles.

Light nav links on lighter bg should mean less contrast, shouldn't it? Also I just realized you suggested darkening the links again, not further lightening. In overall it just seems to undo the changes to some extent. So I'm not fully sure I see the point 👀

I agree with @ell1e, I couldn't check the proposition of @HexagonCDN because the images are very tiny and difussed.

I just came across an interesting unoffical theme for Codeberg. It might be useful for researching.

Catppuccin is a community-driven pastel theme that aims to be the middle ground between low and high contrast themes.

https://github.com/catppuccin/codeberg

I'm sorry, I haven't followed this PR as much as I would love. Is there anything left to do? Otherwise I would love to merge the PR. @ell1e @fsologureng

Is there anything left to do?

IMHO only if someone wants to sit down and do a proper overhaul (for which I lack the time). There have been multiple suggestions for further improvements but all of them I think would likely cause further interactions and needed changes to work in. Some people also suggested maybe there are more stylish ways to do what I did, which is simply to make the file list slightly more readable. But I really just wanted to focus on the most minimal changes needed to achieve that, and I'm sure someone who wanted to do a larger overhaul could do a more stylish job.

TL;DR: can't decide for others if the change is worth it. But if nobody wants to do a larger overhaul, might be appropripate to decide now (whether to merge or reject)

For a proper overhaul, I would prefer start a new issue. So it seems like there are no big objections to the current PR, @fnetx could you do some magic and merge this?

In favour of merging this, then considering to add much more themes.

IMHO

What does IMHO means?

In favour of merging this, then considering to add much more themes.

@fnetX Will the old theme still available?

This PR is an improvement, so I'm in favor of merging it.
There are many other themes for contrast still, but we need a better approach than cherry picking, because to change something for the better, is to make it worse somewhere else.
I'm looking for a way that any theme definition can respect contrast levels to meet AA or AAA, looking at the relationship between colors, but it's a big WIP.