✨ feat: add browser_theme_color config option (#143)

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

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 }}" />

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