Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New dark theme and default theme rename #27097

Closed
silverwind opened this issue Sep 16, 2023 · 15 comments · Fixed by #29283
Closed

New dark theme and default theme rename #27097

silverwind opened this issue Sep 16, 2023 · 15 comments · Fixed by #29283
Labels
proposal/accepted We have reviewed the proposal and agree that it should be implemented like that/at all. topic/theme topic/ui Change the appearance of the Gitea UI type/proposal The new feature has not been accepted yet but needs to be discussed first.
Milestone

Comments

@silverwind
Copy link
Member

silverwind commented Sep 16, 2023

Feature Description

I think generally we agree that arc-green is a rather unconventional color theme and I don't like it very much. The idea is to make a new default dark theme with light blue primary color and almost-greyscale blue overall color. So I propose:

  • Rename gitea theme to gitea-light and migrate existing users
  • Rename and update arc-green theme to gitea-dark and migrate existing users

The colors I'd be aiming for are greyscale with a very subtle blue tint. Very similar to this blender theme and to Discord's dark theme, but not as blue as GitHub's dark theme.

Screenshots

image
@silverwind silverwind added type/proposal The new feature has not been accepted yet but needs to be discussed first. topic/ui Change the appearance of the Gitea UI labels Sep 16, 2023
@puni9869
Copy link
Member

puni9869 commented Sep 16, 2023

I was waiting for this proposal from long time. FInally the time has come.
It will be included in which milestone 1.21 or .122? I think we should tag this.

@silverwind
Copy link
Member Author

Too late for 1.21, I guess it will be 1.22.

@silverwind silverwind added this to the 1.22.0 milestone Sep 16, 2023
@delvh delvh added the proposal/accepted We have reviewed the proposal and agree that it should be implemented like that/at all. label Sep 16, 2023
@TheBrokenRail
Copy link
Contributor

Wait, what's wrong with arc-green? I've always thought it looked nice.

@delvh
Copy link
Member

delvh commented Sep 17, 2023

As I've understood it:
arc-green is an unconventional dark theme as it is basically the only common dark theme with a large green focus instead of a blue focus.

Ultimately, I'm neutral about which design we choose as we will all be able to adapt to whatever is decided.

@silverwind
Copy link
Member Author

silverwind commented Sep 17, 2023

There is at least these issue with current themes:

  • Light theme is blue primary, dark theme is green, introducing inconsistency.
  • Blue primary is in widespread use, likely because in HTML links are blue and people just went with that.
  • Green primary is unconventional. Not saying it couldn't work, but I think we are better off with blue.

@lunny
Copy link
Member

lunny commented Sep 18, 2023

We can move arcgreen to a standalone repository so it can be used as external theme

@silverwind
Copy link
Member Author

It would eventually require updates when color variables change, so I think we better kill it completely, or put it up somewhere in a "archived" state with no guarantees.

@JakobDev
Copy link
Contributor

JakobDev commented Oct 5, 2023

While I personally use a dark theme, I'm in favour of keeping the light theme as default. While currently many sites on the Internet offers a dark theme, the most most will use the light theme as default, so Gitea should also do that. But maybe there's a way to respect prefers-color-scheme, what would even be better.

@silverwind
Copy link
Member Author

DEFAULT_THEME = auto, which is the one that switches with prefers-color-scheme, so that's already taken care of.

silverwind added a commit that referenced this issue Oct 6, 2023
)

Part of #27097:

- `gitea` theme is renamed to `gitea-light`
- `arc-green` theme is renamed to `gitea-dark`
- `auto` theme is renamed to `gitea-auto`

I put both themes in separate CSS files, removing all colors from the
base CSS. Existing users will be migrated to the new theme names. The
dark theme recolor will follow in a separate PR.

## ⚠️ BREAKING ⚠️

1. If there are existing custom themes with the names `gitea-light` or
`gitea-dark`, rename them before this upgrade and update the `theme`
column in the `user` table for each affected user.
2. The theme in `<html>` has moved from `class="theme-name"` to
`data-theme="name"`, existing customizations that depend on should be
updated.

---------

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
@silverwind
Copy link
Member Author

Got a initial draft here, but I don't like it yet as the secondary colors are too blue, the color shades are generated by this currently:

const col = [0x13, 0x1d, 0x26];

for(let i = -3; i < 200; i += 1) {
  const r = col[0] + i;
  const g = col[1] + i + Math.floor(i / 32);
  const b = col[2] + i + Math.floor(i / 16);
  console.info(`#${r.toString(16)}${g.toString(16)}${b.toString(16)}`);
}
image

@lunny
Copy link
Member

lunny commented Oct 21, 2023

@silverwind
Copy link
Member Author

Ideally I would like to use CSS color generation but the necessary CSS functionality is still too new to realistically use, maybe in a year or two:

https://caniuse.com/mdn-css_types_color_color-mix
https://caniuse.com/css-relative-colors

@Code-DJ
Copy link

Code-DJ commented Dec 21, 2023

@istiak101
Copy link
Contributor

another example theme https://code.plashenkov.com/plashenkov/gitea-theme-deep-dark

I would vote for this one.

https://gitea.catppuccin.com/catppuccin/gitea

This is a bit difficult for the eye.

@Code-DJ
Copy link

Code-DJ commented Dec 31, 2023

another example theme code.plashenkov.com/plashenkov/gitea-theme-deep-dark

I would vote for this one.

gitea.catppuccin.com/catppuccin/gitea

This is a bit difficult for the eye.

👍 I put it more as a reference. It's all subjective - I think the background on plashenkov is too muted while the foreground on catppuccin is too bright. May be find a happy median.

silverwind added a commit that referenced this issue Feb 28, 2024
Now uses the same primary color as light theme. The secondary colors are
shifted towards a slightly blue shade. Could maybe desaturate a bit
more, but overall I think I'm happy with it.

Fixes: #27097

<img width="1343" alt="Screenshot 2024-02-27 at 22 21 46"
src="https://github.com/go-gitea/gitea/assets/115237/4163c393-b469-4a53-8f4b-1c33aa04f3ac">
<img width="581" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/e621f7f8-5679-4605-bf42-3d5ff1071e1e">
<img width="581" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/20e66493-2457-482b-b8f1-e5710934e189">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
DennisRasey pushed a commit to DennisRasey/forgejo that referenced this issue Mar 6, 2024
Now uses the same primary color as light theme. The secondary colors are
shifted towards a slightly blue shade. Could maybe desaturate a bit
more, but overall I think I'm happy with it.

Fixes: go-gitea/gitea#27097

<img width="1343" alt="Screenshot 2024-02-27 at 22 21 46"
src="https://github.com/go-gitea/gitea/assets/115237/4163c393-b469-4a53-8f4b-1c33aa04f3ac">
<img width="581" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/e621f7f8-5679-4605-bf42-3d5ff1071e1e">
<img width="581" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/20e66493-2457-482b-b8f1-e5710934e189">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit d557fbc5a715a1920a2860cb04ae6c8fe2225182)
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 10, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
proposal/accepted We have reviewed the proposal and agree that it should be implemented like that/at all. topic/theme topic/ui Change the appearance of the Gitea UI type/proposal The new feature has not been accepted yet but needs to be discussed first.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants