Move Codeberg CSS (navbar) to default theme #392

Open
opened 10 months ago by random_guy52 · 10 comments

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. ![image](/attachments/5c56d210-d966-47cc-91c0-3cb03e9062c7)
Owner

PR welcome

PR welcome
fnetX added this to the Theme diversity milestone 9 months ago

Initial work is done with 4b68de7caa. Close issue?

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

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.

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). ![](https://codeberg.org/attachments/e3acde3f-7028-464d-ac7f-2e62d9191869) One could probably use #292d39 too, but this is just a sample.
Collaborator

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.

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).
Collaborator

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 ...

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 changed title from arch-green should match with codeberg colour scheme to Move Codeberg CSS (navbar) to default theme 7 months ago
Collaborator

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).
fnetX self-assigned this 7 months ago

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?
Collaborator

@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
Sign in to join this conversation.
No Milestone
No Assignees
7 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.