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
You could try my github theme:
1 Like
thanks 
I will try it asap.
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
@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?
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.
1 Like
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.
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):
It’s great to be given self-hostable open source software which you can adapt to however you want it. Thank you everyone involved!
How did you added the dark mode? I love your theme, but I cant fnd a way to use the dark one.