Dark Mode

evap/evaluation/templates/base.html

@@ -72,6 +72,7 @@
         <script type="text/javascript" src="{% static 'js/tom-select.complete.min.js' %}"></script>
         <script type="text/javascript" src="{% static 'js/plugins/jquery.formset.js' %}"></script>
         <script type="text/javascript" src="{% static 'js/Sortable.min.js' %}"></script>
+        <script type="text/javascript" src="{% static 'js/color-mode-toggler.js' %}"></script>
 
         <script type="module" src="{% static 'js/csrf-utils.js' %}"></script>
         <script type="module" src="{% static 'js/utils.js' %}"></script>

evap/evaluation/templates/navbar.html

@@ -130,6 +130,16 @@
                     </div>
                 </li>
             {% endif %}
+            <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" id="bd-theme" data-bs-toggle="dropdown">
+                    <span id="span-toggle-color-mode-dropdown" class="fas fa-circle-half-stroke"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-end dropdown-menu-tight" aria-labelledby="bd-theme">
+                    <button type="button" class="dropdown-item" data-bs-theme-value="light">{% translate 'Light' %}</button>
+                    <button type="button" class="dropdown-item" data-bs-theme-value="dark">{% translate 'Dark' %}</button>
+                    <button type="button" class="dropdown-item" data-bs-theme-value="auto">{% translate 'Auto' %}</button>
+                </div>
+            </li>
         </ul>
     </div>
 </nav>

evap/static/scss/evap.scss

@@ -7,6 +7,7 @@
 @import "adjustments";
 @import "utilities";
 
+$color-mode-type: data;
 html {
     position: relative;
     min-height: 100%;
@@ -24,6 +25,12 @@ body {
     }
 }
 
+@include color-mode(dark) {
+    body {
+        background-image: url("../images/triangles_dark_gray.svg");
+    }
+}
+
 .hide {
     opacity: 0;
     cursor: inherit;

evap/static/ts/src/color-mode-toggler.ts

@@ -0,0 +1,62 @@
+/*!
+ * Adapted color mode toggler from Bootstrap's docs (https://getbootstrap.com/)
+ */
+
+(() => {
+  'use strict'
+
+  const storedTheme = localStorage.getItem('theme')
+
+  const getPreferredTheme = () => {
+    console.log("getPreferredTheme");
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = function (theme) {
+    console.log("setTheme");
+    console.log(theme);
+    /*if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {*/
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    //}
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = theme => {
+    console.log("showActiveTheme");
+    console.log(theme);
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('active')
+    })
+
+    btnToActive.classList.add('active')
+  }
+
+/*  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (storedTheme !== 'light' || storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })*/
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          localStorage.setItem('theme', theme)
+          setTheme(theme)
+          showActiveTheme(theme)
+        })
+      })
+  })
+})()