From 399b98db55ac16a4d70b77a139b5f2f9a317cd8a Mon Sep 17 00:00:00 2001
From: =?utf8?q?Rapha=C3=ABl=20Jakse?= <raphael.trivabble@jakse.fr>
Date: Sun, 3 Aug 2025 14:09:02 +0200
Subject: [PATCH] #21: add a color theme switch

---
 l10n/po/fr/trivabble.po | 12 ++++++++
 l10n/pot/trivabble.pot  | 12 ++++++++
 public/index.html       |  7 +++++
 public/trivabble.js     | 61 ++++++++++++++++++++++++++++++++++++++++-
 4 files changed, 91 insertions(+), 1 deletion(-)

diff --git a/l10n/po/fr/trivabble.po b/l10n/po/fr/trivabble.po
index 61537e1..9ee37fe 100644
--- a/l10n/po/fr/trivabble.po
+++ b/l10n/po/fr/trivabble.po
@@ -256,6 +256,18 @@ msgstr "{0} h {1} min {2} s"
 msgid  "{0}' {1}''"
 msgstr "{0} min {1}"
 
+msgid  "Theme:"
+msgstr "Thème :"
+
+msgid "Auto"
+msgstr "Automatique"
+
+msgid  "Dark"
+msgstr "Sombre"
+
+msgid  "Light"
+msgstr "Clair"
+
 msgid  "Show the timer"
 msgstr "Chronométrer la partie"
 
diff --git a/l10n/pot/trivabble.pot b/l10n/pot/trivabble.pot
index 4dd5c9f..7198382 100644
--- a/l10n/pot/trivabble.pot
+++ b/l10n/pot/trivabble.pot
@@ -262,6 +262,18 @@ msgstr ""
 msgid  "{0}' {1}''"
 msgstr ""
 
+msgid  "Theme:"
+msgstr ""
+
+msgid "Auto"
+msgstr ""
+
+msgid  "Dark"
+msgstr ""
+
+msgid  "Light"
+msgstr ""
+
 msgid  "Show the timer"
 msgstr ""
 
diff --git a/public/index.html b/public/index.html
index 7b98c1c..921aae1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -64,6 +64,13 @@
                     <h1 data-l10n="text-content">Settings</h1>
                     <button class="modal-button" id="btn-settings-close">&#215;</button>
                 </div>
+                <div>
+                    <p><label><span data-l10n="text-content">Theme:</span> <select id="theme">
+                        <option value="" data-l10n="text-content">Auto</option>
+                        <option value="dark" data-l10n="text-content">Dark</option>
+                        <option value="light" data-l10n="text-content">Light</option>
+                    </select></label></p>
+                </div>
                 <div>
                     <p><label><input type="checkbox" id="enable-timer" /> <span data-l10n="text-content">Show the timer</span></label></p>
 		        </div>
diff --git a/public/trivabble.js b/public/trivabble.js
index 105f889..bb305ad 100644
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -161,6 +161,7 @@
         GameNumber: "number",
         BoardLabel: "string",
         Lang: "string",
+        Theme: "string",
         PlayerName: "string",
         CheckFirstWord: "number",
         FreezePlayedTiles: "number",
@@ -1778,7 +1779,13 @@
             }
         );
     }
-    
+
+    function onChangeTheme() {
+        console.log(document.getElementById("theme").value);
+        setSetting("Theme", document.getElementById("theme").value);
+        handleTheme();
+    }
+
     function onChangeBoardLabel() {
         const label = document.getElementById("board-label").value;
 
@@ -2608,6 +2615,7 @@
         document.getElementById("next-help-msg").onclick = nextHelpMessage;
         document.getElementById("disable-spell-checker").onclick = toggleSpellChecker;
         document.getElementById("score-words").onclick = scoreWords;
+        document.getElementById("theme").onchange = onChangeTheme;
         window.addEventListener("keydown", function (e) {
             if (e.key === "Escape") {
                 document.querySelector(".modal").classList.remove("show-modal");
@@ -2655,6 +2663,8 @@
             document.getElementById("board-label").value = getSetting("BoardLabel");
         }
 
+        document.getElementById("theme").value = getSetting("Theme", "");
+
         startGame(getSetting("GameNumber"));
     }
 
@@ -2778,7 +2788,56 @@
         content.style.zoom = candidateScale;
     }
 
+    // thanks https://mybyways.com/blog/forcing-dark-mode-with-prefs-color-scheme-media-query
+    function setPreferredColorScheme(mode) {
+        console.log("SETPREFERREDCOLORSCHEME", mode);
+        const rules = document.styleSheets[0].rules;
+        const len = rules.length;
+        for (var i = len - 1; i >= 0; i--) {
+            const rule = rules[i].media;
+            if (rule.mediaText.includes("prefers-color-scheme")) {
+                switch (mode) {
+                    case "light":
+                        rule.appendMedium("original-prefers-color-scheme");
+                        if (rule.mediaText.includes("light")) {
+                            rule.deleteMedium("(prefers-color-scheme: light)");
+                        }
+                        if (rule.mediaText.includes("dark")) {
+                            rule.deleteMedium("(prefers-color-scheme: dark)");
+                        }
+                        break;
+                    case "dark":
+                        rule.appendMedium("(prefers-color-scheme: light)");
+                        rule.appendMedium("(prefers-color-scheme: dark)");
+                        if (rule.mediaText.includes("original")) {
+                            rule.deleteMedium("original-prefers-color-scheme");
+                        }
+                        break;
+                    default:
+                        rule.appendMedium("(prefers-color-scheme: dark)");
+                        if (rule.mediaText.includes("light")) {
+                            rule.deleteMedium("(prefers-color-scheme: light)");
+                        }
+                        if (rule.mediaText.includes("original")) {
+                            rule.deleteMedium("original-prefers-color-scheme");
+                        }
+                    }
+                break;
+            }
+        }
+    }
+
+    function handleTheme() {
+        setPreferredColorScheme(getSetting("Theme", ""));
+    }
+
+    function initTheme() {
+        window.matchMedia('(prefers-color-scheme: dark)').addListener(handleTheme);
+        handleTheme();
+    }
+
     function load() {
+        initTheme();
         initLang();
         loadBagSVG();
     }
-- 
2.30.2