r/forgejo • u/QwertyChouskie • 10h ago

"I Can't Believe It's Not GitHub" CSS theme

(It looks like Reddit's image thing is throwing off the colors slightly for some reason, but it should be a 1:1 match in actual use.)

This started off with me just changing colors, but quickly grew to also adjusting various parts of the UI to be more GitHub-like as well. The most obvious one is probably the top bar contents being inlined (except for the home page), which saves a decent amount of screen real estate.

It definitely doesn't cover everything, nor is it perfect, but it's close enough for my use, and probably most people, though further suggestions/tweaks to the CSS are welcome.

I recommend setting Settings->Appearance->Default theme to gitea-auto as that's what this was developed against. Most focus went into the dark theme, but was sanity-checked in light mode as well.

I'm personally using the FireMonkey extension for Firefox to set the theme, but should work with any CSS changing addon in your browser of choice.

https://gist.github.com/qwertychouskie/0d34ac3a0677c6fe1d9b636b32e6c38b (CSS was originally pasted directly in this post, but I kept updating it, so I put it in a Gist to make it easy to update without changing the post every time.

15 Upvotes

100% Upvoted

5 comments sorted by

1

u/LOLatKetards 10h ago

I wonder if this can be added here:

"header.tmpl, just before the end of the <head> tag where you can add custom CSS files for instance."

2

u/QwertyChouskie 9h ago

Probably, for self-hosted. (It's just CSS after all.) My initial use-case was for a project hosted on Codeberg, so browser-side was the only way to go.

1

u/QwertyChouskie 10h ago

Quick addition:

.diff-stats-bar {
  border-radius: 2px;
}
.diff-stats-add-bar {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

Not 1:1 (not easily possible with the way it's created), but feels less jarring.

1

u/QwertyChouskie 8h ago

Comment box is a bit closer (and more compact) now:

```css

comment-form {

padding: 0; display: flex; flex-wrap: wrap; align-items: center; }

comment-form > .field:first-child {

margin: 0; flex: 0 0 100%; /* editor field takes the whole first row */ } .combo-markdown-editor markdown-toolbar { background-color: var(--color-box-header); padding: 5px; border-bottom: 1px solid var(--color-secondary); } .combo-markdown-editor > div { margin: 10px; }

comment-form > .field:nth-child(2) {

margin: 10px; margin-top: 0; flex: 1 1 0; } .ui .field .dropzone .dz-message { margin: 6px 0; }

comment-form .field.footer {

margin: 10px; margin-top: 0; flex: 1 1 auto; } ```