From b21f12015ebd37b1c912677e90fe229c87a00c16 Mon Sep 17 00:00:00 2001
From: Dustin Breuer <dustin.breuer@real-digital.de>
Date: Sun, 28 Nov 2021 16:20:51 +0100
Subject: [PATCH] Add support for theme color based on preferred color scheme
of OS
---
model/theme.go | 9 ++++++++-
template/functions.go | 4 ++--
template/templates/common/layout.html | 4 +++-
ui/static_manifest.go | 2 +-
4 files changed, 14 insertions(+), 5 deletions(-)
diff --git a/model/theme.go b/model/theme.go
index c8dc3805..12016ce7 100644
--- a/model/theme.go
+++ b/model/theme.go
@@ -19,10 +19,17 @@ func Themes() map[string]string {
// 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://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 {
case "dark_serif", "dark_sans_serif":
return "#222"
+ case "system_serif", "system_sans_serif":
+ if colorScheme == "dark" {
+ return "#222"
+ }
+
+ return "#fff"
default:
return "#fff"
}
diff --git a/template/functions.go b/template/functions.go
index 4b21111d..92b482e9 100644
--- a/template/functions.go
+++ b/template/functions.go
@@ -87,8 +87,8 @@ func (f *funcMap) Map() template.FuncMap {
"isodate": func(ts time.Time) string {
return ts.Format("2006-01-02 15:04:05")
},
- "theme_color": func(theme string) string {
- return model.ThemeColor(theme)
+ "theme_color": func(theme, colorScheme string) string {
+ return model.ThemeColor(theme, colorScheme)
},
"icon": func(iconName string) template.HTML {
return template.HTML(fmt.Sprintf(
diff --git a/template/templates/common/layout.html b/template/templates/common/layout.html
index 3eceb4dc..3c7c64de 100644
--- a/template/templates/common/layout.html
+++ b/template/templates/common/layout.html
@@ -29,7 +29,9 @@
<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" }}">
- <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 }}">
{{ if and .user .user.Stylesheet }}
diff --git a/ui/static_manifest.go b/ui/static_manifest.go
index aa6ed8dc..f3726ad6 100644
--- a/ui/static_manifest.go
+++ b/ui/static_manifest.go
@@ -53,7 +53,7 @@ func (h *handler) showWebManifest(w http.ResponseWriter, r *http.Request) {
}
displayMode = user.DisplayMode
}
- themeColor := model.ThemeColor(request.UserTheme(r))
+ themeColor := model.ThemeColor(request.UserTheme(r), "light")
manifest := &webManifest{
Name: "Miniflux",
ShortName: "Miniflux",