toggle dark mode

gawa/start/templates/start/base.html

@@ -46,13 +46,16 @@
                             <ul class="dropdown-menu">
                                 {% for lang_code, lang_name in languages %}
                                 <li><a class="dropdown-item" 
-                                        href="{{ request.scheme }}://{{ request.META.HTTP_HOST }}{% change_lang lang_code %}?{{ request.GET.urlencode }}">
+                                       href="{{ request.scheme }}://{{ request.META.HTTP_HOST }}{% change_lang lang_code %}?{{ request.GET.urlencode }}">
-                                    {{ lang_name }}</a></li>
+                                        {{ lang_name }}</a></li>
                                 {% endfor %}
                                 <li><hr class="dropdown-divider"></li>
                                 <li><a class="dropdown-item" href="#">Something else here</a></li>
                             </ul>
                         </li>
+                        <li class="nav-item">
+                            <button type="button" class="btn btn-outline-light" id="toggleThemeButton">Toggle Dark/Light</button>
+                        </li>
                     </ul>
                     {% block MainSearchFormSpace %}
                     <form class="d-flex" role="search" action="{% url 'start:search' %}" method="GET">
@@ -63,14 +66,10 @@
                 </div>
             </div>
         </nav>
-        {% get_available_languages as languages %}
-        {% for lang_code, lang_name in languages %}
-            <a href="{{ request.scheme }}://{{ request.META.HTTP_HOST }}{% change_lang lang_code %}">sus</a>
-        {% endfor %}
         <main>
             {% block main %}{% endblock main %}
         </main>
-        <footer class="text-center text-lg-start bg-dark text-light">
+        <footer class="text-center text-lg-start bg-dark-subtle text-muted">
             <div class="container overflow-hidden text-center">
                 <div class="row gy-5">
                     <div class="col-6">
@@ -148,5 +147,32 @@
             </div>
         </footer>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
+        <script>
+            'use strict'
+
+            const getStoredTheme = () => localStorage.getItem('theme')
+            const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+
+            const setTheme = theme => {
+                document.documentElement.setAttribute('data-bs-theme', theme)
+            }
+
+            document.getElementById("toggleThemeButton").onclick = function () { 
+                const storedTheme =  localStorage.getItem('theme')
+                if (storedTheme == null) {
+                    setStoredTheme("dark");
+                    setTheme("dark"); 
+                }
+                else if (storedTheme == "dark") {
+                    setStoredTheme("light");
+                    setTheme("light");
+                }
+                else if (storedTheme == "light") {
+                    setStoredTheme("dark");
+                    setTheme("dark");
+                }
+            };
+        </script>
     </body>
 </html>