91 lines
2.5 KiB
Markdown
91 lines
2.5 KiB
Markdown
<h1 align="center">
|
||
<code>lucaslabs</code> › <a href="https://gitea.io">Gitea</a> theme
|
||
</h1>
|
||
|
||
*Theme for `lucaslabs` internal gitea server.*
|
||
|
||
## `dark`
|
||
|
||
|
||
|
||
## `light`
|
||
|
||
|
||
|
||
## `auto`
|
||
|
||
Switches between `dark` and `light` automatically based on the user's system preference.
|
||
|
||
## Usage
|
||
|
||
1. Go to the [releases page](https://github.com/lucas-labs/gitea-lugit-theme/releases) and get the latest `gitea-lugit-theme.tar.gz` release file.
|
||
2. Place the `templates` and `public` folder in your `$GITEA_CUSTOM` directory.
|
||
3. Append the themes in your `app.ini` file:
|
||
|
||
```ini
|
||
[ui]
|
||
THEMES=...,dark,light,auto
|
||
DEFAULT_THEME=dark # optional
|
||
```
|
||
|
||
> 💡 You can change the names of the themes by changing the name of the theme files in `public/css/theme-{name}.css` and in the `app.ini` file, accordingly.
|
||
|
||
4. Restart `gitea`.
|
||
|
||
> [!NOTE]
|
||
> The latest version works with `gitea` version `v1.22.x`.
|
||
|
||
## Credits
|
||
|
||
- [`catppuccin/gitea`](https://github.com/catppuccin/gitea), these themes are based on them.
|
||
|
||
## Development
|
||
|
||
### build
|
||
```bash
|
||
$ npm install
|
||
$ npm run build
|
||
```
|
||
|
||
### serve
|
||
```bash
|
||
$ npm run serve -- --server path/to/gitea/custom
|
||
|
||
# e.g.
|
||
|
||
# on linux
|
||
$ npm run serve -- --server ~/gitea/custom
|
||
# on windows
|
||
$ npm run serve -- -- --server c:/gitea/custom
|
||
```
|
||
|
||
|
||
# Changes in templates
|
||
|
||
## `home.tmpl`
|
||
|
||
Here we remove everything (default gitea welcome page). We only keep the logo and the header with the login button.
|
||
|
||
## `base/head_navbar.tmpl`
|
||
|
||
The only change here is to make the logo smaller.
|
||
|
||
```diff
|
||
- <img height="30" width="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
|
||
+ <img height="24" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
|
||
```
|
||
|
||
## `repo/home.tmpl`
|
||
|
||
+ adds `<div class="lugit-repo-header-data">...</div>` as a wrapper for the repo header data (description + labels)
|
||
+ adds `<div class="lugit-repo-content">` as a wrapper for the repo content (files, commits, branches, etc.)
|
||
|
||
Later we use css to go from default 1 column layout to 2 column layout more similar to github's design.
|
||
|
||
```diff
|
||
- <div class="ui container {{if .IsBlame}}fluid padded{{end}}>
|
||
+ <div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IIsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
|
||
```
|
||
|
||
Adds the class `lugit-repo-list-view` to the container of the repo content (only when we are not viewing a file or in blame view). This allows us to change the layout of the main repo view, except when viewing a file or in blame view.
|