dark mode elements inline javascript

templates/element/javascript/dark_mode_top.php

@@ -0,0 +1,26 @@
+<?php
+/**
+ * @var \App\View\AppView $this
+ */
+
+?>
+<script>
+    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+    document.documentElement.classList.toggle(
+        "dark",
+        localStorage.theme === "dark" ||
+        (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
+    );
+    document.documentElement.classList.toggle(
+        "auto",
+        localStorage.theme === "auto"
+    );
+    // Whenever the user explicitly chooses light mode
+
+    // localStorage.theme = "light";
+    // // Whenever the user explicitly chooses dark mode
+    // localStorage.theme = "dark";
+    // // Whenever the user explicitly chooses to respect the OS preference
+    // localStorage.removeItem("theme");
+</script>
+