From 99e01b3de3588ce428f8b77faa4ead84999079dc Mon Sep 17 00:00:00 2001
From: Brandon Shipley <bshipley@hipowered.dev>
Date: Thu, 27 Aug 2026 02:35:47 -0700
Subject: [PATCH] dark mode elements inline javascript

---
 .../element/javascript/dark_mode_bottom.php   | 37 +++++++++++++++++++
 .../element/javascript/dark_mode_top.php      | 26 +++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 templates/element/javascript/dark_mode_bottom.php
 create mode 100644 templates/element/javascript/dark_mode_top.php

diff --git a/templates/element/javascript/dark_mode_bottom.php b/templates/element/javascript/dark_mode_bottom.php
new file mode 100644
index 0000000..09d4cf3
--- /dev/null
+++ b/templates/element/javascript/dark_mode_bottom.php
@@ -0,0 +1,37 @@
+<?php
+/**
+ * @var \App\View\AppView $this
+ */
+
+?>
+<script>
+    document.addEventListener('DOMContentLoaded', function (e) {
+        const toggleDarkLink = document.getElementById('toggle-dark-mode');
+        const toggleLightLink = document.getElementById('toggle-light-mode');
+        const toggleAutoLink = document.getElementById('toggle-auto-mode');
+        if (toggleDarkLink) {
+            toggleDarkLink.addEventListener('click', function (e) {
+                e.preventDefault();
+                localStorage.theme = 'dark';
+                document.documentElement.classList.add('dark');
+                document.documentElement.classList.remove('auto');
+            });
+        }
+        if (toggleLightLink) {
+            toggleLightLink.addEventListener('click', function (e) {
+                e.preventDefault();
+                localStorage.theme = 'light';
+                document.documentElement.classList.remove('auto');
+                document.documentElement.classList.remove('dark');
+            });
+        }
+        if (toggleAutoLink) {
+            toggleAutoLink.addEventListener('click', function (e) {
+                e.preventDefault();
+                localStorage.theme = 'auto';
+                document.documentElement.classList.add('auto');
+                document.documentElement.classList.remove('dark');
+            });
+        }
+    })
+</script>
diff --git a/templates/element/javascript/dark_mode_top.php b/templates/element/javascript/dark_mode_top.php
new file mode 100644
index 0000000..8dd442d
--- /dev/null
+++ b/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>
+