southfox/miniflux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Add support for theme color based on preferred color scheme of OS

Browse source
This commit is contained in:
Dustin Breuer 2021-11-28 16:20:51 +01:00 committed by fguillot
parent ca87894ab2
commit b21f12015e
4 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
model/theme.go
View file

@ -19,10 +19,17 @@ func Themes() map[string]string {
// ThemeColor returns the color for the address bar or/and the browser color. // ThemeColor returns the color for the address bar or/and the browser color.
// https://developer.mozilla.org/en-US/docs/Web/Manifest#theme_color // https://developer.mozilla.org/en-US/docs/Web/Manifest#theme_color
// https://developers.google.com/web/tools/lighthouse/audits/address-bar // https://developers.google.com/web/tools/lighthouse/audits/address-bar
func ThemeColor(theme string) string { // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
func ThemeColor(theme, colorScheme string) string {
switch theme { switch theme {
case "dark_serif", "dark_sans_serif": case "dark_serif", "dark_sans_serif":
return "#222" return "#222"
case "system_serif", "system_sans_serif":
if colorScheme == "dark" {
return "#222"
}
return "#fff"
default: default:
return "#fff" return "#fff"
} }

4
template/functions.go
View file

@ -87,8 +87,8 @@ func (f *funcMap) Map() template.FuncMap {
"isodate": func(ts time.Time) string { "isodate": func(ts time.Time) string {
return ts.Format("2006-01-02 15:04:05") return ts.Format("2006-01-02 15:04:05")
}, },
"theme_color": func(theme string) string { "theme_color": func(theme, colorScheme string) string {
return model.ThemeColor(theme) return model.ThemeColor(theme, colorScheme)
}, },
"icon": func(iconName string) template.HTML { "icon": func(iconName string) template.HTML {
return template.HTML(fmt.Sprintf( return template.HTML(fmt.Sprintf(

4
template/templates/common/layout.html
View file

@ -29,7 +29,9 @@
<link rel="apple-touch-icon" sizes="167x167" href="{{ route "appIcon" "filename" "icon-167.png" }}"> <link rel="apple-touch-icon" sizes="167x167" href="{{ route "appIcon" "filename" "icon-167.png" }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ route "appIcon" "filename" "icon-180.png" }}"> <link rel="apple-touch-icon" sizes="180x180" href="{{ route "appIcon" "filename" "icon-180.png" }}">
<meta name="theme-color" content="{{ theme_color .theme }}"> <meta name="theme-color" content="{{ theme_color .theme "light" }}" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="{{ theme_color .theme "dark" }}" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" type="text/css" href="{{ route "stylesheet" "name" .theme "checksum" .theme_checksum }}"> <link rel="stylesheet" type="text/css" href="{{ route "stylesheet" "name" .theme "checksum" .theme_checksum }}">
{{ if and .user .user.Stylesheet }} {{ if and .user .user.Stylesheet }}

2
ui/static_manifest.go
View file

@ -53,7 +53,7 @@ func (h *handler) showWebManifest(w http.ResponseWriter, r *http.Request) {
} }
displayMode = user.DisplayMode displayMode = user.DisplayMode
} }
themeColor := model.ThemeColor(request.UserTheme(r)) themeColor := model.ThemeColor(request.UserTheme(r), "light")
manifest := &webManifest{ manifest := &webManifest{
Name: "Miniflux", Name: "Miniflux",
ShortName: "Miniflux", ShortName: "Miniflux",