more post work
This commit is contained in:
Pagwin
parent
d371520bb7
commit
e012cfa2f6
3 changed files with 146 additions and 2 deletions
|
|
@ -10,9 +10,30 @@ draft: true
|
||||||
tags: []
|
tags: []
|
||||||
---
|
---
|
||||||
|
|
||||||
Many blogs have a button you can use to toggle between their light and dark themes.
|
Many blogs and other sites have a way to toggle between their light and dark themes.
|
||||||
Unfortunately this button is often done in the obvious way which has issues.
|
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
|
## The Obvious Way
|
||||||
|
|
||||||
[demo]()
|
[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
67
static/demos/light-dark-demo-2/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>
|
||||||
|
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
56
static/demos/light-dark-demo-3/index.html
Normal 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>
|
||||||
Loading…
Reference in a new issue