From 2a8edbcebfc458f15dc6afa992ef5de1c85e8027 Mon Sep 17 00:00:00 2001
From: Pagwin <pgp2024@pagwin.xyz>
Date: Fri, 22 Aug 2025 13:26:40 -0400
Subject: [PATCH] 4th demo draft done

---
 static/demos/light-dark-demo-3/index.html |  3 +-
 static/demos/light-dark-demo-4/index.html | 79 +++++++++++++++++++++++
 static/demos/light-dark-demo-4/sw.js      |  3 +
 3 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 static/demos/light-dark-demo-4/index.html
 create mode 100644 static/demos/light-dark-demo-4/sw.js
diff --git a/static/demos/light-dark-demo-3/index.html b/static/demos/light-dark-demo-3/index.html
index c9ef8e8..5cedb71 100644
--- a/static/demos/light-dark-demo-3/index.html
+++ b/static/demos/light-dark-demo-3/index.html
@@ -47,8 +47,7 @@
             max-width: 65ch;
         }
     </style>
-    <p>This is a basic demo, unlike the other demos it doesn't need javascript to work, Pico CSS was used for some basic
-        styling but this technique works without it</p>
+    <p>This is a basic demo, unlike the other demos it doesn't need javascript to work</p>
     <label for="light-dark-toggle">Toggle alt themeing:</label> <input name="light-dark-toggle" id="light-dark-toggle"
         type="checkbox" role="switch">
 </body>
diff --git a/static/demos/light-dark-demo-4/index.html b/static/demos/light-dark-demo-4/index.html
new file mode 100644
index 0000000..8cdc520
--- /dev/null
+++ b/static/demos/light-dark-demo-4/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <title>Demo of the simplest implementation of a light/dark theme toggle</title>
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+</head>
+
+<body>
+    <style>
+        @media (prefers-color-scheme: light) {
+            :root {
+                --pico-color: black;
+                --pico-background-color: white;
+            }
+
+            :root:has(body.toggled) {
+                --pico-color: white;
+                --pico-background-color: black;
+
+            }
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --pico-color: white;
+                --pico-background-color: black;
+            }
+
+            :root:has(body.toggled) {
+                --pico-color: black;
+                --pico-background-color: white;
+            }
+        }
+
+        button {
+            transition-duration: 0.05s;
+            transition-property: outline;
+            transition-delay: 0s;
+        }
+
+        button:active {
+            outline: turquoise 5px solid;
+        }
+    </style>
+    <script type="module">
+        function toggleTheme(e) {
+            e.preventDefault();
+
+            if (!document.body.classList.contains("toggled")) {
+                document.body.classList.add("toggled")
+                localStorage.setItem("toggled-theme", "yes");
+            }
+            else {
+                document.body.classList.remove("toggled")
+                localStorage.setItem("toggled-theme", "no");
+            }
+        }
+        window.addEventListener("load", () => {
+            document
+                .getElementById("full-demo")
+                .addEventListener("click", toggleTheme);
+        });
+
+        await navigator.serviceWorker.register("sw.js");
+    </script>
+    <p>Here is some example text</p>
+    <form action="" method="get">
+        <input id="full-demo" type="submit" value="Fully enhanced demo">
+    </form>
+    <form action="" method="get">
+        <input id="min-demo" type="submit" value="No javascript simulation">
+    </form>
+</body>
+
+</html>
diff --git a/static/demos/light-dark-demo-4/sw.js b/static/demos/light-dark-demo-4/sw.js
new file mode 100644
index 0000000..b358a77
--- /dev/null
+++ b/static/demos/light-dark-demo-4/sw.js
@@ -0,0 +1,3 @@
+self.addEventListener("fetch", event =>{
+    event.respondWith("hi");
+})
