add dark mode button

fet2020/static/js/dark-mode.js

@@ -0,0 +1,79 @@
+const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+function setTheme(mode) {
+    if (mode !== "light" && mode !== "dark" && mode !== "auto") {
+        mode = "auto";
+    }
+
+    var themeToggleAutoIcon = document.getElementById('theme-icon-when-auto');
+    var themeToggleDarkIcon = document.getElementById('theme-icon-when-dark');
+    var themeToggleLightIcon = document.getElementById('theme-icon-when-light');
+
+    themeToggleAutoIcon.classList.add('hidden');
+    themeToggleDarkIcon.classList.add('hidden');
+    themeToggleLightIcon.classList.add('hidden');
+
+    if (mode === "dark") {
+        themeToggleDarkIcon.classList.remove('hidden');
+        document.documentElement.classList.add('dark');
+    } else if (mode === "auto") {
+        themeToggleAutoIcon.classList.remove('hidden');
+
+        if(prefersDark) {
+            document.documentElement.classList.add('dark');
+        }
+        else {
+            document.documentElement.classList.remove('dark');
+        }
+    } else {
+        document.documentElement.classList.remove('dark');
+        themeToggleLightIcon.classList.remove('hidden');
+    }
+
+    localStorage.setItem('color-theme', mode);
+}
+
+function cycleTheme() {
+    const currentTheme = localStorage.getItem('color-theme') || "auto";
+
+    if (prefersDark) {
+        // Auto (dark) -> Light -> Dark
+        if (currentTheme === "auto") {
+            setTheme("light");
+        } else if (currentTheme === "light") {
+            setTheme("dark");
+        } else {
+            setTheme("auto");
+        }
+    } else {
+        // Auto (light) -> Dark -> Light
+        if (currentTheme === "auto") {
+            setTheme("dark");
+        } else if (currentTheme === "dark") {
+            setTheme("light");
+        } else {
+            setTheme("auto");
+        }
+    }
+}
+
+function initTheme() {
+    // set theme defined in localStorage if there is one, or fallback to auto mode
+    const currentTheme = localStorage.getItem('color-theme');
+    currentTheme ? setTheme(currentTheme) : setTheme("auto");
+}
+
+function setupTheme() {
+    // Attach event handlers for toggling themes
+    let buttons = document.getElementsByClassName("theme-toggle");
+    for (var i = 0; i < buttons.length; i++) {
+        buttons[i].addEventListener("click", cycleTheme);
+    };
+}
+
+
+initTheme();
+
+document.addEventListener('DOMContentLoaded', function() {
+    setupTheme();
+})

fet2020/templates/base.html

@@ -69,6 +69,19 @@
 
                     <li class="visible-expandedOnly"><button @click.prevent="openShowSearch"><span class="hidden md:inline"><i class="fa-solid fa-magnifying-glass"></i></span></button></li>
 
+                    <li class="visible-expandedOnly">
+                        <button class="theme-toggle">
+                            <span id="theme-icon-when-auto">
+                                <i class="fa-solid fa-circle-half-stroke"></i>
+                            </span>
+                            <span id="theme-icon-when-dark">
+                                <i class="fa-solid fa-moon"></i>
+                            </span>
+                            <span id="theme-icon-when-light">
+                                <i class="fa-solid fa-sun"></i>
+                            </span>
+                        </button>
+                    </li>
                     {% if not request.user.is_authenticated %}
                         <li><a href="{% url 'authentications:login' %}?next={{ request.path }}">Anmelden</a></li>
                     {% else %}
@@ -151,6 +164,7 @@
         </div>
 
         <script src="{% static 'js/alpine-csp.js' %}"></script>
+        <script src="{% static 'js/dark-mode.js' %}"></script>
 
         <script src="{% static 'js/gumshoe@5.1.1.js' %}"></script>
         <script src="{% static 'js/smooth-scroll@16.1.2.js' %}"></script>