From 3bfdded1407e8ea46ce0f5a04123281b9fa5f0de Mon Sep 17 00:00:00 2001
From: sHa <sha@shadoll.dev>
Date: Sat, 21 Feb 2026 23:50:00 +0200
Subject: [PATCH] feat: implement mobile theme color support in settings and
 index files

---
 index.html         |  3 +++
 src/js/settings.js | 15 +++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/index.html b/index.html
index 33e118a..4fc8c0b 100644
--- a/index.html
+++ b/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" />
diff --git a/src/js/settings.js b/src/js/settings.js
index c962f8f..5b22761 100644
--- a/src/js/settings.js
+++ b/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);