feat(website): add a persistent light and dark theme switch

scripts/test-website.py

@@ -401,7 +401,7 @@ class WebsiteTranslationChecks(unittest.TestCase):
                 server.shutdown()
                 worker.join()
 
-    def test_every_reading_page_offers_light_and_dark_theme_colors(self):
+    def test_every_reading_page_loads_theme_before_styles(self):
         site = ROOT / "website/_site"
         english_pages = reading_pages(ROOT / "website/public")
         self.assertTrue(english_pages)
@@ -412,10 +412,20 @@ class WebsiteTranslationChecks(unittest.TestCase):
                 for path in {original, site / relative if code == "en" else site / code / relative}:
                     with self.subTest(language=code, page=str(path.relative_to(ROOT))):
                         doc = Document(path.read_text())
-                        media = sorted(node.attrs.get("media") for node in doc.nodes if node.tag == "meta" and node.attrs.get("name") == "theme-color")
-                        self.assertEqual(media, ["(prefers-color-scheme: dark)", "(prefers-color-scheme: light)"])
-        styles = (ROOT / "website/public/assets/styles.css").read_text()
-        self.assertTrue("@media (prefers-color-scheme: dark)" in styles, "styles.css has no dark color scheme block")
+                        colors = [node for node in doc.nodes if node.tag == "meta" and node.attrs.get("name") == "theme-color"]
+                        self.assertEqual(len(colors), 1)
+                        self.assertEqual(colors[0].attrs.get("content"), "#ffffff")
+                        self.assertNotIn("media", colors[0].attrs)
+                        theme = [node for node in doc.nodes if node.tag == "script" and (node.attrs.get("src") or "").endswith("/assets/theme.js")]
+                        self.assertEqual(len(theme), 1)
+                        for deferred in ("defer", "async", "type"):
+                            self.assertNotIn(deferred, theme[0].attrs)
+                        stylesheet = next(node for node in doc.nodes if node.tag == "link" and node.attrs.get("rel") == "stylesheet")
+                        self.assertLess(theme[0].start, stylesheet.start)
+                        toggle = [node for node in doc.nodes if "data-theme-toggle" in node.attrs]
+                        self.assertEqual(len(toggle), 1)
+                        self.assertEqual(toggle[0].tag, "button")
+                        self.assertIn("hidden", toggle[0].attrs)
 
 
 if __name__ == "__main__":

scripts/website.py

@@ -119,7 +119,7 @@ def shared_blocks(root, path, source):
     templates = root / "website/templates"
     return {
         name: indent(Template((templates / f"{name}.html.tmpl").read_text(encoding="utf-8")).substitute(values), "    ")
-        for name in ("sharing", "header", "footer")
+        for name in ("sharing", "theme", "header", "footer")
     }