Light and Dark mode + Tailwind Files

static/images/dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fff" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>

static/images/light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#currentColor" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>

static/js/chat.js

@@ -18,7 +18,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
     console.log(id)
     
     const messageElement = document.createElement('div');
-    messageElement.classList.add('bg-secondary', 'drop-shadow-sm', 'p-4', 'mx-6', 'my-4', 'flex', 'flex-col', 'space-x-2', 'rounded-lg', 'shadow-lg', 'bg-gray-800', 'hover:bg-gray-700', 'transition-colors', 'duration-300');
+    messageElement.classList.add('bg-secondary', 'drop-shadow-sm', 'p-4', 'mx-6', 'my-4', 'flex', 'flex-col', 'space-x-2', 'rounded-lg', 'shadow-lg', 'bg-gray-300', 'text-black', 'dark:text-gray-200', 'dark:bg-gray-800', 'hover:bg-gray-400', 'dark:hover:bg-gray-700', 'transition-colors', 'duration-300');
 
     messageElement.id = id
     //messageElement.classList.add(sender);

static/js/themechecker.js

@@ -0,0 +1,8 @@
+// Default starts with dark mode.
+document.documentElement.classList.add('dark');
+// Changes theme based on user's device preference when page is loaded.
+if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    document.documentElement.classList.add('dark');
+} else {
+    document.documentElement.classList.remove('dark')
+}

static/js/themetoggle.js

@@ -0,0 +1,46 @@
+var themeToggleDarkIcon = document.getElementById(
+    "theme-toggle-dark-icon"
+  );
+  var themeToggleLightIcon = document.getElementById(
+    "theme-toggle-light-icon"
+  );
+
+  // Change the icons inside the button based on previous settings
+  if (
+    localStorage.getItem("color-theme") === "dark" ||
+    (!("color-theme" in localStorage) &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches)
+  ) {
+    themeToggleLightIcon.classList.remove("hidden");
+  } else {
+    themeToggleDarkIcon.classList.remove("hidden");
+  }
+
+  var themeToggleBtn = document.getElementById("theme-toggle");
+
+  themeToggleBtn.addEventListener("click", function () {
+    // toggle icons inside button
+    themeToggleDarkIcon.classList.toggle("hidden");
+    themeToggleLightIcon.classList.toggle("hidden");
+
+    // if set via local storage previously
+    if (localStorage.getItem("color-theme")) {
+      if (localStorage.getItem("color-theme") === "light") {
+        document.documentElement.classList.add("dark");
+        localStorage.setItem("color-theme", "dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+        localStorage.setItem("color-theme", "light");
+      }
+
+      // if NOT set via local storage previously
+    } else {
+      if (document.documentElement.classList.contains("dark")) {
+        document.documentElement.classList.remove("dark");
+        localStorage.setItem("color-theme", "light");
+      } else {
+        document.documentElement.classList.add("dark");
+        localStorage.setItem("color-theme", "dark");
+      }
+    }
+  });

tailwind.config.js

@@ -0,0 +1,12 @@
+// tailwind.config.js
+module.exports = {
+    purge: [],
+    darkMode: 'media', // or 'media' or 'class'
+    theme: {
+      extend: {},
+    },
+    content: [
+        './templates/index.html',
+        './templates/main.html',
+    ]
+  }

templates/help.html

@@ -6,14 +6,17 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Help | GPT4All-ui</title>
   <!-- Include Tailwind CSS -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwindcss.min.css') }}"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/utilities.min.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwind.min.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwindcss.min.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwind-dark.min.css') }}">
   <!-- Include custom CSS -->
   <link rel="stylesheet" href="{{ url_for('static', filename='css/help.css') }}">
 </head>
 
 <body>
   <!-- Navbar -->
-  <nav class="flex justify-between items-center bg-gray-900 text-white p-4">
+  <nav class="flex justify-between items-center bg-gray-200 dark:bg-gray-900 text-white p-4">
     <a href="/" class="text-lg font-bold">GPT4All-ui</a>
     <!-- Dropdown menu -->
     <div class="relative">

templates/index.html

@@ -1,34 +1,45 @@
 <!DOCTYPE html>
-<html  class="mode-dark">
+<html>
   <head>
     <meta charset="utf-8">
     <title>GPT4All - WEBUI</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/utilities.min.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwind.min.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwindcss.min.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwind-dark.min.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/chat.css') }}">
     <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}" type="image/x-icon">
-
   </head>
-<body class="w-screen h-500 bg-primary text-gray-400 flex flex-col bg-gray-900 h-screen overflow-hidden">
+<body class="w-screen h-500 bg-primary text-gray-400 flex flex-col bg-gray-200 dark:bg-gray-900 h-screen overflow-hidden">
-    <div class="w-full h-50 border-b border-accent bg-tertiary text-2xl font-bold flex justify-between items-center px-6 py-6">
+  <div class="w-full h-50 border-b-4 border-black dark:border-gray-600 text-2xl font-bold flex justify-between items-center px-6 py-6">
+    <div class="flex">
       <div class="w-12 h-12"><a href="#main"><img src="{{ url_for('static', filename='images/icon.png') }}"></a></div>
-        <h1>GPT4All - WEBUI</h1>
+      <div class="contents">
+        <button id="theme-toggle" type="button" class="ml-5 bg-gray-200 border-black border-2 dark:bg-gray-700 dark:border-white hover:bg-gray-300 dark:hover:bg-gray-500 rounded-lg text-sm p-2.5">
+          <img id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" src="{{ url_for('static', filename='images/dark.svg') }}"></img>
+          <img id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" src="{{ url_for('static', filename='images/light.svg') }}"></img>
+        </button>
       </div>
-    <div class="border-b border-gray-800 content-center items-center">
+    </div>
-        <ul class="flex border-b border-gray-800 content-center items-center">
+    <h1 class="text-2xl text-black dark:text-white">GPT4ALL - WEBUI</h1>
+  </div>
+  <div class="content-center items-center">
+    <ul class="flex
+    content-center items-center">
       <li class="mr-1">
-            <a href="#main" class="bg-gray-700 text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-200 hover:text-black" id="main-link">Main</a>
+        <a href="#main" class="border-t-4 border-l-2 border-r-2 border-black dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="main-link">Main</a>
       </li>
       <li class="mr-1">
-            <a href="#settings" class="bg-gray-700 text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-200 hover:text-black" id="settings-link">Settings</a>
+        <a href="#settings" class="border-t-4 border-l-2 border-r-2 border-black dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="settings-link">Settings</a>
       </li>
       <li class="mr-1">
-            <a href="#extensions" class="bg-gray-700 text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-200 hover:text-black" id="extensions-link">Extensions</a>
+        <a href="#extensions" class="border-t-4 border-l-2 border-r-2 border-black dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="extensions-link">Extensions</a>
       </li>
       <li class="mr-1">
-            <a href="#training" class="bg-gray-700 text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-200 hover:text-black" id="training-link">Training</a>
+        <a href="#training" class="border-t-4 border-l-2 border-r-2 border-black dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="training-link">Training</a>
       </li>
       <li class="mr-1">
-            <a href="#help" class="bg-gray-700 text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-200 hover:text-black" id="help-link">Help</a>
+        <a href="#help" class="border-t-4 border-l-2 border-r-2 border-black dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="help-link">Help</a>
       </li>
     </ul>
   </div>
@@ -41,10 +52,10 @@
   <div class="tab-pane flex-1 overflow-auto" id="training" style="display: none;">
   </div>
   <div class="tab-pane flex-1 overflow-auto" id="help" style="display: none;">
-
   </div>
   <footer class="border-t border-accent flex">
   </footer>
+
   <script src="{{ url_for('static', filename='js/chat.js') }}"></script>
   <script src="{{ url_for('static', filename='js/marked.min.js') }}"></script>
   <script src="{{ url_for('static', filename='js/discussions.js') }}"></script>
@@ -58,5 +69,7 @@
   <script src="{{ url_for('static', filename='js/audio.js') }}"></script>
   <script src="{{ url_for('static', filename='js/tabs.js') }}"></script>
 
+  <script src="{{ url_for('static', filename='js/themechecker.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/themetoggle.js') }}"></script>
 </body>
 </html>

templates/main.html

@@ -1,21 +1,21 @@
 <div class="flex h-screen w-screen">
-    <div class="w-1/4 flex flex-col rounded bg-gray-700 text-white h-full overflow-hidden">
+    <div class="w-1/4 flex flex-col border-black dark:border-gray-600 border-r-4 border-t-4 rounded bg-gray-50 dark:bg-gray-700 text-white h-full overflow-hidden">
-      <div  id="action-buttons" class="flex-shrink-0 h-20">
+      <div id="action-buttons" class="flex-shrink-0 h-10 ml-1.5 mt-2 mb-4">
-        <button id="new-discussion-btn" class="px-4 py-4 rounded hover:bg-gray-600">
+        <button id="new-discussion-btn" class="px-4 py-4 rounded border-black border-2 bg-gray-400 dark:bg-gray-700 dark:border-transparent hover:bg-gray-600 dark:hover:bg-gray-600">
           <img src="/static/images/new_message.png" class="w-5 h-5">
         </button>
-        <button id="reset-discussions-btn" class="px-4 py-4 rounded hover:bg-gray-600">
+        <button id="reset-discussions-btn" class="px-4 py-4 rounded border-black border-2 bg-gray-400 dark:bg-gray-700 dark:border-transparent hover:bg-gray-600 dark:hover:bg-gray-600">
           <img src="/static/images/reset_db.png" class="w-5 h-5">
         </button>
-        <button value="Export" id="export-button" class="px-4 py-4 rounded hover:bg-gray-600">
+        <button value="Export" id="export-button" class="px-4 py-4 rounded border-black border-2 bg-gray-400 dark:bg-gray-700 dark:border-transparent hover:bg-gray-600 dark:hover:bg-gray-600">
           <img src="/static/images/export_database.png" class="w-5 h-5">
         </button>
-        <button value="Export-discussion" id="export-discussion-button" class="px-4 py-4 rounded hover:bg-gray-600">
+        <button value="Export-discussion" id="export-discussion-button" class="px-4 py-4 rounded border-black border-2 bg-gray-400 dark:bg-gray-700 dark:border-transparent hover:bg-gray-600 dark:hover:bg-gray-600">
           <img src="/static/images/export_discussion.png" class="w-5 h-5">
         </button>
       </div>
-      <div class="flex-shrink-0 p-0">
+      <div class="flex-shrink-0 p-0 ml-1.5">
-        <h1 class="font-bold font-large">Discussions</h1>
+        <h1 class="font-bold font-large text-black dark:text-white">Discussions</h1>
       </div>
       <div class="flex-1 overflow-y-auto p-0">
         <div id="discussions-list" class="pb-96" >
@@ -23,19 +23,19 @@
       </div>
     </div>
     <div class="flex-1 flex flex-col overflow-hidden">
-      <div class="flex-shrink-0 p-4 bg-gray-700 text-white">
+      <div class="border-t-4 border-l-4 border-black dark:border-gray-600 flex-shrink-0 p-4 bg-gray-50 dark:bg-gray-700 text-black dark:text-white">
         <h1 class="font-bold font-large">Chat box</h1>
       </div>
-      <div class="flex-grow overflow-y-auto p-0 bg-gray-700 rounded">
+      <div class="flex-grow overflow-y-auto p-0 border-4 border-t-0 border-black dark:border-gray-600 bg-gray-50 dark:bg-gray-700 rounded">
         <div id="chat-window" class="pb-96">
         </div>
       </div>
     </div>
   </div>
-  <div class="w-full mx-2 flex flex-row  bottom-0 fixed rounded shadow shadow-white bg-gray-300 flex-wrap">
+  <div class="w-full mx-2 flex flex-row bottom-0 fixed rounded-md shadow shadow-white border-4 border-black dark:border-gray-800 bg-gray-300 dark:bg-gray-500 flex-wrap">
     <form id="chat-form" class="w-full flex-row text-white mr-15 p-15">
-      <input type="text" id="user-input" placeholder="Type your message..." class="bg-gray-600 my-1 mx-1 outline-none drop-shadow-sm w-full rounded-md">
+      <input type="text" id="user-input" placeholder="Type your message..." class="dark:bg-gray-600 px-2 py-1 my-1 mx-1 text-black dark:text-white outline-none drop-shadow-sm w-full rounded-md flex-1">
       <div id="wait-animation" style="display: none;" class="lds-facebook bg-secondary my-1 mx-1 outline-none drop-shadow-sm w-full rounded-md p-2"><div></div><div></div><div></div></div>
-      <input type="submit" value="Send" id="submit-input" class="my-1 mx-1 outline-none px-4 bg-accent text-black rounded-md hover:bg-[#7ba0ea] active:bg-[#3d73e1]  transition-colors ease-in-out">
+      <input type="submit" value="Send" id="submit-input" class="my-1 mx-1 outline-none px-4 dark:bg-gray-900 text-black dark:text-white rounded-md hover:bg-[#7ba0ea] active:bg-[#3d73e1]  transition-colors ease-in-out">
     </form>
   </div>