fix: Add color-scheme and force meta tag recreation for Safari iOS status bar

Author: jonathanau

assets/css/index.css

@@ -2,6 +2,7 @@
    Design System & Variables
    ========================================================================= */
 :root {
+    color-scheme: dark;
     /* Color Palette */
     --bg-base: #0a0a0f;
     --bg-surface: #12131b;
@@ -83,6 +84,10 @@
    Theme Overrides — Light Themes
    ========================================================================= */
 
+[data-theme$="-light"] {
+    color-scheme: light;
+}
+
 /* Cyber Light — cool blue-gray */
 [data-theme="cyber-light"] {
     --bg-base: #f0f4f8;

assets/js/script.js

@@ -126,12 +126,16 @@ document.addEventListener('DOMContentLoaded', () => {
             localStorage.setItem('theme', theme);
 
             // Update meta theme-color after the CSS background transition completes
-            // This prevents an iOS Safari bug where the status bar text color inverts
+            // Recreating the DOM node forces Safari to update the status bar correctly
             setTimeout(() => {
-                const metaThemeColor = document.querySelector('meta[name="theme-color"]');
-                if (metaThemeColor) {
-                    metaThemeColor.setAttribute('content', themeColors[theme] || '#0a0a0f');
+                const oldMeta = document.querySelector('meta[name="theme-color"]');
+                if (oldMeta) {
+                    oldMeta.remove();
                 }
+                const newMeta = document.createElement('meta');
+                newMeta.name = 'theme-color';
+                newMeta.content = themeColors[theme] || '#0a0a0f';
+                document.head.appendChild(newMeta);
             }, 400);
 
             // Sync active state across all theme option buttons (desktop + mobile)

assets/js/theme-init.js

@@ -19,9 +19,13 @@
      };
      if (saved && saved !== 'cyber') {
          document.documentElement.setAttribute('data-theme', saved);
-         var meta = document.querySelector('meta[name="theme-color"]');
-         if (meta) {
-             meta.setAttribute('content', themeColors[saved] || '#0a0a0f');
+         var oldMeta = document.querySelector('meta[name="theme-color"]');
+         if (oldMeta) {
+             oldMeta.parentNode.removeChild(oldMeta);
          }
+         var newMeta = document.createElement('meta');
+         newMeta.name = 'theme-color';
+         newMeta.content = themeColors[saved] || '#0a0a0f';
+         document.getElementsByTagName('head')[0].appendChild(newMeta);
      }
  })();