From e012cfa2f63c900ba7c2cdf2a80954524b37ce8f Mon Sep 17 00:00:00 2001
From: Pagwin <pgp2024@pagwin.xyz>
Date: Fri, 22 Aug 2025 12:48:57 -0400
Subject: [PATCH] more post work

---
 posts/platonically-ideal-light-dark-toggle.md | 25 ++++++-
 static/demos/light-dark-demo-2/index.html     | 67 +++++++++++++++++++
 static/demos/light-dark-demo-3/index.html     | 56 ++++++++++++++++
 3 files changed, 146 insertions(+), 2 deletions(-)
 create mode 100644 static/demos/light-dark-demo-2/index.html
 create mode 100644 static/demos/light-dark-demo-3/index.html
diff --git a/posts/platonically-ideal-light-dark-toggle.md b/posts/platonically-ideal-light-dark-toggle.md
index 2ec0aef..94d021a 100644
--- a/posts/platonically-ideal-light-dark-toggle.md
+++ b/posts/platonically-ideal-light-dark-toggle.md
@@ -10,9 +10,30 @@ draft: true
 tags: []
 ---
 
-Many blogs have a button you can use to toggle between their light and dark themes.
-Unfortunately this button is often done in the obvious way which has issues.
+Many blogs and other sites have a way to toggle between their light and dark themes.
+However many of these toggles are... not ideal, making various tradeoffs.
+So I thought it'd be interesting to explore these tradeoffs and throw my own hat into the ring with a potentially better solution.
+
+<a href="https://xkcd.com/927/"><img src="https://imgs.xkcd.com/comics/standards_2x.png"></a>
+
+## What Does it Mean to be Ideal?
+
 
 ## The Obvious Way
 
 [demo]()
+
+## A Suboptimal Solution
+
+A trick from from [](https://www.joshwcomeau.com/react/dark-mode/)
+
+[demo]()
+
+
+## An Ideal Stateless Toggle
+
+[demo]()
+
+## An ideal solution
+
+
diff --git a/static/demos/light-dark-demo-2/index.html b/static/demos/light-dark-demo-2/index.html
new file mode 100644
index 0000000..ba3e9dc
--- /dev/null
+++ b/static/demos/light-dark-demo-2/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <title>Demo of the simplest implementation of a light/dark theme toggle</title>
+
+</head>
+
+<body>
+    <style>
+        @media (prefers-color-scheme: light) {
+            body {
+                color: black;
+                background: white;
+                --button-bg: #888;
+            }
+
+            body.toggled {
+                color: white;
+                background: black;
+                --button-bg: #888;
+
+            }
+        }
+
+        @media (prefers-color-scheme: dark) {
+            body {
+                color: white;
+                background: black;
+                --button-bg: #888;
+            }
+
+            body.toggled {
+                color: black;
+                background: white;
+                --button-bg: #888;
+            }
+        }
+
+        button {
+            color: inherit;
+            background: var(--button-bg);
+        }
+    </style>
+    <script>
+        function toggleTheme() {
+            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");
+            }
+        }
+        if (localStorage.getItem("toggled-theme") === "yes") {
+            document.body.classList.add("toggled");
+        }
+        console.log(localStorage.getItem("toggled-theme") === "yes");
+    </script>
+    <p>This is a basic demo, it needs Javascript to make the button work</p>
+    <button onclick="toggleTheme()">Toggle the theme</button>
+</body>
+
+</html>
diff --git a/static/demos/light-dark-demo-3/index.html b/static/demos/light-dark-demo-3/index.html
new file mode 100644
index 0000000..c9ef8e8
--- /dev/null
+++ b/static/demos/light-dark-demo-3/index.html
@@ -0,0 +1,56 @@
+<!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;
+                --button-bg: #888;
+            }
+
+            :root:has(#light-dark-toggle:checked) {
+                --pico-color: white;
+                --pico-background-color: black;
+                --button-bg: #888;
+
+            }
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --pico-color: white;
+                --pico-background-color: black;
+                --button-bg: #888;
+            }
+
+            :root:has(#light-dark-toggle:checked) {
+                --pico-color: black;
+                --pico-background-color: white;
+                --button-bg: #888;
+            }
+        }
+
+        label {
+            display: inline;
+        }
+
+        p {
+            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>
+    <label for="light-dark-toggle">Toggle alt themeing:</label> <input name="light-dark-toggle" id="light-dark-toggle"
+        type="checkbox" role="switch">
+</body>
+
+</html>
