Add PWA support with dynamic themes

Author: aryanpingle

public/images/pwa-icon-512.png

@@ -0,0 +1,39 @@
+{
+    "short_name": "Runic",
+    "name": "Runic",
+	"description": "The ultimate Tunic translator tool - translate, write and share text in the Tunic language!",
+    "start_url": "/",
+    "background_color": "#000000",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "icons": [
+		{
+			"src": "./images/pwa-icon-512.png",
+			"type": "image/png",
+			"sizes": "512x512",
+			"purpose": "any"
+		},
+		{
+			"src": "./images/pwa-icon-512.png",
+			"type": "image/png",
+			"sizes": "512x512",
+			"purpose": "maskable"
+		}
+	],
+	"screenshots": [
+		{
+			"src": "/images/screenshots/dark-1.jpg",
+			"type": "image/jpeg",
+			"sizes": "541x1201",
+			"form_factor": "narrow",
+			"label": "App on mobile (1)"
+		},
+		{
+			"src": "/images/screenshots/dark-2.jpg",
+			"type": "image/jpeg",
+			"sizes": "541x1201",
+			"form_factor": "narrow",
+			"label": "App on mobile (2)"
+		}
+	]
+}

public/images/screenshots/dark-1.jpg

@@ -0,0 +1,39 @@
+{
+    "short_name": "Runic",
+    "name": "Runic",
+	"description": "The ultimate Tunic translator tool - translate, write and share text in the Tunic language!",
+    "start_url": "/",
+    "background_color": "#ffffff",
+    "display": "standalone",
+    "theme_color": "#ffffff",
+    "icons": [
+		{
+			"src": "./images/pwa-icon-512.png",
+			"type": "image/png",
+			"sizes": "512x512",
+			"purpose": "any"
+		},
+		{
+			"src": "./images/pwa-icon-512.png",
+			"type": "image/png",
+			"sizes": "512x512",
+			"purpose": "maskable"
+		}
+	],
+	"screenshots": [
+		{
+			"src": "/images/screenshots/light-1.jpg",
+			"type": "image/jpeg",
+			"sizes": "541x1201",
+			"form_factor": "narrow",
+			"label": "App on mobile (1)"
+		},
+		{
+			"src": "/images/screenshots/light-2.jpg",
+			"type": "image/jpeg",
+			"sizes": "541x1201",
+			"form_factor": "narrow",
+			"label": "App on mobile (2)"
+		}
+	]
+}

public/images/screenshots/dark-2.jpg

@@ -1,14 +1,32 @@
 import "./fonts.css";
 import "./index.css";
 
+function getManifestLinkElement(): HTMLLinkElement {
+    const query = document.head.querySelector(`link[rel="manifest"]`) as HTMLLinkElement;
+    if(query) return query;
+
+    // Create the link element
+    const element = document.createElement("link");
+    element.rel = "manifest";
+    document.head.appendChild(element);
+    
+    return element;
+}
+
 function setTheme() {
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     if (mediaQuery.matches) {
         // Dark theme
         document.documentElement.classList.remove("light-theme");
+        // Set manifest
+        const element = getManifestLinkElement();
+        element.setAttribute("href", "manifest-dark.json");
     } else {
         // Light theme
         document.documentElement.classList.add("light-theme");
+        // Set manifest
+        const element = getManifestLinkElement();
+        element.setAttribute("href", "manifest-light.json");
     }
 }