Theming

[thekid]

Using :has as shown in https://youtu.be/jJcO-IZJalQ e.g.?

[thekid]

https://caniuse.com/?search=%3Ahas - FireFox doesn't have support for this. The JavaScript solution is really easy though:

$toggle.addEventListener('click', function() {
  document.querySelector('body').classList.toggle('dark');
});

[thekid]

Dark

Light

Implemented by these changes:

diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars
index 7dc4883..55e46c5 100755
--- a/src/main/handlebars/layout.handlebars
+++ b/src/main/handlebars/layout.handlebars
@@ -47,14 +47,15 @@

     /* Dialog */
     body {
-      background-color: black;
-      color: white;
+      background-color: #eee;
+      color: black;
       font-family: 'Overpass',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
     }

     h1 {
       font-size: 1.7rem;
       margin-bottom: 1rem;
+      color: #444;
     }

     a {
@@ -73,7 +74,7 @@
       margin: 0;
       padding: 0;
       list-style-type: none;
-      background-color: #111;
+      background-color: white;
     }

     nav li {
@@ -101,7 +102,7 @@
       padding: 1rem;
       width: 1023px;
       max-width: 1023px;
-      background-color: #222;
+      background-color: white;
       border-bottom-left-radius: .25rem;
       border-bottom-right-radius: .25rem;
     }
@@ -119,6 +120,7 @@
       margin: 1rem;
       letter-spacing: .25rem;
       display: inline-block;
+      color: white;
     }

     article.intro {
@@ -210,11 +212,11 @@
     }

     section h2 a {
-      color: white;
+      color: black;
     }

     .meta, .meta a {
-      color: #ccc;
+      color: #666;
     }

     ul.locations {
@@ -306,7 +308,7 @@
       aspect-ratio: 15 / 10;
       object-fit: cover;
       border-radius: .25rem;
-      box-shadow: .5rem .5rem 1rem rgb(0 0 0 / .2);
+      box-shadow: .25rem .25rem 1rem rgb(0 0 0 / .2);
     }

     .images video {

[thekid]

Toggle button could use this:

https://fontawesome.com/icons/circle-half-stroke?s=solid&f=classic

[thekid]

Released in https://github.com/thekid/dialog/releases/tag/v1.7.0