From 5e3c209d9f35d1db3eaa2e97ef118ef6df6b8ab4 Mon Sep 17 00:00:00 2001 From: andreslfdz Date: Sun, 5 Jul 2026 12:25:30 -0600 Subject: [PATCH] Add night mode theme --- index.html | 196 ++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 180 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index ca20e5e..3dd807b 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - +
+ +
🚂 @@ -273,15 +400,27 @@
- +
+ + + +
0 trains dispatched
@@ -297,8 +436,10 @@ const dispatcher = document.querySelector("#dispatcher"); const hero = document.querySelector("#hero"); + const themeButton = document.querySelector("#theme"); const muteButton = document.querySelector("#mute"); const counter = document.querySelector("#counter"); + const themeMeta = document.querySelector('meta[name="theme-color"]'); const choo = new Audio("./public/choo-choo.mp3"); choo.preload = "auto"; @@ -308,6 +449,7 @@ let lastLane = -1; let lastDirection = "rtl"; let muted = localStorage.getItem("wtc:muted") === "1"; + let nightMode = localStorage.getItem("wtc:theme") === "night"; function pick(items) { return items[Math.floor(Math.random() * items.length)]; @@ -320,6 +462,18 @@ localStorage.setItem("wtc:muted", muted ? "1" : "0"); } + function syncThemeButton() { + document.documentElement.dataset.theme = nightMode ? "night" : "day"; + themeButton.textContent = nightMode ? "☀️" : "🌙"; + themeButton.setAttribute( + "aria-label", + nightMode ? "Turn night mode off" : "Turn night mode on", + ); + themeButton.setAttribute("aria-pressed", String(nightMode)); + themeMeta.setAttribute("content", nightMode ? "#080b14" : "#fbfbfa"); + localStorage.setItem("wtc:theme", nightMode ? "night" : "day"); + } + function updateCounter() { const noun = count === 1 ? "train" : "trains"; counter.textContent = `${count} ${noun} dispatched`; @@ -398,6 +552,12 @@ } dispatcher.addEventListener("click", dispatchTrain); + themeButton.addEventListener("click", (event) => { + event.stopPropagation(); + nightMode = !nightMode; + syncThemeButton(); + }); + muteButton.addEventListener("click", (event) => { event.stopPropagation(); muted = !muted; @@ -411,9 +571,13 @@ } else if (event.key === "m" || event.key === "M") { muted = !muted; syncMuteButton(); + } else if (event.key === "n" || event.key === "N") { + nightMode = !nightMode; + syncThemeButton(); } }); + syncThemeButton(); syncMuteButton(); updateCounter();