fixed minor mess up with demos for light dark

TODO

@@ -1,13 +1,13 @@
 - XSLT for atom feedhttps://developer.mozilla.org/en-US/docs/Web/XML/XSLT
-- get demo working (need to use message passing instead of cookies due to no cookies in service workers)
-- add button to save articles for offline reading
 - post jump points and table of contents (be wary of having this take up too much space on mobile) probably done with position: sticky in some way
     - make h elems have anchor elems with rel="bookmark" and a name to make them proper bookmarks, also add :target css as needed
 - Make references(the tiny number things) appear to the side instead of the bottom on desktop, try to make it bottom of page in print or bottom of print otherwise, might need grid or float hard to say atm
     - refer to implementation here https://blog.kizu.dev/repetition-and-attribution/
+    - Or just yolo that stuff with Anchor + css feature detection https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning
 - Fix articles with inline html in them and/or links
 - ico?
 - analytics
     https://github.com/electerious/Ackee
     https://umami.is/ (https://github.com/umami-software/umami)
 - search functionality
+

static/css/layout.css

@@ -313,3 +313,4 @@ a[href]:after {
 
 }
 }
+

static/demos/light-dark-demo-1/index.html

@@ -19,7 +19,7 @@
 
             :root:has(body.toggled) {
                 --pico-color: white;
-                --pico-background-color: black;
+                --pico-background-color: rgb(19, 22.5, 30.5);
 
             }
         }
@@ -27,7 +27,7 @@
         @media (prefers-color-scheme: dark) {
             :root {
                 --pico-color: white;
-                --pico-background-color: black;
+                --pico-background-color: rgb(19, 22.5, 30.5);
             }
 
             :root:has(body.toggled) {

static/demos/light-dark-demo-2/index.html

@@ -19,7 +19,7 @@
 
             :root:has(body.toggled) {
                 --pico-color: white;
-                --pico-background-color: black;
+                --pico-background-color: rgb(19, 22.5, 30.5);
 
             }
         }
@@ -27,7 +27,7 @@
         @media (prefers-color-scheme: dark) {
             :root {
                 --pico-color: white;
-                --pico-background-color: black;
+                --pico-background-color: rgb(19, 22.5, 30.5);
             }
 
             :root:has(body.toggled) {

static/demos/light-dark-demo-3/index.html

@@ -19,7 +19,7 @@
 
             :root:has(#light-dark-toggle:checked) {
                 --pico-color: white;
-                --pico-background-color: black;
+                --pico-background-color: rgb(19, 22.5, 30.5);
                 --button-bg: #888;
 
             }
@@ -28,7 +28,7 @@
         @media (prefers-color-scheme: dark) {
             :root {
                 --pico-color: white;
-                --pico-background-color: black;
+                --pico-background-color: rgb(19, 22.5, 30.5);
                 --button-bg: #888;
             }
 

static/demos/light-dark-demo-4/index.html

@@ -28,6 +28,7 @@
 
             :root:has(body.toggled) {
                 --pico-color: white;
+                --pico-background-color: rgb(19, 22.5, 30.5);
 
                 & .red {
                     color: red;
@@ -41,6 +42,7 @@
         @media (prefers-color-scheme: dark) {
             :root {
                 --pico-color: white;
+                --pico-background-color: rgb(19, 22.5, 30.5);
 
                 & .red {
                     color: red;