From d371520bb7f1e944c15a90729c8b73f62d1fb622 Mon Sep 17 00:00:00 2001 From: Pagwin Date: Wed, 20 Aug 2025 14:47:28 -0400 Subject: [PATCH] started work on post --- posts/platonically-ideal-light-dark-toggle.md | 18 +++++ static/demos/light-dark-demo-1/index.html | 67 +++++++++++++++++++ .../demos/light-dark-superior_v1/index.html | 40 ----------- static/demos/light-dark-superior_v1/script.js | 39 ----------- static/demos/light-dark-superior_v1/style.css | 35 ---------- static/demos/light-dark-superior_v1/sw.js | 40 ----------- 6 files changed, 85 insertions(+), 154 deletions(-) create mode 100644 posts/platonically-ideal-light-dark-toggle.md create mode 100644 static/demos/light-dark-demo-1/index.html delete mode 100644 static/demos/light-dark-superior_v1/index.html delete mode 100644 static/demos/light-dark-superior_v1/script.js delete mode 100644 static/demos/light-dark-superior_v1/style.css delete mode 100644 static/demos/light-dark-superior_v1/sw.js diff --git a/posts/platonically-ideal-light-dark-toggle.md b/posts/platonically-ideal-light-dark-toggle.md new file mode 100644 index 0000000..2ec0aef --- /dev/null +++ b/posts/platonically-ideal-light-dark-toggle.md @@ -0,0 +1,18 @@ +--- +title: "Making a platonically ideal light/dark theme toggle on the web" + +description: "" + +date: "2025-08-20" + +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. + +## The Obvious Way + +[demo]() diff --git a/static/demos/light-dark-demo-1/index.html b/static/demos/light-dark-demo-1/index.html new file mode 100644 index 0000000..7b7198b --- /dev/null +++ b/static/demos/light-dark-demo-1/index.html @@ -0,0 +1,67 @@ + + + + + + + Demo of the simplest implementation of a light/dark theme toggle + + + + + + +

This is a basic demo, it needs Javascript to make the button work

+ + + + diff --git a/static/demos/light-dark-superior_v1/index.html b/static/demos/light-dark-superior_v1/index.html deleted file mode 100644 index 488ec4e..0000000 --- a/static/demos/light-dark-superior_v1/index.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - - - - - -
- - -
-

Light and/or dark theming is only applicable if you have CSS, if you see this then either the CSS - hasn't loaded yet or your user agent doesn't support CSS

- -

Hello this is some text, should be black on white background if you're light theme and white on black background - if you're dark theme

- - - diff --git a/static/demos/light-dark-superior_v1/script.js b/static/demos/light-dark-superior_v1/script.js deleted file mode 100644 index 4237110..0000000 --- a/static/demos/light-dark-superior_v1/script.js +++ /dev/null @@ -1,39 +0,0 @@ -"use strict"; - -const toggle_button = document.body.querySelector("#light_dark_toggle"); -const root = document.body.parentElement; - -toggle_button.addEventListener("click", (event) => { - - // js will handle the needed logic so no need for a HTTP form submission - event.preventDefault(); - - - // !== 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 - // if you're using them for anything else but for this - // use case I see no reason to care - document.cookie = `theme_toggled=${theme_toggled}`; - - - root.setAttribute("toggletheme", theme_toggled); -}); - -// If you wanna implement this for a site with a backend -// then feel free to ignore everything below I need it because -// I'm using github pages to host this rather than a proper -// backend -if (!("serviceWorker" in navigator)) { - alert("Your browser doesn't support service workers so this demo won't work properly."); - -} -else setupServiceWorker(); -async function setupServiceWorker() { - await navigator.serviceWorker.register("sw.js", { - scope: "/static/demos/light-dark-superior_v1/" - }); -} diff --git a/static/demos/light-dark-superior_v1/style.css b/static/demos/light-dark-superior_v1/style.css deleted file mode 100644 index ec46555..0000000 --- a/static/demos/light-dark-superior_v1/style.css +++ /dev/null @@ -1,35 +0,0 @@ -.hide { - display: none; -} - -@media (prefers-color-scheme: dark){ - :root { - --background-color: black; - --text-color: white; - } - :root[toggletheme="true"]{ - --background-color: white; - --text-color: black; - } -} -@media (prefers-color-scheme: light){ - :root { - --background-color: white; - --text-color: black; - } - :root[toggletheme="true"]{ - --background-color: black; - --text-color: white; - } -} - -p { - color: var(--text-color); -} -body { - background: var(--background-color); -} - -#light_dark_toggle{ - display:block; -} diff --git a/static/demos/light-dark-superior_v1/sw.js b/static/demos/light-dark-superior_v1/sw.js deleted file mode 100644 index ebbfad3..0000000 --- a/static/demos/light-dark-superior_v1/sw.js +++ /dev/null @@ -1,40 +0,0 @@ -"use strict"; - -// @returns Response -// https://developer.mozilla.org/en-US/docs/Web/API/Response -async function fetchResponse(event) { - //https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent/request - //https://developer.mozilla.org/en-US/docs/Web/API/Request - const { request } = event; - const resp = await fetch(request); - const body = await resp.text(); - console.log(request.headers); - const cookies = request.headers.getSetCookie(); - console.log(cookies); - let theme_toggled = false; - for (let cookie of cookies) { - const [key, value] = cookie.split("="); - if (key != "theme_toggled") { - continue; - } - theme_toggled = value[0] === "t"; - } - // this is a somewhat brittle way of accomplishing our desired behavior - const new_body = body.replace(``, - ``); - console.log(new_body); - return new Response(new_body, resp); -} - -// needed if we actually want to get requests -//self.addEventListener('activate', (event) => event.waitUntil(self.clients.claim())); - -self.addEventListener('fetch', (event) => { - console.log("Fetch:", event.request.url); - if (!event.request.url.endsWith(".html") && event.request.url.match("pagwin.xyz/.+\\..+") !== null) { - console.log("blocked"); - return; - } - //https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent/respondWith - event.respondWith(fetchResponse(event)); -})