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

transitioned demos 1 and 2 to picocss for looks

Browse source
This commit is contained in:
Pagwin 2025-08-22 13:01:19 -04:00
parent e012cfa2f6
commit f978f92056
2 changed files with 40 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
static/demos/light-dark-demo-1/index.html
View file

@ -6,42 +6,44 @@
<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) {
body {
color: black;
background: white;
--button-bg: #888;
:root {
--pico-color: black;
--pico-background-color: white;
}
body.toggled {
color: white;
background: black;
--button-bg: #888;
:root:has(body.toggled) {
--pico-color: white;
--pico-background-color: black;
}
}
@media (prefers-color-scheme: dark) {
body {
color: white;
background: black;
--button-bg: #888;
:root {
--pico-color: white;
--pico-background-color: black;
}
body.toggled {
color: black;
background: white;
--button-bg: #888;
:root:has(body.toggled) {
--pico-color: black;
--pico-background-color: white;
}
}
button {
color: inherit;
background: var(--button-bg);
transition-duration: 0.05s;
transition-property: outline;
transition-delay: 0s;
}
button:active {
outline: turquoise 5px solid;
}
</style>
<script async>

38
static/demos/light-dark-demo-2/index.html
View file

@ -6,42 +6,44 @@
<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) {
body {
color: black;
background: white;
--button-bg: #888;
:root {
--pico-color: black;
--pico-background-color: white;
}
body.toggled {
color: white;
background: black;
--button-bg: #888;
:root:has(body.toggled) {
--pico-color: white;
--pico-background-color: black;
}
}
@media (prefers-color-scheme: dark) {
body {
color: white;
background: black;
--button-bg: #888;
:root {
--pico-color: white;
--pico-background-color: black;
}
body.toggled {
color: black;
background: white;
--button-bg: #888;
:root:has(body.toggled) {
--pico-color: black;
--pico-background-color: white;
}
}
button {
color: inherit;
background: var(--button-bg);
transition-duration: 0.05s;
transition-property: outline;
transition-delay: 0s;
}
button:active {
outline: turquoise 5px solid;
}
</style>
<script>