# 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 ... */
}
```