diff --git a/index.html b/index.html
index ca20e5e..3dd807b 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
-
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
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();