@@ -828,6 +928,9 @@ function htmlPage(): string {
const timelineAxis = mustGet("timeline-axis");
const timelineRange = mustGet("timeline-range");
const timelineUnit = mustGet("timeline-unit");
+ const themeToggle = mustGet("theme-toggle");
+ const themeToggleIcon = mustGet("theme-toggle-icon");
+ const themeToggleLabel = mustGet("theme-toggle-label");
const shareUrl = mustGet("share-url");
const shareStatus = mustGet("share-status");
const loadShare = mustGet("load-share");
@@ -841,6 +944,35 @@ function htmlPage(): string {
return element;
}
+ function setTheme(theme) {
+ const resolvedTheme = theme === "light" ? "light" : "dark";
+ document.body.dataset.theme = resolvedTheme;
+ localStorage.setItem("theme", resolvedTheme);
+
+ if (resolvedTheme === "dark") {
+ themeToggleLabel.textContent = "Light mode";
+ themeToggle.setAttribute("aria-label", "Switch to light mode");
+ themeToggleIcon.innerHTML =
+ '
";
+ } else {
+ themeToggleLabel.textContent = "Dark mode";
+ themeToggle.setAttribute("aria-label", "Switch to dark mode");
+ themeToggleIcon.innerHTML =
+ '
";
+ }
+ }
+
+ const storedTheme = localStorage.getItem("theme");
+ setTheme(storedTheme === "light" ? "light" : "dark");
+ themeToggle.addEventListener("click", () => {
+ setTheme(document.body.dataset.theme === "dark" ? "light" : "dark");
+ });
+
function formatDate(value) {
if (!value) {
return "no timestamp";