55 lines
1.4 KiB
HTML
55 lines
1.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>
|
|
@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: rgb(19, 22.5, 30.5);
|
|
--button-bg: #888;
|
|
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--pico-color: white;
|
|
--pico-background-color: rgb(19, 22.5, 30.5);
|
|
--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</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>
|