Merge pull request #546 from nunocoracao/519-ios-notch-on-safari-ignores-theme-colors

✨ add support for meta theme-color with bg color

assets/js/appearance.js

@@ -26,6 +26,8 @@ window.addEventListener("DOMContentLoaded", (event) => {
   const switcher = document.getElementById("appearance-switcher");
   const switcherMobile = document.getElementById("appearance-switcher-mobile");
 
+  updateMeta()
+
   if (switcher) {
     switcher.addEventListener("click", () => {
       document.documentElement.classList.toggle("dark");
@@ -33,6 +35,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
         "appearance",
         document.documentElement.classList.contains("dark") ? "dark" : "light"
       );
+      updateMeta()
     });
     switcher.addEventListener("contextmenu", (event) => {
       event.preventDefault();
@@ -46,10 +49,22 @@ window.addEventListener("DOMContentLoaded", (event) => {
         "appearance",
         document.documentElement.classList.contains("dark") ? "dark" : "light"
       );
+      updateMeta()
     });
     switcherMobile.addEventListener("contextmenu", (event) => {
       event.preventDefault();
       localStorage.removeItem("appearance");
     });
   }
-});
+});
+
+
+var updateMeta = () => {
+  var elem, style;
+  elem = document.querySelector('body');
+  console.log(elem)
+  style = getComputedStyle(elem);
+  console.log(style.backgroundColor)
+
+  document.querySelector('meta[name="theme-color"]').setAttribute('content', style.backgroundColor);
+}

layouts/partials/head.html

@@ -118,7 +118,7 @@
   {{ if templates.Exists "partials/extend-head.html" }}
   {{ partialCached "extend-head.html" .Site }}
   {{ end }}
-  
+  <meta name="theme-color"/>
   {{/* Firebase */}}
   {{ with $.Site.Params.firebase }}
   {{ if isset $.Site.Params "firebase" }}