Don't set meta `theme-color` by default (#24340) (#24346)

Backport #24340 by @silverwind

Fixes https://github.com/go-gitea/gitea/issues/24321. By not setting
this meta tag, Safari will use body color for chrome and out-of-viewport
areas, which looks much better then static mismatching green.

As per
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color)
it's really only Apple browsers who still support this tag, most others
have dropped support.
 
Before:
<img width="347" alt="Screenshot 2023-04-25 at 19 59 13"
src="https://user-images.githubusercontent.com/115237/234363180-0fe667ef-5469-4f5f-b31a-c9d73aff10ac.png">

After:
<img width="361" alt="Screenshot 2023-04-25 at 20 00 00"
src="https://user-images.githubusercontent.com/115237/234363185-e2d2b62f-0133-4316-944d-b614ffb84eb0.png">

Co-authored-by: silverwind <me@silverwind.io>
pull/24348/head
Giteabot 2 years ago committed by GitHub
parent 5f82011b7c
commit cc7a4f17e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 7
      custom/conf/app.example.ini
  2. 2
      docs/content/doc/administration/config-cheat-sheet.en-us.md
  3. 2
      modules/setting/ui.go
  4. 2
      templates/base/head.tmpl

@ -1191,10 +1191,9 @@ ROUTER = console
;; Number of line of codes shown for a code comment
;CODE_COMMENT_LINES = 4
;;
;; Value of `theme-color` meta tag, used by Android >= 5.0
;; An invalid color like "none" or "disable" will have the default style
;; More info: https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
;THEME_COLOR_META_TAG = `#6cc644`
;; Value of `theme-color` meta tag, used by some mobile browers for chrome and
;; out-of-viewport areas. Default is unset which uses body color.
;THEME_COLOR_META_TAG =
;;
;; Max size of files to be displayed (default is 8MiB)
;MAX_DISPLAY_FILE_SIZE = 8388608

@ -220,7 +220,7 @@ The following configuration set `Content-Type: application/vnd.android.package-a
- `SHOW_USER_EMAIL`: **true**: Whether the email of the user should be shown in the Explore Users page.
- `THEMES`: **auto,gitea,arc-green**: All available themes. Allow users select personalized themes.
regardless of the value of `DEFAULT_THEME`.
- `THEME_COLOR_META_TAG`: **#6cc644**: Value of `theme-color` meta tag, used by Android >= 5.0. An invalid color like "none" or "disable" will have the default style. More info: https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
- `THEME_COLOR_META_TAG`: **\<empty\>**: Value of `theme-color` meta tag, used by some mobile browers for chrome and out-of-viewport areas. Default is unset which uses body color.
- `MAX_DISPLAY_FILE_SIZE`: **8388608**: Max size of files to be displayed (default is 8MiB)
- `REACTIONS`: All available reactions users can choose on issues/prs and comments
Values can be emoji alias (:smile:) or a unicode emoji.

@ -77,7 +77,7 @@ var UI = struct {
GraphMaxCommitNum: 100,
CodeCommentLines: 4,
ReactionMaxUserNum: 10,
ThemeColorMetaTag: `#6cc644`,
ThemeColorMetaTag: ``,
MaxDisplayFileSize: 8388608,
DefaultTheme: `auto`,
Themes: []string{`auto`, `gitea`, `arc-green`},

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{if .Title}}{{.Title | RenderEmojiPlain}} - {{end}}{{if .Repository.Name}}{{.Repository.Name}} - {{end}}{{AppName}}</title>
{{if .ManifestData}}<link rel="manifest" href="data:{{.ManifestData}}">{{end}}
<meta name="theme-color" content="{{ThemeColorMetaTag}}">
{{if ThemeColorMetaTag}}<meta name="theme-color" content="{{ThemeColorMetaTag}}">{{end}}
<meta name="default-theme" content="{{DefaultTheme}}">
<meta name="author" content="{{if .Repository}}{{.Owner.Name}}{{else}}{{MetaAuthor}}{{end}}">
<meta name="description" content="{{if .Repository}}{{.Repository.Name}}{{if .Repository.Description}} - {{.Repository.Description}}{{end}}{{else}}{{MetaDescription}}{{end}}">

Loading…
Cancel
Save