27 lines
1.8 KiB
Markdown
27 lines
1.8 KiB
Markdown
# Gitea-Themes
|
||
|
||
List of custom Gitea themes for self-hosted Gitea instance.
|
||
|
||
# Customizing the look of Gitea
|
||
The built-in themes are `gitea-light`, `gitea-dark`, and `gitea-auto` (which automatically adapts to OS settings).
|
||
|
||
The default theme can be changed via `DEFAULT_THEME` in the [ui](https://docs.gitea.com/administration/config-cheat-sheet/#ui-ui) section of `app.ini`.
|
||
|
||
Gitea also has support for user themes, which means every user can select which theme should be used. The list of themes a user can choose from can be configured with the `THEMES` value in the [ui](https://docs.gitea.com/administration/config-cheat-sheet/#ui-ui) section of `app.ini`.
|
||
|
||
To make a custom theme available to all users:
|
||
1. Add a CSS file to `$GITEA_CUSTOM/public/assets/css/theme-<theme-name>.css`. The value of `$GITEA_CUSTOM` of your instance can be queried by calling `gitea help` and looking up the value of “CustomPath”.
|
||
2. Add `<theme-name>` to the comma-separated list of setting `THEMES` in `app.ini`, or leave `THEMES` empty to allow all themes.
|
||
|
||
A custom theme file named `theme-my-theme.css` will be displayed as `my-theme` on the user’s theme selection page. It could add theme meta information into the custom theme CSS file to provide more information about the theme. If a custom theme is a dark theme, please set the global css variable `--is-dark-theme: true` in the `:root` block. This allows Gitea to adjust the Monaco code editor’s theme accordingly. An “auto” theme could be implemented by using “theme-gitea-auto.css” as a reference.
|
||
|
||
```css
|
||
gitea-theme-meta-info {
|
||
--theme-display-name: "My Awesome Theme"; /* this theme will be display as "My Awesome Theme" on the UI */
|
||
}
|
||
:root {
|
||
--is-dark-theme: true; /* if it is a dark theme */
|
||
--color-primary: #112233;
|
||
/* more custom theme variables ... */
|
||
}
|
||
``` |