Merge pull request #351 from Gary-Community-Ventures/marianna/1036/li…

…ght-dark-mode 1036: wip
Gary-Community-Ventures · May 8, 2024 · 799421d · 799421d
2 parents e084f9c + 9bbf958
commit 799421d
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 5 deletions.
diff --git a/translations/static/css/bulma_switch.css b/translations/static/css/bulma_switch.css
diff --git a/translations/static/js/theme.js b/translations/static/js/theme.js
@@ -0,0 +1,27 @@
+(() => {
+    "use strict";
+    const prefersDarkMode = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    ).matches;
+    const defaultTheme = prefersDarkMode ? "dark" : "light";
+    const preferredTheme = localStorage.getItem("theme");
+    const toggleDarkMode = document.querySelector("#bd-theme");
+
+    if (!preferredTheme) {
+      localStorage.setItem("theme", defaultTheme);
+    }
+
+    document.documentElement.setAttribute(
+      "data-theme",
+      preferredTheme || defaultTheme
+    );
+
+    toggleDarkMode.checked = preferredTheme === "dark" ? true : false;
+
+    toggleDarkMode.addEventListener("change", function () {
+      const isDarkTheme = localStorage.getItem("theme") === "dark";
+      const newTheme = isDarkTheme ? "light" : "dark";
+      localStorage.setItem("theme", newTheme);
+      document.documentElement.setAttribute("data-theme", newTheme);
+    });
+  })();
diff --git a/translations/templates/base.html b/translations/templates/base.html
@@ -1,6 +1,6 @@
 {% load static %}
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -9,7 +9,8 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
     />
-    <link rel="stylesheet" href="{% static 'css/styles.css' %}" />
+
+    <link rel="stylesheet" href="{% static 'css/bulma_switch.css' %}" />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
@@ -18,7 +19,10 @@
 
   <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}" }'>
     <div class="columns is-gapless">
-      <div class="column is-2 sidebar-nav">
+      <div
+        class="column is-2 sidebar-nav is-flex is-flex-direction-column"
+        style="position: fixed; height: 100%"
+      >
         <div class="sidebar-header">
           <section class="section">
             <span class="material-symbols-outlined">
@@ -27,7 +31,7 @@
             <h2 class="subtitle">Translations Admin</h2>
           </section>
         </div>
-        <aside class="menu">
+        <aside class="menu" style="max-height: 100%">
           <p class="menu-label">Navigation</p>
           <ul class="menu-list">
             <li>
@@ -93,14 +97,48 @@ <h2 class="subtitle">Translations Admin</h2>
             </li>
           </ul>
         </aside>
+        <div class="is-flex is-justify-content-center" style="margin-top: auto; margin-bottom: 2rem;">
+          <div
+            style="
+              height: 100%;
+              width: 145px;
+              border: 1px grey solid;
+
+              border-radius: 30px;
+              background-color: var(--contrast);
+              padding: 8px;
+            "
+          >
+            <div class="level">
+              <label class="switch is-rounded">
+                <div
+                  class="level-item"
+                  style="height: 20; width: 20px; margin: 0 10px"
+                >
+                  <span class="material-symbols-outlined"> wb_sunny </span>
+                </div>
+                <input type="checkbox" role="switch" id="bd-theme" value="" />
+                <span class="check"></span>
+                <div
+                  class="level-item"
+                  style="height: 20; width: 20px; margin: 0 10px"
+                >
+                  <span class="material-symbols-outlined"> bedtime </span>
+                </div>
+              </label>
+            </div>
+          </div>
+        </div>
       </div>
-      <div class="column">
+      <div class="column is-2"></div>
+      <div class="column is-10 is-offset-2">
         <div class="container">
           <div class="content">{% block content %} {% endblock content %}</div>
         </div>
       </div>
     </div>
     <script src="https://unpkg.com/[email protected]"></script>
     <script src="{% static 'js/base.js' %}"></script>
+    <script src="{% static 'js/theme.js' %}"></script>
   </body>
 </html>