automatic meta color update

resources/landing-page/js/scripts.js

@@ -50,15 +50,16 @@
 
 
 function injectTheme(theme,container="head") {
+    let themeLower = theme.toLowerCase()
     if (container === "head") {
         html_element = document.head;
     } else html_element = document.body;
     let themeOption = document.getElementById("theme-option")
     let link = themeOption ? themeOption : document.createElement("link");
-    url = "/css/theme-options/"
+    url = "/css/theme-options"
     link.type = "text/css";
     link.rel = "stylesheet";
-    link.href = `${url}/${theme.toLowerCase()}.css`;
+    link.href = `${url}/${themeLower}.css`;
     link.id = `theme-option`
     html_element.appendChild(link);
   }
@@ -85,8 +86,9 @@ function injectTheme(theme,container="head") {
     href="https://docs.theme-park.dev/custom/">variables</a>.`
     createApps(apps,themeOptions)
     smoothScroll()
-    let randomTheme = Object.keys(themeOptions)[~~(Math.random() * Object.keys(themeOptions).length)]
+    currentIndex = ~~(Math.random() * Object.keys(themeOptions).length)
-    injectTheme(randomTheme)
+    injectTheme(Object.keys(themeOptions)[currentIndex])
+    updateMetaThemeColor()
     })
 }
 
@@ -119,7 +121,9 @@ function createApps(apps,themeOptions) {
 }
 
 function fadeOutIn(speed) {
-    let theme = Object.keys(themeOptions)[~~(Math.random() * Object.keys(themeOptions).length)]
+    currentIndex = (currentIndex+1)%Object.keys(themeOptions).length;
+    //let theme = Object.keys(themeOptions)[~~(Math.random() * Object.keys(themeOptions).length)]
+    let theme = Object.keys(themeOptions)[currentIndex]
     if (!document.body.style.opacity) {
         document.body.style.opacity = 1;
     }
@@ -129,6 +133,7 @@ function fadeOutIn(speed) {
             clearInterval(outInterval);
             injectTheme(theme)
             document.getElementById("switch-theme").innerText = theme
+            updateMetaThemeColor()
             var inInterval = setInterval(function() {
                 document.body.style.opacity = Number(document.body.style.opacity)+0.02;
                 if (document.body.style.opacity >= 1)
@@ -139,6 +144,16 @@ function fadeOutIn(speed) {
 
 }
 
+function updateMetaThemeColor() {
+    fetch(`/css/theme-options/${Object.keys(themeOptions)[currentIndex].toLowerCase()}.css`)
+    .then(response =>  response.text())
+    .then(text => {
+        let re = text.match("--accent-color:.*;")[0]
+        rgb = re.split(":")[1].split(";")[0].replace(/\s/g, "")
+        document.querySelector('meta[name="theme-color"]').setAttribute('content',  `rgb(${rgb})`);
+        })
+}
+
 // Smooth scrolling using anime.js
 function smoothScroll() {$('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function () {
     if (