gitea-github-theme

Opinionated GitHub-based light and dark themes for Gitea including an automatic theme switch option.

Created and tested with Gitea v1.15 - 1.20.0. The theme might work with future versions though Gitea devs might change some CSS classes in the meantime and things might potentially look odd - just try yourself :)

I might update the theme over time to fix oversights and other issues - no guarantee though.

Features

• No longer needed from v1.20.0 onwards. (削除) Added Glitterhorn's Wiki TOC workaround as alternative for built-in wiki TOC. Built-in is buggy in v1.19.3, listing headers from the sidebar. (削除ここまで)
• Disabled "Unescaped Unicode Characters" warning on wiki pages; buggy implementation means it appears for invisible or nonexistent chars, and serves no purpose anyway
• Implement absolute timestamps (relative is useless over 4 weeks) from this bookmarklet by cpbr
• Make Gitea look like Github; Darthagnon's updates are mainly on Light mode
• Custom templates based on https://github.com/go-gitea/gitea/tree/main/templates
• Custom .gitignore templates I use at work or as suggested by HowToGeek (You can get more here!)
• STL file preview via Madeleine.js (ffddaf0, 17 Dec 2019), based on the Gitea docs

Installation

1. If you do not have admin access to a Gitea instance, you can use the Stylus browser extension and use the CSS provided in this repo for the Gitea URL
2. If you are an admin and want to make this theme available to all users:
   1. Put theme-github.css into $GITEA_PUBLIC/public/css/theme-github.css where $GITEA_PUBLIC is the "CustomPath" of your instance reported by gitea help.
   2. Add github to the comma-separated list in the setting THEMES in app.ini
   3. Now users can select this theme in their settings under "account"
   4. (optional) If you want to make this theme the default of your instance, set it in DEFAULT_THEME in app.ini

Using automatic theme switching based on system preference

To use automatic theme switching, add theme-github-auto.css into your respective themes folder as described above. This file contains both light and dark styles and selects the respective one based on the system preference selected by the user via the @media (prefers-color-scheme: CSS selector (tested on macOS).

For some reasons using @imports does not work and hence the file contains the c/p content of both the light and dark themes together. If this is somehow possible and I did not managed to get it configured, please let me know!

Changes to default Gitea theme

• Aligned primary green, grey, red and blue colors with GitHub
• Aligned border-radius with GitHub
• Related theme by removing a lot of hover colors and dominant button background-colors
• Aligned markup background to GitHub's value
• Decreased navbar height and font size
• Many small overrides of colors and font-sizes

Helm chart instructions

To use custom themes with the Gitea helm chart:

1. Create a secret containing the CSS files (here's an example via terraform, plain k8s secrets will also work)

resource "kubernetes_secret" "gitea-themes" {
 metadata {
 name = "gitea-themes"
 namespace = "gitea"
 }
 data = {
 "theme-github.css" = "${file("files/gitea/gitea-github-theme-light.css")}"
 "theme-github-dark.css" = "${file("files/gitea/gitea-github-theme-dark.css")}"
 "theme-github-auto.css" = "${file("files/gitea/gitea-github-theme-auto.css")}"
 }
 type = "Opaque"
}

2. Mount the secret via extraVolumes in values.yaml:

extraVolumes:- name:gitea-themessecret:secretName:gitea-themes

3. Add the theme options into the config in values.yaml:

gitea:config:ui:DEFAULT_THEME:github-autoTHEMES:auto,gitea,arc-green,github,github-dark,github-auto

Screenshots