Pagwin/new_blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

4th demo draft done

Browse source
This commit is contained in:
Pagwin 2025-08-22 13:26:40 -04:00
parent f978f92056
commit 2a8edbcebf
3 changed files with 83 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
static/demos/light-dark-demo-3/index.html
View file

@ -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>

79
static/demos/light-dark-demo-4/index.html Normal file
View file

@ -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>

3
static/demos/light-dark-demo-4/sw.js Normal file
View file

@ -0,0 +1,3 @@
self.addEventListener("fetch", event =>{
event.respondWith("hi");
})