Rewrite

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#050732</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/favicon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
+  <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
+  <path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
+  <defs>
+    <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#000"/>
+      <stop offset="1" stop-color="#000" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+	<style>
+    @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
+  </style>
+</svg>

public/safari-pinned-tab.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1024.000000pt" height="1024.000000pt" viewBox="0 0 1024.000000 1024.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M5020 10218 c-109 -27 -410 -108 -445 -119 -16 -5 -100 -30 -185 -55
+-287 -84 -730 -241 -915 -324 -27 -12 -59 -26 -70 -30 -183 -76 -469 -219
+-698 -349 -211 -119 -514 -320 -732 -484 -88 -67 -165 -126 -171 -131 -6 -6
+-26 -22 -44 -36 -18 -14 -38 -29 -44 -35 -6 -5 -51 -44 -101 -85 -183 -152
+-378 -333 -665 -618 -135 -133 -253 -257 -263 -275 -28 -54 -200 -699 -241
+-907 -7 -33 -56 -279 -62 -305 -2 -10 -6 -35 -9 -55 -3 -20 -8 -47 -10 -60 -6
+-30 -22 -130 -30 -185 -3 -22 -8 -51 -10 -65 -3 -14 -7 -50 -10 -80 -3 -30 -8
+-66 -10 -80 -2 -14 -6 -52 -9 -85 -3 -33 -9 -85 -12 -115 -30 -293 -35 -870
+-9 -1130 2 -19 6 -69 9 -110 4 -41 8 -91 11 -110 3 -19 7 -55 10 -80 10 -94
+38 -301 50 -370 3 -14 12 -65 21 -115 70 -404 274 -1216 322 -1282 11 -15 139
+-145 285 -288 278 -273 298 -293 442 -420 50 -44 92 -83 95 -86 4 -4 271 -225
+330 -272 8 -7 60 -46 115 -88 592 -445 1189 -765 1920 -1029 427 -154 1174
+-366 1255 -356 44 6 484 122 650 172 213 64 418 131 569 186 727 261 1361 604
+1941 1047 85 65 221 172 230 181 3 3 32 28 65 55 118 98 168 142 340 299 157
+142 583 567 608 606 13 19 33 71 46 115 31 109 121 444 127 475 3 14 14 59 24
+101 16 62 51 216 76 334 43 204 105 581 120 735 2 25 6 61 9 80 2 19 7 71 11
+115 4 44 8 94 10 110 7 69 16 371 16 515 0 155 -11 480 -17 490 -1 3 -6 52
+-10 109 -3 57 -8 111 -10 120 -1 9 -6 48 -9 86 -4 39 -11 95 -16 125 -5 30
+-11 76 -15 103 -9 77 -53 324 -81 458 -14 68 -27 133 -29 144 -50 240 -213
+856 -242 911 -15 29 -408 426 -568 574 -185 171 -375 336 -510 443 -33 27 -76
+61 -95 76 -19 16 -69 54 -110 84 -41 31 -79 60 -85 64 -25 21 -156 112 -277
+192 -582 386 -1201 671 -1988 915 -80 25 -170 51 -200 60 -30 8 -87 24 -126
+35 -159 46 -431 114 -464 116 -19 1 -69 -6 -110 -17z"/>
+</g>
+</svg>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "MassiveBox",
+    "short_name": "MassiveBox",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#050732",
+    "background_color": "#050732",
+    "display": "standalone"
+}

public/toggle-theme.js

@@ -0,0 +1,76 @@
+const primaryColorScheme = ""; // "light" | "dark"
+
+// Get theme data from local storage
+const currentTheme = localStorage.getItem("theme");
+
+function getPreferTheme() {
+  // return theme value in local storage if it is set
+  if (currentTheme) return currentTheme;
+
+  // return primary color scheme if it is set
+  if (primaryColorScheme) return primaryColorScheme;
+
+  // return user device's prefer color scheme
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+let themeValue = getPreferTheme();
+
+function setPreference() {
+  localStorage.setItem("theme", themeValue);
+  reflectPreference();
+}
+
+function reflectPreference() {
+  document.firstElementChild.setAttribute("data-theme", themeValue);
+
+  document.querySelector("#theme-btn")?.setAttribute("aria-label", themeValue);
+
+  // Get a reference to the body element
+  const body = document.body;
+
+  // Check if the body element exists before using getComputedStyle
+  if (body) {
+    // Get the computed styles for the body element
+    const computedStyles = window.getComputedStyle(body);
+
+    // Get the background color property
+    const bgColor = computedStyles.backgroundColor;
+
+    // Set the background color in <meta theme-color ... />
+    document
+      .querySelector("meta[name='theme-color']")
+      ?.setAttribute("content", bgColor);
+  }
+}
+
+// set early so no page flashes / CSS is made aware
+reflectPreference();
+
+window.onload = () => {
+  function setThemeFeature() {
+    // set on load so screen readers can get the latest value on the button
+    reflectPreference();
+
+    // now this script can find and listen for clicks on the control
+    document.querySelector("#theme-btn")?.addEventListener("click", () => {
+      themeValue = themeValue === "light" ? "dark" : "light";
+      setPreference();
+    });
+  }
+
+  setThemeFeature();
+
+  // Runs on view transitions navigation
+  document.addEventListener("astro:after-swap", setThemeFeature);
+};
+
+// sync with system changes
+window
+  .matchMedia("(prefers-color-scheme: dark)")
+  .addEventListener("change", ({ matches: isDark }) => {
+    themeValue = isDark ? "dark" : "light";
+    setPreference();
+  });