Skip to content

lucas-labs/gitea-lugit-theme

Repository files navigation

lucaslabsGitea theme

Theme for lucaslabs internal gitea server.

dark

dark theme

light

light theme

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.

  1. Restart gitea.

🗒️ Note
Works with gitea version v1.20.

Credits

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.

About

🎨 lucaslabs › Gitea theme

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published