69 lines
1.9 KiB
HTML
69 lines
1.9 KiB
HTML
<!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: rgb(19, 22.5, 30.5);
|
|
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--pico-color: white;
|
|
--pico-background-color: rgb(19, 22.5, 30.5);
|
|
}
|
|
|
|
: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 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>
|