Gitea: Allow Gitea to have themes

[DblK]

Since we use semantic-ui and it can handle themes, Gitea should provide the default theme and a dark theme also.
Users will be able to make their own theme too.

I would suggest to begin with only css tweaks to change the display of pages.
In a second step, maybe we can add themes to modify templates file (.tmpl) to modify the links on each page.

What do you think about that?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[joubertredrat]

@DblK your idea is only change color or html components too?

[DblK]

With Semantic you can do both (See http://semantic-ui.com/usage/theming.html).
The implementation could be simple, by looking to bindata and see if there are few themes inside a possible "themes" folder.
A list of theme could be selected from an admin page and/or adding option to each repo to set the default theme.

[joubertredrat]

theme with material design sounds good

[metalmatze]

I was actually thinking about a material theme too. I'd like to join the discussion here.
I really like https://getmdl.io. A new UI should probably wait for #64.

[xinity]

switched to enhancement as we agree on benefits of this idea :)

[gabrielsimoes]

I'm planning on tackling this issue (or at least #730) , and I thought about implementing a button close to the language button on the bottom of the page, which would be used to choose theming. Any thoughts on this?

[gabrielsimoes]

Does anybody suggest a way to pack themes? The css-only version of semantic-ui, which gitea uses, apparently is not made to support themes. Do you guys have any ideas on how to approach this?

[lunny]

I remember someone have provide a github-like theme.

[pgaskin]

Just pack the theme into a single CSS file, and apply it over the existing theme. It usually works fine.

[pgaskin]

@lunny is this what you are talking about?

[lunny]

No. It's a Gitea patch which could just replace for a github-like theme.

[pgaskin]

@lunny here is some CSS which can be appended to the page. It is taken from the example, and makes gitea look like github. http://pastebin.com/NJF5wg9W Is this the kind of thing you want?

[gabrielsimoes]

@geek1011 Maybe, but how did you build it? I mean, it is way over 10 000 lines.

EDIT: nervermind, didn't see you got it from the example.

[pgaskin]

@gabrielsimoes I just concatenated a the CSS files in the example.

[gabrielsimoes]

The issue I encountered is the following: the Semantic UI build tools allows to build a custom .css file using a theme which overrides the default one. That is, a single css file containing all the Semantic UI css with your changes included. I think editing the css manually is just too time consuming. I think the ideal way would be to build a custom css per theme. This also affects custom css which are added to gitea through index.css.

What I propose is the following: reimplement the gitea custom less files as a Semantic UI theme, and auto compile it to separate semantic UI css for each theme. If someone wants to build its own theme, it should override this gitea theme, and build a custom css for it. This custom css would be loaded to the page instead of the default theme css, and so on.

I mean, the css files would not be used as an override to a default css, as this is not supported by Semantic UI build tools. Instead, a themer (or whatever)should use the Semantic UI build tools to create a custom css for his theme which includes all the Semantic UI css.

[gabrielsimoes]

Would it be a problem to have the Semantic UI "distribution" inside gitea? So that themes can be generated together with the files inside /public/less/.

[DblK]

I don't see any issues

[kolaente]

Any news on this?

[lunny]

Nobody work on this. @kolaente

[lstolcman]

FYI: I've created simple github-like theme for gitea .
The work is based on https://github.com/go-gitea/gitea/issues/56#issuecomment-275918020 with some small changes, like changing color of directories in repo.

However, it would be good to have some kind of documentation how to generate css from less files, to help make themes easier

[lunny]

Maybe we could give some proposals. We could define a themes on custom/ and i.e. custom/themes/dark. And then we allow user put their files on the directory. CSS, templates, js and images both could be supported.
A themes list could be put on the UI, when the theme changed, we could copy custom/themes/dark to custom, and restart the service internally, then the new theme could be applied.

[lafriks]

I don't think themes should replace css file, it should just change existing styles by being added as additional css file, otherwise with base css file changed themes will become outdated as will have missing styles

[DblK]

I did a POC for a theme, with the css inside the public directory.
I edited the base.tmpl (inside custom) to add the css and now I can start theming.

[kolaente]

@lafriks That would mean we dont use Semantic-UI's themeing but own css files which are added after the base css?

[daviian]

@lafriks I'm with @kolaente , we should stick with the theming of semantic-ui and thus provide a way to edit the less variable files or something like that.