lucas-labs / gitea-lugit-theme

🎨 lucaslabs › Gitea theme

lucaslabs › Gitea theme

Theme for lucaslabs internal gitea server.

dark

light

auto

Switches between dark and light automatically based on the user's system preference.

Usage

1. Clone this repo
2. Place the files in the dist folder in your $GITEA_CUSTOM directory.
3. Append the themes in your app.ini file:

[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
Works with gitea version v1.20.

Credits

• catppuccin/gitea, these themes are based on them.

Dev

build

$ npm install
$ npm run build

serve

$ 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.

- <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.

- <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.

gitea-lugit-theme's Issues

Auto switch between dark and light theme

Hello.

First of all, thank you for your work. I think your theme is really beautiful

Second, I've been looking for how to automatically change the theme from light to dark, and I think I've found something interesting.

Although I could make a pull request on this, I'd like to let you know first.

I found the code of the auto theme
And I tried to apply the same.

So i create a theme-auto-lugit.css (in public/assets/css) with:

@import "./theme-light.css" (prefers-color-scheme: light);
@import "./theme-dark.css" (prefers-color-scheme: dark);

And at least it works for me.

I think it would be cool if you could add this as well