120 lines
3.4 KiB
HTML
120 lines
3.4 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>
|
|
@view-transition {
|
|
navigation: auto;
|
|
}
|
|
|
|
p {
|
|
max-width: 66ch;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--pico-color: black;
|
|
--pico-background-color: white;
|
|
|
|
& .red {
|
|
color: black;
|
|
background: red;
|
|
}
|
|
}
|
|
|
|
:root:has(body.toggled) {
|
|
--pico-color: white;
|
|
--pico-background-color: rgb(19, 22.5, 30.5);
|
|
|
|
& .red {
|
|
color: red;
|
|
background: var(--pico-background-color);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--pico-color: white;
|
|
--pico-background-color: rgb(19, 22.5, 30.5);
|
|
|
|
& .red {
|
|
color: red;
|
|
background: var(--pico-background-color);
|
|
}
|
|
}
|
|
|
|
:root:has(body.toggled) {
|
|
--pico-color: black;
|
|
--pico-background-color: white;
|
|
|
|
& .red {
|
|
color: black;
|
|
background: red;
|
|
}
|
|
}
|
|
}
|
|
|
|
input {
|
|
transition-duration: 0.05s;
|
|
transition-property: outline;
|
|
transition-delay: 0s;
|
|
|
|
width: revert !important;
|
|
}
|
|
|
|
input:active {
|
|
outline: turquoise 5px solid;
|
|
}
|
|
</style>
|
|
<script type="module">
|
|
function toggleTheme_() {
|
|
fetch('./light-dark-toggle?ref=https%3A%2F%2Fpagwin.xyz%2Fstatic%2Fdemos%2Flight-dark-demo-4%2F')
|
|
if (!document.body.classList.contains("toggled")) {
|
|
document.body.classList.add("toggled")
|
|
}
|
|
else {
|
|
document.body.classList.remove("toggled")
|
|
}
|
|
}
|
|
function toggleTheme(e) {
|
|
e.preventDefault();
|
|
if (document.startViewTransition) {
|
|
document.startViewTransition(toggleTheme_);
|
|
}
|
|
else {
|
|
toggleTheme_();
|
|
}
|
|
}
|
|
window.addEventListener("load", () => {
|
|
document
|
|
.getElementById("full-demo")
|
|
.addEventListener("click", toggleTheme);
|
|
});
|
|
|
|
await navigator.serviceWorker.register("sw.js");
|
|
</script>
|
|
<p>Don't copy this code at all, it is for demo purposes only and is terrible code.</p>
|
|
<p class="red">Note: This demo makes use of a service worker meaning it won't work for hard reloads or if you have
|
|
javascript disabled</p>
|
|
<form action="./light-dark-toggle" method="get">
|
|
<input type="hidden" name="ref" value="https://pagwin.xyz/static/demos/light-dark-demo-4/">
|
|
<input id="full-demo" type="submit" value="Fully enhanced demo">
|
|
</form>
|
|
<form action="./light-dark-toggle" method="get">
|
|
<input type="hidden" name="ref" value="https://pagwin.xyz/static/demos/light-dark-demo-4/">
|
|
<input id="min-demo" type="submit" value="No javascript simulation">
|
|
</form>
|
|
</body>
|
|
|
|
</html>
|