feat: implement mobile theme color support in settings and index files

index.html

@@ -5,6 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="devpage" />
   <title>devpage</title>
+  <!-- mobile browser UI theming -->
+  <meta name="theme-color" id="themeColorMeta" content="#4d22b3">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 
   <!-- Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com" />

src/js/settings.js

@@ -152,6 +152,11 @@ export class SettingsController {
   #bindEvents() {
     const colorPicker     = /** @type {HTMLInputElement}  */ (document.getElementById('colorPicker'));
     const colorValue      = /** @type {HTMLElement}       */ (document.getElementById('colorValue'));
+    // helper for mobile theme-color
+    const setThemeColor = (c) => {
+      const meta = document.querySelector('meta[name="theme-color"]');
+      if (meta) meta.setAttribute('content', c);
+    };
     const speedSlider     = /** @type {HTMLInputElement}  */ (document.getElementById('speedSlider'));
     const rotToggle       = /** @type {HTMLInputElement}  */ (document.getElementById('rotationToggle'));
     const moveSpeedSlider = /** @type {HTMLInputElement}  */ (document.getElementById('moveSpeedSlider'));
@@ -179,6 +184,15 @@ export class SettingsController {
       this.#saveState();
     });
 
+    // ── Background colour picker ─────────────────────────────
+    colorPicker.addEventListener('input', (e) => {
+      const col = (/** @type {HTMLInputElement} */ (e.target)).value;
+      this.#gradient.setColor(col);
+      colorValue.textContent = col;
+      setThemeColor(col);
+      this.#saveState();
+    });
+
     // ── Icon movement speed ────────────────────────────────
     moveSpeedSlider.addEventListener('input', (e) => {
       const val = Number(/** @type {HTMLInputElement} */ (e.target).value);
@@ -334,6 +348,7 @@ export class SettingsController {
     const letterHitCountToggle = /** @type {HTMLInputElement} */ (document.getElementById('letterHitCountToggle'));
 
     colorPicker.value      = this.#gradient.color;
+    setThemeColor(this.#gradient.color);
     colorValue.textContent = this.#gradient.color;
     speedSlider.value      = String(this.#gradient.speed);
     document.getElementById('speedValue').textContent = String(this.#gradient.speed);