Merge pull request #65 from Rahul-AkaVector/main

Allowing users to change light mode or dark mode after login
kom-senapati · Oct 10, 2024 · 051989e · 051989e
2 parents aeef56d + 5d13945
commit 051989e
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,5 +3,6 @@
 \migrations
 \.venv
 .env
+\myenv
 
 node_modules
diff --git a/static/js/chatbot_hub.js b/static/js/chatbot_hub.js
@@ -0,0 +1,35 @@
+var themeToggleDarkIcon = document.getElementById("theme-toggle-dark-icon");
+var themeToggleLightIcon = document.getElementById("theme-toggle-light-icon");
+
+// Initialize the theme based on local storage or system preference
+function initializeTheme() {
+    if (
+        localStorage.theme === "dark" ||
+        (!("theme" in localStorage) &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches)
+    ) {
+        document.body.classList.add("dark");
+        themeToggleLightIcon.classList.remove("hidden");
+    } else {
+        themeToggleDarkIcon.classList.remove("hidden");
+    }
+}
+
+// Toggle the theme and icons when the button is clicked
+document.getElementById("theme-toggle").addEventListener("click", function () {
+    document.body.classList.toggle("dark");
+
+    // Toggle icons visibility
+    if (themeToggleLightIcon.classList.contains("hidden")) {
+        themeToggleLightIcon.classList.remove("hidden");
+        themeToggleDarkIcon.classList.add("hidden");
+        localStorage.setItem("theme", "dark"); // Store theme preference
+    } else {
+        themeToggleLightIcon.classList.add("hidden");
+        themeToggleDarkIcon.classList.remove("hidden");
+        localStorage.setItem("theme", "light"); // Store theme preference
+    }
+});
+
+// Initialize theme on page load
+initializeTheme();
diff --git a/static/js/dashboard.js b/static/js/dashboard.js
@@ -71,3 +71,40 @@ document.querySelectorAll('[id^="publish-form-"]').forEach((form) => {
 document.querySelectorAll('[id^="delete-chatbot-form-"]').forEach((form) => {
   form.addEventListener("submit", deleteChatbot);
 });
+
+
+var themeToggleDarkIcon = document.getElementById("theme-toggle-dark-icon");
+var themeToggleLightIcon = document.getElementById("theme-toggle-light-icon");
+
+// Initialize the theme based on local storage or system preference
+function initializeTheme() {
+    if (
+        localStorage.theme === "dark" ||
+        (!("theme" in localStorage) &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches)
+    ) {
+        document.body.classList.add("dark");
+        themeToggleLightIcon.classList.remove("hidden");
+    } else {
+        themeToggleDarkIcon.classList.remove("hidden");
+    }
+}
+
+// Toggle the theme and icons when the button is clicked
+document.getElementById("theme-toggle").addEventListener("click", function () {
+    document.body.classList.toggle("dark");
+
+    // Toggle icons visibility
+    if (themeToggleLightIcon.classList.contains("hidden")) {
+        themeToggleLightIcon.classList.remove("hidden");
+        themeToggleDarkIcon.classList.add("hidden");
+        localStorage.setItem("theme", "dark"); // Store theme preference
+    } else {
+        themeToggleLightIcon.classList.add("hidden");
+        themeToggleDarkIcon.classList.remove("hidden");
+        localStorage.setItem("theme", "light"); // Store theme preference
+    }
+});
+
+// Initialize theme on page load
+initializeTheme();
diff --git a/static/js/profile.js b/static/js/profile.js
@@ -111,3 +111,39 @@ async function handleProfileEdit(event) {
 if (editForm) {
   editForm.addEventListener("submit", handleProfileEdit);
 }
+
+var themeToggleDarkIcon = document.getElementById("theme-toggle-dark-icon");
+var themeToggleLightIcon = document.getElementById("theme-toggle-light-icon");
+
+// Initialize the theme based on local storage or system preference
+function initializeTheme() {
+    if (
+        localStorage.theme === "dark" ||
+        (!("theme" in localStorage) &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches)
+    ) {
+        document.body.classList.add("dark");
+        themeToggleLightIcon.classList.remove("hidden");
+    } else {
+        themeToggleDarkIcon.classList.remove("hidden");
+    }
+}
+
+// Toggle the theme and icons when the button is clicked
+document.getElementById("theme-toggle").addEventListener("click", function () {
+    document.body.classList.toggle("dark");
+
+    // Toggle icons visibility
+    if (themeToggleLightIcon.classList.contains("hidden")) {
+        themeToggleLightIcon.classList.remove("hidden");
+        themeToggleDarkIcon.classList.add("hidden");
+        localStorage.setItem("theme", "dark"); // Store theme preference
+    } else {
+        themeToggleLightIcon.classList.add("hidden");
+        themeToggleDarkIcon.classList.remove("hidden");
+        localStorage.setItem("theme", "light"); // Store theme preference
+    }
+});
+
+// Initialize theme on page load
+initializeTheme();
diff --git a/templates/chatbot_hub.html b/templates/chatbot_hub.html
@@ -14,8 +14,16 @@
             <a href="{{ url_for('profile') }}" onclick="navigate(event, '/profile')"
                 class="text-2xl font-bold dark:text-dark dark:hover:text-dark/75">Profile</a>
         </div>
-        <div>
-            <a href="{{ url_for('logout') }}" onclick="navigate(event, '/logout')" class="">Logout</a>
+        <div class="flex items-center space-x-4">
+            <button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5">
+                <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+                </svg>
+                <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
+                </svg>
+            </button>
+            <a href="{{ url_for('logout') }}" onclick="navigate(event, '/logout')" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5">Logout</a>
         </div>
     </nav>
 

diff --git a/templates/dashboard.html b/templates/dashboard.html
@@ -16,8 +16,17 @@
             <a href="{{ url_for('profile') }}" onclick="navigate(event, '/profile')"
                 class="text-2xl font-bold dark:text-dark dark:hover:text-dark/75">Profile</a>
         </div>
-        <div>
-            <a href="{{ url_for('logout') }}" onclick="navigate(event, '/logout')" class="">Logout</a>
+
+        <div class="flex items-center space-x-4">
+            <button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5">
+                <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+                </svg>
+                <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
+                </svg>
+            </button>
+            <a href="{{ url_for('logout') }}" onclick="navigate(event, '/logout')" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5">Logout</a>
         </div>
     </nav>
 

diff --git a/templates/profile.html b/templates/profile.html
@@ -16,10 +16,20 @@
             <a href="{{ url_for('chatbot_hub') }}" onclick="navigate(event, '/chatbot_hub')"
                 class="text-2xl font-bold dark:text-dark dark:hover:text-dark/75">Hub</a>
         </div>
-        <div>
-            <a href="{{ url_for('logout') }}" onclick="navigate(event, '/logout')" class="">Logout</a>
+
+        <div class="flex items-center space-x-4">
+            <button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5">
+                <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+                </svg>
+                <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
+                </svg>
+            </button>
+            <a href="{{ url_for('logout') }}" onclick="navigate(event, '/logout')" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5">Logout</a>
         </div>
     </nav>
+
     <h2 class="text-4xl font-semibold mb-6 m-3">Profile</h2>
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,5 +3,6 @@ @@
     \migrations
     \.venv
     .env
+    \myenv
     node_modules