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 1.24.5 is applicable to Gitea versions >=1.24.0 <1.25.0

Only the latest released Gitea version is maintained. Issues and PRs for other older theme versions will not be accepted.

Development stage theme version number format: 1.major.minor.timestamp

Theme Version Release Rules

When Gitea releases a minor version, if there are changes in the theme, a new theme version with the same minor version as Gitea will be released
When Gitea releases a major version, if there are changes in the theme, a theme version 1.old_major_version.latest will be released and the old version will no longer be maintained
The pre-release version for major version adaptation is 1.major_version.rc, and when there are no obvious bugs, a theme version with the same major version as Gitea will be released

Installation

Download the latest CSS theme file from the release page and place it in the gitea/public/assets/css directory
Modify gitea/conf/app.ini and append the CSS filename without the theme- prefix to the end of THEMES under the [ui] section
Restart Gitea
Check the theme in the settings

Important

Automatic color theme requires both light and dark theme files.

Example: If the theme filename is theme-github-dark.css, add github-dark to the end of THEMES

Example gitea/conf/app.ini:

[ui]
THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-dark, github-soft-dark

For details, please refer to the Gitea documentation Gitea docs

Screenshots

Basic Themes

THEMES = github-auto, github-light, github-dark, github-soft-dark

Base

theme-github-light.css

theme-github-dark.css

theme-github-soft-dark.css

Colorblind Themes (Beta)

THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark
THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark

Colorblind & Tritanopia

theme-github-colorblind-light.css & theme-github-tritanopia-light.css

theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css

Pink Themes

THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark

Pink

theme-github-pink-light.css

theme-github-pink-dark.css

theme-github-pink-soft-dark.css

Custom CSS Variables

You can customize parts of the theme style according to your preferences

Usage Method

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

CSS Variables

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

Using Development Version of the Theme

You might want to use the development version of the theme instead of the released version

Please ensure you have Node.js environment installed, Node.js 20 or above is recommended

git clone https://github.com/lutinglt/gitea-github-theme.git
cd gitea-github-theme
npm install
npm run build

After 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