Custom themes for gitea

Themes
1

Did anyone build another css theme beside the two we already have? And if so, would the person be willing to share it with me?

1 Like
2

You could try my github theme:

1 Like
3

thanks :slight_smile:
I will try it asap.

4

Cool, you can refer to this if you have issues. Setting up Gitea custom assets can be a little bit of a pain sometimes.

1 Like
7

@bkraul , apparently you’ve managed to theme a Docker instance.

I’ve been trying to theme my Gitea instance running in a container. I’ve modified the default theme-arc-green.css, put it in /data/gitea/public/assets/css in the container, named it theme-mytheme.css and added it to THEMES in app.ini. Then restarted the container.

When I apply the theme from the web UI, gitea reverts to the default ‘gitea’ theme.

What am I missing? Do I need a custom header.tmpl as well?

1 Like
8

It depends on what version of gitea you are using. They changed the way the custom assets load in the latest version. I can help you with that if you’d like. From what I understand, if you are going to use a named css, you need a custom header.tmpl file. You need to make sure your app.ini has a default theme set:

[ui]
DEFAULT_THEME = gitea

Because I use a completely custom overriding theme (see https://git.belmankraul.com), I leave my DEFAULT_THEME set to gitea, and then inside of /data/gitea/templates/custom I create a header.tmpl file with this content:

<link rel="stylesheet" href="{{AppSubUrl}}/assets/css/gitea-github-css/gitea-github.css" media="all" />

I am storing the actual css on /data/gitea/public/css/gitea-github-css/gitea-github.css. So the change they did to recent version changes how these public assets are accessed from the templates.

Let me know if this helps.

2 Likes
9

Thank you! I think this will be enough information for now.

My intention is to make slight modifications to both default themes, I’ll ask here if I run into trouble. For my use case overriding the default themes is absolutely fine.

10

I run two instances of Gitea and to prevent myself from mixing up the browser tabs (and maybe those of other instances as well) I tuned the color appearance of each. To do so, I first created templates/header.tmpl to append a custom CSS file:

<link rel="stylesheet" href="/assets/css/custom.css" type="text/css" />

The CSS I wrote in public/css/custom.css to adapt the colors had been kind of complex and hacky, until I found out that I could just override the CSS color variables. In addition, I overrode some more stuff to my liking:

/* customize colors */
:root {
    --custom-rgb: 170, 0, 0;
    --color-primary: rgb(var(--custom-rgb));
    --color-primary-dark-2: rgba(var(--custom-rgb), 0.5);
    --color-primary-dark-3: rgba(var(--custom-rgb), 0.67);
}

/* override --color-green on home page */`
.home a,
.home .hero .svg {
    color: var(--color-primary);
}

/* adapt private repo and file list hover background color */
.feeds .list ul li.private,
.repository.file.list #repo-files-table tr:hover {
    background-color: rgba(var(--custom-rgb), 0.05);
}

/* adapt color of contribution matrix on dashboard */
svg.vch__wrapper {
    filter: hue-rotate(150deg);
}

I also adapted the color information in public/img/logo.svg as well to also have a non-green favicon.

Finally, I added a simple dark mode to my custom CSS:

/* dark mode */
@media (prefers-color-scheme: dark) {
    body {
        filter: invert(1) hue-rotate(180deg);
        background-color: #222;
    }
    body img {
        filter: invert(1) hue-rotate(180deg);
    }
}

This is how it looks like (sorry as a new user I could only paste one image):

giteas
giteas960×1960 161 KB

It’s great to be given self-hostable open source software which you can adapt to however you want it. Thank you everyone involved!

11

How did you added the dark mode? I love your theme, but I cant fnd a way to use the dark one.