From f89feda570a60be6c0cfb7bb042a80fffae85625 Mon Sep 17 00:00:00 2001
From: welpo <welpo@users.noreply.github.com>
Date: Sat, 9 Sep 2023 19:45:07 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20`browser=5Ftheme=5Fco?=
 =?UTF-8?q?lor`=20config=20option?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config.toml                    | 6 ++++++
 templates/partials/header.html | 9 +++++++++
 theme.toml                     | 6 ++++++
 3 files changed, 21 insertions(+)

diff --git a/config.toml b/config.toml
index 2b1ba5850..d81478524 100644
--- a/config.toml
+++ b/config.toml
@@ -162,6 +162,12 @@ default_theme = "light"
 # All other skins have optimal contrast.
 skin = ""
 
+# Set browser theme colour. Can be a single colour or [light, dark]. 
+# Note: Bright colors may be ignored in dark mode.
+# More details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
+browser_theme_color = "#087e96"
+# browser_theme_color = ["#ffffff", "#000000"]  # Example of light/dark colours.
+
 # List additional stylesheets to load site-wide.
 # These stylesheets should be located in your site's `static` directory.
 # Example: stylesheets = ["extra1.css", "path/extra2.css"]
diff --git a/templates/partials/header.html b/templates/partials/header.html
index 714e5fc35..656882ebc 100644
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -53,6 +53,15 @@
     
     <meta name="color-scheme" content="{%- if config.extra.theme_switcher -%}light dark{%- elif config.extra.default_theme -%}{{config.extra.default_theme}}{%- else -%}light{%- endif -%}" />
 
+    {%- if config.extra.browser_theme_color and config.extra.browser_theme_color is iterable -%}
+        {# Handle array values: theme_color[0] for light mode, theme_color[1] for dark mode #}
+        <meta name="theme-color" media="(prefers-color-scheme: light)" content="{{ config.extra.browser_theme_color[0] }}" />
+        <meta name="theme-color" media="(prefers-color-scheme: dark)" content="{{ config.extra.browser_theme_color[1] }}" />
+    {%- elif config.extra.browser_theme_color -%}
+        {# Handle single value #}
+        <meta name="theme-color" content="{{ config.extra.browser_theme_color }}" />
+    {%- endif -%}
+
     {%- if page.description %}
         <meta name="description" content="{{ page.description | striptags | safe }}" />
         <meta property="og:description" content="{{ page.description | striptags | safe }}" />
diff --git a/theme.toml b/theme.toml
index 8343ccd60..50a27abc9 100644
--- a/theme.toml
+++ b/theme.toml
@@ -47,6 +47,12 @@ default_theme = "light"
 # All other skins have optimal contrast.
 skin = ""
 
+# Set browser theme colour. Can be a single colour or [light, dark]. 
+# Note: Bright colors may be ignored in dark mode.
+# More details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
+# browser_theme_color = "#087e96"  # Example of single value.
+# browser_theme_color = ["#ffffff", "#000000"]  # Example of light/dark colours.
+
 # List additional stylesheets to load site-wide.
 # These stylesheets should be located in your site's `static` directory.
 # Example: stylesheets = ["extra1.css", "path/extra2.css"]