The theme version number is kept consistent with the Gitea version number
Gitea version number format: major.minor.patch
Theoretically, minor version changes in Gitea do not modify the frontend layout, so the minor version of the theme is applicable to all Gitea versions with the same major version number.
For example: Theme version 28.2.1 is applicable to Gitea versions >=28.0.0 <29.0.0
Only the latest released Gitea version is maintained. Issues and PRs for other older theme versions will not be accepted.
Important
Gitea version number format for 1.27 and earlier: 1.major.minor
For example: Theme version 1.24.5 is applicable to Gitea versions >=1.24.0 <1.25.0
Important
Because the project uses new CSS features, ensure styles are applied correctly by keeping Chrome/Edge >= 120, Firefox >= 121, Safari >= 16.5
- Download the latest CSS theme file from the release page and place it in the
data/gitea/public/assets/cssdirectory (This directory may not be available by default and needs to be manually created) - Modify
data/gitea/conf/app.iniand append the CSS filename without thetheme-prefix to the end ofTHEMESunder the[ui]section - Restart Gitea
- Check the theme in the settings
Example: If the theme filename is theme-github-dark.css, add github-dark to the end of THEMES
Example data/gitea/conf/app.ini:
[ui] THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-dark, github-soft-dark
Tip
When THEMES is not set, Gitea will use all themes
Important
Automatic color theme requires both light and dark theme files.
For details, please refer to the Gitea documentation Gitea docs
Important
The template modifies Gitea's layout to make it closer to GitHub's layout. Do not use template files across versions, as this may lead to missing functionality, Gitea instance failing to start, and other issues.
Template layout is bound to the Gitea instance and will affect all themes, impacting the experience of other non-project themes.
- Download the latest template files from the release page and place them in the
data/gitea/templatesdirectory (This directory may not be available by default and needs to be manually created) - Restart Gitea
Tip
Translation files are only needed when using this project's template files to provide support for non-English languages.
- Download the latest translation files from the release page and place them in the
data/gitea/options/localedirectory (This directory may not be available by default and needs to be manually created) - Restart Gitea
THEMES = github-auto, github-light, github-dark, github-soft-dark
THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
Colorblind & Tritanopia
THEMES = github-high-contrast-auto, github-high-contrast-light, github-high-contrast-dark, github-high-contrast-soft-darkHighContrast
THEMES = github-high-contrast-colorblind-auto, github-high-contrast-colorblind-light, github-high-contrast-colorblind-dark THEMES = github-high-contrast-tritanopia-auto, github-high-contrast-tritanopia-light, github-high-contrast-tritanopia-dark
HighContrast Colorblind & Tritanopia
THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark
THEMES = github-gitea-auto, github-gitea-light, github-gitea-dark, github-gitea-arc-green
THEMES = github-catppuccin-auto, github-catppuccin-latte, github-catppuccin-frappe, github-catppuccin-macchiato, github-catppuccin-mochaCatppuccin
You can customize parts of the theme style according to your preferences
Add the following code at the beginning or end of the theme's CSS file
:root { --custom-clone-menu-width: 150px; ... }
Important
Please ensure to add custom variables in the :root selector, otherwise they will not take effect
Variables are separated by ;
It is recommended to place custom variables in a separate file and append them to the theme file using shell commands or other methods
| Variable Name | Description | Default | Github | Recommend | Min | Max |
|---|---|---|---|---|---|---|
| --custom-branch-menu-width | Branch menu width | 320px | 320px | 320px | Gitea | 640px |
| --custom-clone-menu-width | Clone button menu width | Gitea | 332px | 200px | 150px | 400px |
| --custom-user-menu-width | User menu width | 192px | 200px | Gitea | 320px | |
| --custom-explore-repolist-columns | Number of repository list columns on explore page | 2 | 2 | 2 | ||
| --custom-explore-userlist-columns | Number of user/organization list columns on explore page | 3 | 1 | 2/3 | ||
| --custom-user-repolist-columns | Number of repository list columns on user page | 2 | 2 | 1/2 | ||
| --custom-org-repolist-columns | Number of repository list columns on organization page | 1 | 1 | 1/2 | ||
| --custom-org-userlist-columns | Number of user list columns on organization page | 2 | 1 | 1/2 |
You might want to use the development version of the theme instead of the released version
Please ensure you have Bun environment installed, Bun 1.3.14 or above is recommended
git clone https://github.com/lutinglt/gitea-github-theme.git
cd gitea-github-theme
bun install
bun bundleAfter compilation, theme files will be generated in the dist directory. You can place the theme files into the
gitea/public/assets/css directory, then add the theme name to the end of THEMES in gitea/conf/app.ini