From 7ba394a5d27d553d376a3a9b9849727af48d37e0 Mon Sep 17 00:00:00 2001
From: Pagwin <pgp2024@pagwin.xyz>
Date: Fri, 3 Jan 2025 22:18:11 -0500
Subject: [PATCH] checkbox out html attr in

---
 static/demos/light-dark-superior_v1/index.html |  9 ---------
 static/demos/light-dark-superior_v1/script.js  | 14 +++++---------
 static/demos/light-dark-superior_v1/style.css  |  4 ++--
 static/demos/light-dark-superior_v1/sw.js      |  6 +++---
 4 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/static/demos/light-dark-superior_v1/index.html b/static/demos/light-dark-superior_v1/index.html
index 64c36b2..488ec4e 100644
--- a/static/demos/light-dark-superior_v1/index.html
+++ b/static/demos/light-dark-superior_v1/index.html
@@ -18,15 +18,6 @@
         to work without Javascript
     -->
     <form action="" method="post">
-        <!--
-            id present so service worker shenanigans are
-            more durable and css has something to latch
-            onto
-
-            hidden because the user should never see this
-            checkbox
-        -->
-        <input id="css_state" type="checkbox" hidden>
         <!--
             hidden because if a user agent doesn't support
             CSS we don't want to show the light-dark toggle
diff --git a/static/demos/light-dark-superior_v1/script.js b/static/demos/light-dark-superior_v1/script.js
index 4d247ed..4237110 100644
--- a/static/demos/light-dark-superior_v1/script.js
+++ b/static/demos/light-dark-superior_v1/script.js
@@ -1,13 +1,7 @@
 "use strict";
 
 const toggle_button = document.body.querySelector("#light_dark_toggle");
-const css_state_checkbox = document.body.querySelector("#css_state");
-
-// this does nothing but I was hoping it would let my LSP figure out 
-// that css_state_checkbox is an input element so the remaining code 
-// is valid
-// Real use case might still find this useful as self documenting code
-console.assert(css_state_checkbox instanceof HTMLInputElement);
+const root = document.body.parentElement;
 
 toggle_button.addEventListener("click", (event) => {
 
@@ -15,7 +9,9 @@ toggle_button.addEventListener("click", (event) => {
     event.preventDefault();
 
 
-    const theme_toggled = !css_state_checkbox.checked;
+    // !== could be used but the check is to see if the attribute is "true"
+    // this writing is intend to make that clearer
+    const theme_toggled = !(root.getAttribute("toggletheme")?.at(0) === "t");
 
     // set the cookie so backend/service worker can do it's thing
     // cookies have other options you may wanna set especially
@@ -24,7 +20,7 @@ toggle_button.addEventListener("click", (event) => {
     document.cookie = `theme_toggled=${theme_toggled}`;
 
 
-    css_state_checkbox.checked = theme_toggled;
+    root.setAttribute("toggletheme", theme_toggled);
 });
 
 // If you wanna implement this for a site with a backend
diff --git a/static/demos/light-dark-superior_v1/style.css b/static/demos/light-dark-superior_v1/style.css
index f4c02b5..ec46555 100644
--- a/static/demos/light-dark-superior_v1/style.css
+++ b/static/demos/light-dark-superior_v1/style.css
@@ -7,7 +7,7 @@
         --background-color: black;
         --text-color: white;
     }
-    :root:has(#css_state:checked){
+    :root[toggletheme="true"]{
         --background-color: white;
         --text-color: black;
     }
@@ -17,7 +17,7 @@
         --background-color: white;
         --text-color: black;
     }
-    :root:has(#css_state:checked){
+    :root[toggletheme="true"]{
         --background-color: black;
         --text-color: white;
     }
diff --git a/static/demos/light-dark-superior_v1/sw.js b/static/demos/light-dark-superior_v1/sw.js
index 3ab1902..6590a76 100644
--- a/static/demos/light-dark-superior_v1/sw.js
+++ b/static/demos/light-dark-superior_v1/sw.js
@@ -18,9 +18,9 @@ async function fetchResponse(event) {
         }
         theme_toggled = value[0] === "t";
     }
-    // this is a brittle way of accomplishing our desired behavior
-    body.replace(`<input id="css_state" type="checkbox" hidden>`,
-        `<input id="css_state" type="checkbox" hidden ${theme_toggled ? "checked" : ""}>`);
+    // this is a somewhat brittle way of accomplishing our desired behavior
+    body.replace(`<html lang="en">`,
+        `<html lang="en" toggletheme="${theme_toggled}">`);
     console.log(body);
     return new Response(body, resp);
 }