Move Codeberg CSS (navbar) to default theme #392

random_guy52 commented 2021年01月28日 10:01:31 +01:00

The arch-green theme or dark theme should match with the codeberg colour scheme. The current colour scheme's main colour is the green colour from gitea. Meanwhile, the taskbar/topbar is blue in colour. I would like to see blue instead of green.
Or
Design a new dark theme for Codeberg.
image

The arch-green theme or dark theme should match with the codeberg colour scheme. The current colour scheme's main colour is the green colour from gitea. Meanwhile, the taskbar/topbar is blue in colour. I would like to see blue instead of green. Or Design a new dark theme for Codeberg. 

hw commented 2021年01月31日 20:38:55 +01:00

PR welcome

PR welcome

achill commented 2021年04月30日 17:16:34 +02:00

Initial work is done with Codeberg/build-deploy-gitea@4b68de7caa. Close issue?

Initial work is done with https://codeberg.org/Codeberg/build-deploy-gitea/commit/4b68de7caabcd0639cef47bb2de794a699d0ee1c. Close issue?

fnetX commented 2021年04月30日 18:08:05 +02:00

hehe no ... #434 ...
I'd prefer to revert the colours in upstream theme (this would turn arc-green green again) and create a true dark codeberg theme (maybe copy arc-green, replace colours and call it codeberg-dark or something).

So this is about that job, the other issue about properly fixing the upstream colours.

Or do you think it's good to globally override colours to have all-blue? Would be limiting to further themes, I guess.

hehe no ... #434 ... I'd prefer to revert the colours in upstream theme (this would turn arc-green green again) and create a true dark codeberg theme (maybe copy arc-green, replace colours and call it codeberg-dark or something). So this is about that job, the other issue about properly fixing the upstream colours. Or do you think it's good to globally override colours to have all-blue? Would be limiting to further themes, I guess.

ileantac commented 2021年05月17日 00:22:16 +02:00

I personally think not having a "colored" navigation bar in a dark theme makes more sense as it's somewhat visually disturbing, be it blue or green (unless desaturated/darkened. but even then it still feels smoewhat out of place).

One could probably use #292d39 too, but this is just a sample.

I personally think not having a "colored" navigation bar in a dark theme makes more sense as it's somewhat visually disturbing, be it blue or green (unless desaturated/darkened. but even then it still feels smoewhat out of place).  One could probably use #292d39 too, but this is just a sample.

fnetX commented 2021年05月17日 00:54:07 +02:00

Hmm, the arc-green colour scheme would actually be completely different, probably looks like on this instance https://git.disroot.org/ ... the main issue with the colours is that we do override them for the Codeberg navbar, because we have a custom stylesheet in place.
The main idea behind this is to have the Codeberg colour scheme in all the themes (or it was probably simply put in place with the light theme in mind since theming is not the most obvious setting).

We could say that we don't care about having exactly matching Codeberg colours (that is: https://codeberg.org/Codeberg/Design/wiki/Branding#palette this palette), modify only the default Codeberg theme to include our custom navbar and let all the other themes be as-is ... that might be the best solution if we don't want to force the blue navbar for every theme.
It would certainly work against having a Corporate Design for Codeberg since many users would not see it for years after they changed settings, but since this setting is only available for registered users who are then on Codeberg anyway, we could probably live with this and let them choose their prefered theme - with consistent colours and no overrides.

Hmm, the arc-green colour scheme would actually be completely different, probably looks like on this instance https://git.disroot.org/ ... the main issue with the colours is that we do override them for the Codeberg navbar, because we have a custom stylesheet in place. The main idea behind this is to have the Codeberg colour scheme in all the themes (or it was probably simply put in place with the light theme in mind since theming is not the most obvious setting). We could say that we don't care about having exactly matching Codeberg colours (that is: https://codeberg.org/Codeberg/Design/wiki/Branding#palette this palette), modify only the default Codeberg theme to include our custom navbar and let all the other themes be as-is ... that might be the best solution if we don't want to force the blue navbar for every theme. It would certainly work against having a Corporate Design for Codeberg since many users would not see it for years after they changed settings, but since this setting is only available for registered users who are then on Codeberg anyway, we could probably live with this and let them choose their prefered theme - with consistent colours and no overrides.

ileantac commented 2021年05月17日 01:34:28 +02:00

I understand the rationale behind the decision but unfortunately things don't look that great in action. The blue navbar seems somewhat out of place even in the light theme, and more so in the dark theme (and the color isn't the only issue, the very narrow height compared to other elements and lack of shadow also seem to contribute to it looking somewhat out of place).

And well I think overriding themes like that would render theming kinda meaningless in a bigger picture, so having a custom default theme would indeed make more sense to me (although I would probably still not be in favour of the current navbar even for the custom theme, as I believe the default theme should look more consistent).

Maybe instead of coloring the whole navbar, we could use the colored icon to put an emphasis on the branding? (I think that's pretty much how apps/websites deal with dark/light theme variants these days, as colors can not be used extensively without creating conflicts).

I understand the rationale behind the decision but unfortunately things don't look that great in action. The blue navbar seems somewhat out of place even in the light theme, and more so in the dark theme (and the color isn't the only issue, the very narrow height compared to other elements and lack of shadow also seem to contribute to it looking somewhat out of place). And well I think overriding themes like that would render theming kinda meaningless in a bigger picture, so having a custom default theme would indeed make more sense to me (although I would probably still not be in favour of the current navbar even for the custom theme, as I believe the default theme should look more consistent). Maybe instead of coloring the whole navbar, we could use the colored icon to put an emphasis on the branding? (I think that's pretty much how apps/websites deal with dark/light theme variants these days, as colors can not be used extensively without creating conflicts).

fnetX commented 2021年05月17日 12:16:16 +02:00

I agree to moving the blue navbar to the default theme. Theme diversity is on my backlog, I didn't yet consider the navbar issue, but of course, this would have become a bigger issue anyway.

To the colour: I do like the navbar in the default theme and I think it will be kept anyway since this could be considered as Codebergs branding, but have a look at Codeberg/build-deploy-gitea#17 where there was a discussion about a redesign and maybe add some ideas there if you see room for improvement ...

I agree to moving the blue navbar to the default theme. Theme diversity is on my backlog, I didn't yet consider the navbar issue, but of course, this would have become a bigger issue anyway. To the colour: I do like the navbar in the default theme and I think it will be kept anyway since this could be considered as Codebergs branding, but have a look at https://codeberg.org/Codeberg/build-deploy-gitea/pulls/17 where there was a discussion about a redesign and maybe add some ideas there if you see room for improvement ...

fnetX commented 2021年05月17日 12:23:41 +02:00

Renamed the issue to reflect the actual ToDo, creating a dark theme fitting the Codeberg theme would be another cool thing - but after we managed a cool way for theme contributions.

A decision left for here is how much of the Codeberg CSS to move from the Overrides to the themes.
Some fixes might be useful in every theme to make the defaults work (i. e. with too many icons in the navbar), but others would be annoying to work around (someone might develop a theme for Gitea to see it screwed up by Codeberg's custom CSS).

Renamed the issue to reflect the actual ToDo, creating a dark theme fitting the Codeberg theme would be another cool thing - but after we managed a cool way for theme contributions. A decision left for here is how much of the Codeberg CSS to move from the Overrides to the themes. Some fixes might be useful in every theme to make the defaults work (i. e. with too many icons in the navbar), but others would be annoying to work around (someone might develop a theme for Gitea to see it screwed up by Codeberg's custom CSS).

mray commented 2021年08月21日 18:17:44 +02:00

Is there any tool that allows to try out different colors with gitea theme?

Is there any tool that allows to try out different colors with gitea theme?

6543 commented 2021年08月30日 00:08:02 +02:00

@mray if you wana play around i suggest user css and Stylus - that's how I shape websites to my personal needs & test :D

@mray if you wana play around i suggest user css and Stylus - that's how I shape websites to my personal needs & test :D

mray commented 2022年05月02日 11:55:12 +02:00

Thi is related: Codeberg/Design#50

Thi is related: https://codeberg.org/Codeberg/Design/issues/50

pat-s commented 2022年09月25日 23:19:07 +02:00

It reads to me as if this discussion is solved and hence could be closed?

It reads to me as if this discussion is solved and hence could be closed?

fnetX commented 2022年09月25日 23:30:11 +02:00

I don't think it's completely done yet.

I don't think it's completely done yet.

fnetX commented 2022年11月07日 03:51:48 +01:00

Nearly done now. Only minor patches remain inside codeberg.css. Blue navbar colour is no longer enforced in all themes, and we can improve and style themes from here if necessary.

Nearly done now. Only minor patches remain inside codeberg.css. Blue navbar colour is no longer enforced in all themes, and we can improve and style themes from here if necessary.