From 615dcd5f8955499e89b2e1c89ed0b7123cde81ef Mon Sep 17 00:00:00 2001
From: Noelle Leigh <5957867+noelleleigh@users.noreply.github.com>
Date: Mon, 19 Aug 2024 20:55:15 -0400
Subject: [PATCH] main.js: Improve dark mode

Make use of the [`color-scheme` meta tag][0] to style buttons and other
widgets to match the selected color scheme.

When the scheme is toggled, the `content` of the tag is set to "light"
or "dark" to tell the user agent how to theme input elements, which
should match the colors of the rest of the app.


[0]: https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme
---
 web/assets/main.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/web/assets/main.js b/web/assets/main.js
index 49da6ee..cdeb0f8 100644
--- a/web/assets/main.js
+++ b/web/assets/main.js
@@ -338,6 +338,12 @@ class ThemeToggler extends HTMLAnchorElement {
     this.innerText = "◑";
     this.setAttribute("aria-hidden", "true");
     this.style.cursor = "pointer";
+
+    // Add color-scheme meta tag to style buttons
+    const colorSchemeMeta = document.createElement("meta");
+    colorSchemeMeta.name = "color-scheme";
+    colorSchemeMeta.content = this.theme;
+    document.head.appendChild(colorSchemeMeta);
   }
 
   click() {
@@ -369,6 +375,7 @@ class ThemeToggler extends HTMLAnchorElement {
       $(".corner .bordered").style.border = "1px solid black";
       $$("a").forEach((e) => { e.style.color = "black" });
     }
+    $("meta[name=color-scheme]").content = this.theme;
   }
 }