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",