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

more post work

Browse source
This commit is contained in:
Pagwin 2025-08-22 12:48:57 -04:00
parent d371520bb7
commit e012cfa2f6
3 changed files with 146 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
posts/platonically-ideal-light-dark-toggle.md
View file

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

67
static/demos/light-dark-demo-2/index.html Normal file
View 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>
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>

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

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