dark mode elements inline javascript

2026-08-27 02:35:47 -07:00
parent a62378f79b
commit 99e01b3de3
2 changed files with 63 additions and 0 deletions
@@ -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>