From 1fc367ad71d733a6c008cb3e2fe0ee96332cf780 Mon Sep 17 00:00:00 2001
From: nate smith <nateksmith@pm.me>
Date: Mon, 19 Feb 2024 14:52:58 -0800
Subject: [PATCH] theme toggler

---
 assets/main.js       | 26 ++++++++++++++++++++++++++
 templates/index.tmpl |  2 +-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/assets/main.js b/assets/main.js
index 9802dbc..3ece74d 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -24,6 +24,7 @@ class SourceShower extends Button {
     this.innerText = "?"
     this.setAttribute("title", "show source");
   }
+
   click() {
     this.closest("div.line").querySelector("p[is=source-text]").toggle()
     if (this.innerHTML.includes("strong")) {
@@ -293,8 +294,33 @@ class SourceText extends HTMLParagraphElement {
   }
 }
 
+class ThemeToggler extends HTMLAnchorElement {
+  constructor() {
+    super();
+    this.addEventListener("click", this.click);
+    this.theme = "light";
+    this.innerText = "◑";
+    this.setAttribute("aria-hidden", "true");
+    this.style.cursor = "pointer";
+  }
+  click() {
+    if (this.theme == "light") {
+      this.theme = "dark";
+      $("body").style.background = "black";
+      $("body").style.color = "white";
+      $$("a").forEach((e) => { e.style.color = "white" });
+    } else {
+      this.theme = "light";
+      $("body").style.background = "white";
+      $("body").style.color = "black";
+      $$("a").forEach((e) => { e.style.color = "black" });
+    }
+  }
+}
+
 const reorder = new CustomEvent("reorder", {bubbles: true});
 const edited = new CustomEvent("edited", {bubbles: true});
+customElements.define("theme-toggler", ThemeToggler, { extends: "a" });
 customElements.define("source-text", SourceText, { extends: "p" });
 customElements.define("source-shower", SourceShower, { extends: "button" });
 customElements.define("line-remover", LineRemover, { extends: "button" });
diff --git a/templates/index.tmpl b/templates/index.tmpl
index bc43bf1..16bf5e9 100644
--- a/templates/index.tmpl
+++ b/templates/index.tmpl
@@ -41,7 +41,7 @@ div.line:not(.unpinned) > .linetext {
     <div style="display:inline-block; width:20% "></div>
     <div id="pagecontrols" style="display:inline-block;">
       <a href="/about">about</a>
-      <a id="togglescheme" href="/#togglescheme">light|dark</a>
+      <a is="theme-toggler"></a>
     </div>
     <p>
       <button is="poem-resetter">new</button>