add dark mode toggle (fix #1937)

icons from bootstrap icons:

https://icons.getbootstrap.com/?q=bulb

Author: avindra

anitya/templates/master.html

@@ -28,7 +28,7 @@
   >
     <header>
       <!-- Static navbar -->
-      <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
+      <nav class="navbar navbar-expand-lg fixed-top">
         <div id="wrap" class="container-fluid ms-2">
             <a class="navbar-brand" href="{{url_for('anitya_ui.index')}}">
                 release-monitoring.org
@@ -171,7 +171,7 @@
       {% block body %}{% endblock %}
     </main>
 
-    <footer class="footer mt-auto bg-light">
+    <footer class="footer mt-auto">
         <div class="d-flex justify-content-center flex-nowrap">
             <p class="text-muted credit">
                 Anitya ({{ version }}):
@@ -190,6 +190,8 @@
                 Err ({{ cron_status.error_count }})
                 Rate ({{ cron_status.ratelimit_count }})
                 {% endif %}
+
+                <span id="theme-toggle"></span>
             </p>
         </div>
     </footer>
@@ -226,6 +228,37 @@
           delay: 600,
         });
       });
+
+      const html = document.documentElement;
+
+      const bulbOn = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightbulb-fill" viewBox="0 0 16 16">
+                        <path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5"/>
+                      </svg>`;
+
+      const bulbOff =  `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightbulb-off" viewBox="0 0 16 16">
+                          <path fill-rule="evenodd" d="M2.23 4.35A6 6 0 0 0 2 6c0 1.691.7 3.22 1.826 4.31.203.196.359.4.453.619l.762 1.769A.5.5 0 0 0 5.5 13a.5.5 0 0 0 0 1 .5.5 0 0 0 0 1l.224.447a1 1 0 0 0 .894.553h2.764a1 1 0 0 0 .894-.553L10.5 15a.5.5 0 0 0 0-1 .5.5 0 0 0 0-1 .5.5 0 0 0 .288-.091L9.878 12H5.83l-.632-1.467a3 3 0 0 0-.676-.941 4.98 4.98 0 0 1-1.455-4.405zm1.588-2.653.708.707a5 5 0 0 1 7.07 7.07l.707.707a6 6 0 0 0-8.484-8.484zm-2.172-.051a.5.5 0 0 1 .708 0l12 12a.5.5 0 0 1-.708.708l-12-12a.5.5 0 0 1 0-.708"/>
+                        </svg>`;
+
+      const toggle = document.getElementById('theme-toggle');
+      let currentTheme = localStorage.getItem('theme');
+      if (!currentTheme) {
+        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        if (prefersDark) {
+          currentTheme = 'dark';
+        } else {
+          currentTheme = 'light';
+        }
+      }
+
+      html.setAttribute('data-bs-theme', currentTheme);
+      toggle.innerHTML = currentTheme === 'dark' ? bulbOff : bulbOn;
+      toggle.onclick = function() {
+        currentTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        html.setAttribute('data-bs-theme', currentTheme);
+        localStorage.setItem('theme', currentTheme);
+        toggle.innerHTML = currentTheme === 'dark' ? bulbOff : bulbOn;
+      };
+
     </script>
     {% block jscript %}{% endblock %}
   </body>

news/1937.feature

@@ -0,0 +1 @@
+Implement dark mode via Bootstrap 5.3