Add the ability to have built in themes in Gitea (#4198)

This makes it easier for user who want to theme but
don't have the ability to know how to customize templates
all that is required is a change in a config option

The reason why I chose the DEFAULT_THEME as variable,
as perhaps in the future we will allow users to chose their
theme whon logged in just like we do with languages

Makefile

@@ -55,6 +55,9 @@ else
 	endif
 endif
 
+# $(call strip-suffix,filename)
+strip-suffix = $(firstword $(subst ., ,$(1)))
+
 .PHONY: all
 all: build
 
@@ -301,7 +304,7 @@ public/js/index.js: $(JAVASCRIPTS)
 
 .PHONY: stylesheets-check
 stylesheets-check: generate-stylesheets
-	@diff=$$(git diff public/css/index.css); \
+	@diff=$$(git diff public/css/*); \
 	if [ -n "$$diff" ]; then \
 		echo "Please run 'make generate-stylesheets' and commit the result:"; \
 		echo "$${diff}"; \
@@ -311,6 +314,7 @@ stylesheets-check: generate-stylesheets
 .PHONY: generate-stylesheets
 generate-stylesheets:
 	node_modules/.bin/lessc --clean-css public/less/index.less public/css/index.css
+	$(foreach file, $(filter-out public/less/themes/_base.less, $(wildcard public/less/themes/*)),node_modules/.bin/lessc --clean-css public/less/themes/$(notdir $(file)) > public/css/theme-$(notdir $(call strip-suffix,$(file))).css;)
 
 .PHONY: swagger-ui
 swagger-ui:

custom/conf/app.ini.sample

@@ -75,6 +75,8 @@ THEME_COLOR_META_TAG = `#6cc644`
 MAX_DISPLAY_FILE_SIZE = 8388608
 ; Whether the email of the user should be shown in the Explore Users page
 SHOW_USER_EMAIL = true
+; Set the default theme for the Gitea install
+DEFAULT_THEME = gitea
 
 [ui.admin]
 ; Number of users that are displayed on one page

docs/content/doc/advanced/config-cheat-sheet.en-us.md

@@ -68,6 +68,7 @@ Values containing `#` or `;` must be quoted using `` ` `` or `"""`.
 - `EXPLORE_PAGING_NUM`: **20**: Number of repositories that are shown in one explore page.
 - `ISSUE_PAGING_NUM`: **10**: Number of issues that are shown in one page (for all pages that list issues).
 - `FEED_MAX_COMMIT_NUM`: **5**: Number of maximum commits shown in one activity feed.
+- `DEFAULT_THEME`: **gitea**: \[gitea, arc-green\]: Set the default theme for the Gitea install.
 
 ### UI - Admin (`ui.admin`)
 

docs/content/doc/advanced/customizing-gitea.en-us.md

@@ -91,3 +91,7 @@ Apart from `extra_links.tmpl` and `extra_tabs.tmpl`, there are other useful temp
 ## Customizing gitignores, labels, licenses, locales, and readmes.
 
 Place custom files in corresponding sub-folder under `custom/options`.
+
+## Customizing the look of Gitea
+
+Gitea has two built-in themes, the default theme `gitea`, and a dark theme `arc-green`. To change the look of your Gitea install change the value of `DEFAULT_THEME` in the [ui](https://docs.gitea.io/en-us/config-cheat-sheet/#ui-ui) section of `app.ini` to another one of the available options.

modules/setting/setting.go

@@ -280,6 +280,7 @@ var (
 		ThemeColorMetaTag   string
 		MaxDisplayFileSize  int64
 		ShowUserEmail       bool
+		DefaultTheme        string
 
 		Admin struct {
 			UserPagingNum   int
@@ -303,6 +304,7 @@ var (
 		ReactionMaxUserNum:  10,
 		ThemeColorMetaTag:   `#6cc644`,
 		MaxDisplayFileSize:  8388608,
+		DefaultTheme:        `gitea`,
 		Admin: struct {
 			UserPagingNum   int
 			RepoPagingNum   int

modules/templates/helper.go

@@ -186,6 +186,9 @@ func NewFuncMap() []template.FuncMap {
 		"ParseDeadline": func(deadline string) []string {
 			return strings.Split(deadline, "|")
 		},
+		"DefaultTheme": func() string {
+			return setting.UI.DefaultTheme
+		},
 	}}
 }
 

public/less/themes/_base.less

@@ -0,0 +1,3 @@
+// TODO: Instead of having each theme file define each
+//       CSS/LESS item in this file and then overide
+//       in the theme files

templates/base/head.tmpl

@@ -127,6 +127,9 @@
 	<meta property="og:url" content="{{AppUrl}}" />
 	<meta property="og:description" content="{{MetaDescription}}">
 {{end}}
+{{if ne DefaultTheme "gitea"}}
+	<link rel="stylesheet" href="{{AppSubUrl}}/css/theme-{{DefaultTheme}}.css">
+{{end}}
 {{template "custom/header" .}}
 </head>
 <body>