mray commented 2022年03月25日 00:25:38 +01:00

The current dark theme seems to be a quick adaption that could need many more refinements, here are the three most important issues I spotted that could need fixing:

• 1. change header colors, too (currently not affected)

• 2. tone down primary and secondary colors

• 3. use colors from the palette for key interactions

---

1.

I added a proposal for the menu header colors in the overview below.
image

2.

I propose colors like #061c2a and #050c10 to be used as primary colors to tone down the relative strong saturation and contrast of the main colors. As a comparison you can see github(gh) and gitlab(gl) main colors in dark mode, and codeberg
image

---

3.

Key buttons still apply colors from the previous theme, instead of the codeberg palette.
image

overview

image

The current dark theme seems to be a quick adaption that could need many more refinements, here are the three most important issues I spotted that could need fixing: - [ ] 1. change header colors, too (currently not affected) - [ ] 2. tone down primary and secondary colors - [ ] 3. use colors from the palette for key interactions --- ### 1. I added a proposal for the menu header colors in the overview below.  --- ### 2. I propose colors like #061c2a and #050c10 to be used as primary colors to tone down the relative strong saturation and contrast of the main colors. As a comparison you can see github(gh) and gitlab(gl) main colors in dark mode, and codeberg  --- ### 3. Key buttons still apply colors from the previous theme, instead of the [codeberg palette](https://codeberg.org/Codeberg/Design/wiki/Palette).  # overview 

fnetX commented 2022年10月10日 18:35:44 +02:00

I still want this to be solved some day :)

I still want this to be solved some day :)

mray commented 2022年10月18日 20:38:25 +02:00

I wanted this, too. Half a year ago I suggested the changes above as low hanging fruits – in case anybody touches colors. Just as a bare minimum, as I expect things to go slow. But what was it worth compared to a merge request from last week?

Codeberg/gitea#42

Let us not stand in the way of the few things that actually do happen - there is just no place for suggestions.

I wanted this, too. Half a year ago I suggested the changes above as low hanging fruits – in case anybody touches colors. Just as a bare minimum, as I expect things to go slow. But what was it worth compared to a merge request from last week? https://codeberg.org/Codeberg/gitea/pulls/42 Let us not stand in the way of the few things that *actually do happen* - there is just no place for suggestions.

n0toose commented 2023年05月30日 15:14:08 +02:00

Reopening as I wanted to discuss the proposal made here (#82 seems to be a duplicate, TL;DR the file that needs to be changed can be found here Codeberg/forgejo@00f7439f97) and take a look at whether I can implement some changes based on what you said here:

I shared the screenshot in the Codeberg Matrix chat and asked if the right window looked better than the left window. The person who inspired me to open the aforementioned issue and investigate this problem, @Akselmo, told me something about "keeping the green buttons". I trust you as an authority here, do you think that retaining the green button color would look better?

Reopening as I wanted to discuss the proposal made here (https://codeberg.org/Codeberg/Design/issues/82 seems to be a duplicate, TL;DR the file that needs to be changed can be found here https://codeberg.org/Codeberg/forgejo/commit/00f7439f97d2e9a77438808629f7b570a4e60b4c) and take a look at whether I can implement some changes based on what you said here: I shared the screenshot in the Codeberg Matrix chat and asked if the right window looked better than the left window. The person who inspired me to open the aforementioned issue and investigate this problem, @Akselmo, told me something about "keeping the green buttons". I trust you as an authority here, do you think that retaining the green button color would look better?

akselmo commented 2023年05月30日 15:16:34 +02:00

Not necessary to keep the green buttons, but I think it's a bit easier to eyes than yellow

Not necessary to keep the green buttons, but I think it's a bit easier to eyes than yellow

mray commented 2023年05月31日 12:51:15 +02:00

do you think that retaining the green button color would look better?

I think the problem isn't how things look, but what they mean. There is a need for "loud" buttons and for buttons that seamlessly fit into the rest. The question is what options does the design system provide? And which button style was chosen for what reason.

My proposal is an attempt to find an equivalent to the screenshot on the left. Maybe it is too dominant in that context, but it is equivalent.

It would make sense to understand the underlying system and start theming from there – and not change particular buttons on particular pages based on the looks.

Maybe all it takes is to just apply the same style twice, like so:
image

and keep the yellow button for other use cases where a loud button is necessary.

> do you think that retaining the green button color would look better? I think the problem isn't how things look, but what they mean. There is a need for "loud" buttons and for buttons that seamlessly fit into the rest. The question is what options does the design system provide? And which button style was chosen for what reason. My proposal is an attempt to find an equivalent to the screenshot on the left. Maybe it is too dominant in that context, but it is equivalent. It would make sense to understand the underlying system and start theming from there – and not change particular buttons on particular pages based on the looks. Maybe all it takes is to just apply the same style twice, like so:  and keep the yellow button for other use cases where a loud button is necessary.

n0toose commented 2023年05月31日 13:36:24 +02:00

Hm, do you think this would work white letters, maybe?

The font hasn't been sitting right with me, I shared this in the Matrix chat again and someone said that "this looks like codeberg-dark and solarized (dark) mixed together" (@aryak), "yellow gives me warning vibes" (@akselmo) and I kind of agree.

Here's how GitHub does it:

image

Do you think that a white (#000000) font would be acceptable?

@akselmo and @aryak mentioned that a dark shade of blue for the font inside of the button could work too, I'm personally not 100% sure. (the one in your original proposal definitely looks great though)

Hm, do you think this would work white letters, maybe? The font hasn't been sitting right with me, I shared this in the Matrix chat again and someone said that "this looks like codeberg-dark and solarized (dark) mixed together" (@aryak), "yellow gives me warning vibes" (@akselmo) and I kind of agree. Here's how GitHub does it:  Do you think that a white (`#000000`) font would be acceptable? @akselmo and @aryak mentioned that a dark shade of blue for the font inside of the button could work too, I'm personally not 100% sure. (the one in your original proposal definitely looks great though)

n0toose commented 2023年05月31日 13:36:42 +02:00

P.S. So far, this looks way better. Thanks!

P.S. So far, this looks way better. Thanks!

n0toose commented 2023年05月31日 13:43:30 +02:00

Example provided by @akselmo:

image

These are tiny details, but why not clear them up while we're at it?! :D

Example provided by @akselmo:  These are tiny details, but why not clear them up while we're at it?! :D

akselmo commented 2023年05月31日 18:14:25 +02:00

When looking at other designs, this seems to be the common pattern

• General action: blue
• Confirming action: green
• Cancel action: orange or red
• Possibly dangerous action: red
• Warnings: yellow

Considering the background is very dark blue, having blue button for any general actions would still be visible.

Edit: To add, I do like the light green/blue shown in the first post in the search bar. But the yellow button next to it screams at me like it's a warning.

When looking at other designs, this seems to be the common pattern - General action: blue - Confirming action: green - Cancel action: orange or red - Possibly dangerous action: red - Warnings: yellow Considering the background is very dark blue, having blue button for any general actions would still be visible. Edit: To add, I do like the light green/blue shown in the first post in the search bar. But the yellow button next to it screams at me like it's a warning.

mray commented 2024年01月24日 10:12:08 +01:00

I think it is safe to assume the issue is abandoned.

I think it is safe to assume the issue is abandoned.