started work on post
This commit is contained in:
Pagwin
parent
c3d37f1d4e
commit
d371520bb7
6 changed files with 85 additions and 154 deletions
18
posts/platonically-ideal-light-dark-toggle.md
Normal file
18
posts/platonically-ideal-light-dark-toggle.md
Normal file
|
|
@ -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]()
|
||||
67
static/demos/light-dark-demo-1/index.html
Normal file
67
static/demos/light-dark-demo-1/index.html
Normal file
|
|
@ -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 async>
|
||||
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>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<script type="module" src="script.js"></script>
|
||||
<meta http-equiv="content-security-policy" content="worker-src 'self';">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--
|
||||
in the context of github pages where we have no
|
||||
backend the form element is for demonstration
|
||||
rather than actual function in the demo
|
||||
in an implementation with a proper backend the
|
||||
form element would allow for the toggle button
|
||||
to work without Javascript
|
||||
-->
|
||||
<form action="" method="post">
|
||||
<!--
|
||||
hidden because if a user agent doesn't support
|
||||
CSS we don't want to show the light-dark toggle
|
||||
|
||||
id present so the css can make it visible again and js can grab it
|
||||
-->
|
||||
<input id="light_dark_toggle" type="submit" value="Toggle light/dark theme" hidden>
|
||||
</form>
|
||||
<p class="hide">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</p>
|
||||
<noscript>
|
||||
<p>While an implementation with a proper backened wouldn't need javascript this demo does due to being hosted on
|
||||
github pages. Specifically the javascript is needed to create a service worker to do the work a backend
|
||||
would be doing otherwise.</p>
|
||||
</noscript>
|
||||
<p>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</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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/"
|
||||
});
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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(`<html lang="en">`,
|
||||
`<html lang="en" toggletheme="${theme_toggled}">`);
|
||||
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));
|
||||
})
|
||||
Loading…
Reference in a new issue