From 705b283a9ba3d010a123b7c5c50acb671921822b Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 16 Oct 2024 16:42:10 -0700
Subject: [PATCH] attempt light mode

---
 .../EmbeddingSelection/EmbedderItem/index.jsx |  2 +-
 .../components/LLMSelection/LLMItem/index.jsx |  2 +-
 .../src/components/SettingsButton/index.jsx   |  2 +-
 .../src/components/SettingsSidebar/index.jsx  |  4 +-
 frontend/src/components/Sidebar/index.jsx     |  4 +-
 .../VectorDBSelection/VectorDBItem/index.jsx  |  2 +-
 frontend/src/index.css                        | 81 ++++++++++++++++---
 .../SQLConnectorSelection/DBConnection.jsx    |  2 +-
 .../SearchProviderItem/index.jsx              |  2 +-
 .../Admin/Agents/WebSearchSelection/index.jsx |  2 +-
 .../Appearance/LanguagePreference/index.jsx   |  2 +-
 .../Appearance/ThemePreference/index.jsx      |  2 +-
 .../GeneralSettings/Appearance/index.jsx      |  5 +-
 .../GeneralSettings/AudioPreference/stt.jsx   |  2 +-
 .../GeneralSettings/AudioPreference/tts.jsx   |  2 +-
 .../EmbeddingPreference/index.jsx             |  2 +-
 .../GeneralSettings/LLMPreference/index.jsx   |  2 +-
 .../TranscriptionPreference/index.jsx         |  2 +-
 .../GeneralSettings/VectorDatabase/index.jsx  |  2 +-
 .../AgentConfig/AgentLLMSelection/index.jsx   |  2 +-
 .../WorkspaceLLMSelection/index.jsx           |  2 +-
 frontend/tailwind.config.js                   |  1 +
 22 files changed, 93 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/EmbeddingSelection/EmbedderItem/index.jsx b/frontend/src/components/EmbeddingSelection/EmbedderItem/index.jsx
index de9413572..15fd5020c 100644
--- a/frontend/src/components/EmbeddingSelection/EmbedderItem/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/EmbedderItem/index.jsx
@@ -29,7 +29,7 @@ export default function EmbedderItem({
         />
         <div className="flex flex-col">
           <div className="text-sm font-semibold text-white">{name}</div>
-          <div className="mt-1 text-xs text-description">{description}</div>
+          <div className="mt-1 text-xs text-theme-text-description">{description}</div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/LLMSelection/LLMItem/index.jsx b/frontend/src/components/LLMSelection/LLMItem/index.jsx
index e96c5f3ea..60854ba70 100644
--- a/frontend/src/components/LLMSelection/LLMItem/index.jsx
+++ b/frontend/src/components/LLMSelection/LLMItem/index.jsx
@@ -29,7 +29,7 @@ export default function LLMItem({
         />
         <div className="flex flex-col">
           <div className="text-sm font-semibold text-white">{name}</div>
-          <div className="mt-1 text-xs text-description">{description}</div>
+          <div className="mt-1 text-xs text-theme-text-description">{description}</div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/SettingsButton/index.jsx b/frontend/src/components/SettingsButton/index.jsx
index f79be1cd1..4e7b56b8d 100644
--- a/frontend/src/components/SettingsButton/index.jsx
+++ b/frontend/src/components/SettingsButton/index.jsx
@@ -30,7 +30,7 @@ export default function SettingsButton() {
     <ToolTipWrapper id="open-settings">
       <Link
         to={paths.settings.appearance()}
-        className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+        className="transition-all duration-300 p-2 rounded-full text-white bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
         aria-label="Settings"
         data-tooltip-id="open-settings"
         data-tooltip-content="Open settings"
diff --git a/frontend/src/components/SettingsSidebar/index.jsx b/frontend/src/components/SettingsSidebar/index.jsx
index faf72573b..f182c0cb3 100644
--- a/frontend/src/components/SettingsSidebar/index.jsx
+++ b/frontend/src/components/SettingsSidebar/index.jsx
@@ -56,7 +56,7 @@ export default function SettingsSidebar() {
             <img
               src={logo}
               alt="Logo"
-              className="block mx-auto h-6 w-auto"
+              className="block mx-auto h-6 w-auto invertible-image"
               style={{ maxHeight: "40px", objectFit: "contain" }}
             />
           </div>
@@ -140,7 +140,7 @@ export default function SettingsSidebar() {
           <img
             src={logo}
             alt="Logo"
-            className="rounded max-h-[24px]"
+            className="rounded max-h-[24px] invertible-image"
             style={{ objectFit: "contain" }}
           />
         </Link>
diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx
index 724fb8e1d..4d41d41b9 100644
--- a/frontend/src/components/Sidebar/index.jsx
+++ b/frontend/src/components/Sidebar/index.jsx
@@ -33,7 +33,7 @@ export default function Sidebar() {
         <img
           src={logo}
           alt="Logo"
-          className="rounded max-h-[24px] object-contain"
+          className="rounded max-h-[24px] object-contain invertible-image"
         />
       </Link>
       <div
@@ -115,7 +115,7 @@ export function SidebarMobileHeader() {
           <img
             src={logo}
             alt="Logo"
-            className="block mx-auto h-6 w-auto"
+            className="block mx-auto h-6 w-auto invertible-image"
             style={{ maxHeight: "40px", objectFit: "contain" }}
           />
         </div>
diff --git a/frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx b/frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx
index a599e406d..495265668 100644
--- a/frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx
+++ b/frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx
@@ -29,7 +29,7 @@ export default function VectorDBItem({
         />
         <div className="flex flex-col">
           <div className="text-sm font-semibold text-white">{name}</div>
-          <div className="mt-1 text-xs text-description">{description}</div>
+          <div className="mt-1 text-xs text-theme-text-description">{description}</div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ade8ff524..5664e37a0 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -12,6 +12,7 @@
   --theme-bg-chat-input: #27282a;
   --theme-text-primary: #ffffff;
   --theme-text-secondary: rgba(255, 255, 255, 0.6);
+  --theme-text-description: rgba(255, 255, 255, 0.6);
   --theme-sidebar-item-default: rgba(255, 255, 255, 0.1);
   --theme-sidebar-item-selected: rgba(255, 255, 255, 0.3);
   --theme-sidebar-item-hover: #3f3f42;
@@ -29,24 +30,80 @@
   --theme-settings-input-active: rgb(255 255 255 / 0.2);
   --theme-settings-input-text: #ffffff;
   --theme-modal-border: #3f3f42;
+  --theme-text-description: rgba(255, 255, 255, 0.6);
+  --theme-image-invert: 0;
 }
 
 [data-theme="light"] {
   --theme-bg-primary: #ffffff;
-  --theme-bg-secondary: #f4f4f4;
-  --theme-bg-sidebar: #f4f4f4;
+  --theme-bg-secondary: #f5f7fa;
+  --theme-bg-sidebar: #f0f4f8;
   --theme-bg-container: #ffffff;
+  --theme-bg-chat: #f5f7fa;
+  --theme-bg-chat-input: #e8eef5;
   --theme-text-primary: #000000;
-  --theme-text-secondary: #4a5568;
-  --theme-sidebar-item-default: rgba(0, 0, 0, 0.1);
-  --theme-sidebar-item-selected: rgba(0, 0, 0, 0.2);
-  --theme-sidebar-item-hover: #e2e8f0;
-  --theme-sidebar-subitem-default: rgba(0, 0, 0, 0.1);
-  --theme-sidebar-subitem-selected: rgba(0, 0, 0, 0.05);
-  --theme-sidebar-subitem-hover: rgba(0, 0, 0, 0.05);
-  --theme-sidebar-footer-icon: rgba(0, 0, 0, 0.3);
-  --theme-sidebar-footer-icon-hover: rgba(0, 0, 0, 0.5);
-  --theme-sidebar-border: rgba(0, 0, 0, 0.1);
+  --theme-text-secondary: #666666;
+  --theme-text-description: #666666;
+  --theme-sidebar-item-default: #e0e7ef;
+  --theme-sidebar-item-selected: #c7d5e3;
+  --theme-sidebar-item-hover: #d1dce8;
+  --theme-sidebar-subitem-default: #e8eef5;
+  --theme-sidebar-subitem-selected: #d1dce8;
+  --theme-sidebar-subitem-hover: #d9e2ec;
+  --theme-sidebar-footer-icon: #a0aec0;
+  --theme-sidebar-footer-icon-hover: #718096;
+  --theme-sidebar-border: #e2e8f0;
+  --theme-chat-input-border: #cbd5e0;
+  --theme-action-menu-bg: #ffffff;
+  --theme-action-menu-item-hover: #edf2f7;
+  --theme-settings-input-bg: #edf2f7;
+  --theme-settings-input-placeholder: #a0aec0;
+  --theme-settings-input-active: #e2e8f0;
+  --theme-settings-input-text: #4a5568;
+  --theme-modal-border: #e2e8f0;
+  --theme-image-invert: 1;
+}
+
+.invertible-image {
+  filter: invert(var(--theme-image-invert));
+}
+
+
+/* Default text color */
+body {
+  color: var(--theme-text-primary);
+}
+
+/* Override Tailwind's text-white class */
+.text-white {
+  color: var(--theme-text-primary) !important;
+}
+
+/* Create theme-aware text color utilities */
+.text-theme-primary {
+  color: var(--theme-text-primary);
+}
+.placeholder\:text-white::placeholder {
+  color: var(--theme-text-secondary) !important;
+}
+
+.text-theme-secondary {
+  color: var(--theme-text-secondary);
+}
+
+/* Additional utility classes for other common text colors */
+p,
+span,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--theme-text-secondary);
+}
+* {
+  color: inherit;
 }
 
 html,
diff --git a/frontend/src/pages/Admin/Agents/SQLConnectorSelection/DBConnection.jsx b/frontend/src/pages/Admin/Agents/SQLConnectorSelection/DBConnection.jsx
index 9d7b35b0a..377a805d7 100644
--- a/frontend/src/pages/Admin/Agents/SQLConnectorSelection/DBConnection.jsx
+++ b/frontend/src/pages/Admin/Agents/SQLConnectorSelection/DBConnection.jsx
@@ -33,7 +33,7 @@ export default function DBConnection({ connection, onRemove, setHasChanges }) {
       <div className="flex w-full items-center justify-between">
         <div className="flex flex-col">
           <div className="text-sm font-semibold text-white">{database_id}</div>
-          <div className="mt-1 text-xs text-description">{engine}</div>
+          <div className="mt-1 text-xs text-theme-text-description">{engine}</div>
         </div>
         <button
           type="button"
diff --git a/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderItem/index.jsx b/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderItem/index.jsx
index eff29c53a..c4766611a 100644
--- a/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderItem/index.jsx
+++ b/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderItem/index.jsx
@@ -19,7 +19,7 @@ export default function SearchProviderItem({ provider, checked, onClick }) {
         <img src={logo} alt={`${name} logo`} className="w-10 h-10 rounded-md" />
         <div className="flex flex-col">
           <div className="text-sm font-semibold text-white">{name}</div>
-          <div className="mt-1 text-xs text-description">{description}</div>
+          <div className="mt-1 text-xs text-theme-text-description">{description}</div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx b/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
index a02da62cf..3c7750538 100644
--- a/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
+++ b/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
@@ -241,7 +241,7 @@ export default function AgentWebSearchSelection({
                     <div className="text-sm font-semibold text-white">
                       {selectedSearchProviderObject.name}
                     </div>
-                    <div className="mt-1 text-xs text-description">
+                    <div className="mt-1 text-xs text-theme-text-description">
                       {selectedSearchProviderObject.description}
                     </div>
                   </div>
diff --git a/frontend/src/pages/GeneralSettings/Appearance/LanguagePreference/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/LanguagePreference/index.jsx
index 8845978c9..5c99afd1a 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/LanguagePreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/LanguagePreference/index.jsx
@@ -22,7 +22,7 @@ export default function LanguagePreference() {
       <div className="flex items-center gap-x-4">
         <select
           name="userLang"
-          className="bg-theme-settings-input-bg w-fit mt-2 px-4 border-gray-500 text-white text-sm rounded-lg block py-2"
+          className="bg-theme-settings-input-bg w-fit mt-2 px-4 focus:outline-primary-button active:outline-primary-button outline-none text-white text-sm rounded-lg block py-2"
           defaultValue={currentLanguage || "en"}
           onChange={(e) => changeLanguage(e.target.value)}
         >
diff --git a/frontend/src/pages/GeneralSettings/Appearance/ThemePreference/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/ThemePreference/index.jsx
index fccc73ac3..e18a26adb 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/ThemePreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/ThemePreference/index.jsx
@@ -13,7 +13,7 @@ export default function ThemePreference() {
         <select
           value={theme}
           onChange={(e) => setTheme(e.target.value)}
-          className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+          className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-fit p-2.5"
         >
           {Object.entries(availableThemes).map(([key, value]) => (
             <option key={key} value={key}>
diff --git a/frontend/src/pages/GeneralSettings/Appearance/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
index 664f33991..a48e65307 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
@@ -9,7 +9,7 @@ import CustomAppName from "./CustomAppName";
 import LanguagePreference from "./LanguagePreference";
 import CustomSiteSettings from "./CustomSiteSettings";
 import ShowScrollbar from "./ShowScrollbar";
-// import ThemePreference from "./ThemePreference";
+import ThemePreference from "./ThemePreference";
 
 export default function Appearance() {
   const { t } = useTranslation();
@@ -32,8 +32,7 @@ export default function Appearance() {
               {t("appearance.description")}
             </p>
           </div>
-          {/* TODO: Enable when we have other themes */}
-          {/* <ThemePreference /> */}
+          <ThemePreference />
           <LanguagePreference />
           <ShowScrollbar />
           <CustomLogo />
diff --git a/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx b/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx
index 429429f1c..b624377ec 100644
--- a/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx
+++ b/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx
@@ -167,7 +167,7 @@ export default function SpeechToTextProvider({ settings }) {
                   <div className="text-sm font-semibold text-white">
                     {selectedProviderObject.name}
                   </div>
-                  <div className="mt-1 text-xs text-description">
+                  <div className="mt-1 text-xs text-theme-text-description">
                     {selectedProviderObject.description}
                   </div>
                 </div>
diff --git a/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx b/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx
index 6c4c3b450..c8c30174c 100644
--- a/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx
+++ b/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx
@@ -202,7 +202,7 @@ export default function TextToSpeechProvider({ settings }) {
                   <div className="text-sm font-semibold text-white">
                     {selectedProviderObject.name}
                   </div>
-                  <div className="mt-1 text-xs text-description">
+                  <div className="mt-1 text-xs text-theme-text-description">
                     {selectedProviderObject.description}
                   </div>
                 </div>
diff --git a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
index bfad2dc33..2133d05bd 100644
--- a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
@@ -324,7 +324,7 @@ export default function GeneralEmbeddingPreference() {
                         <div className="text-sm font-semibold text-white">
                           {selectedEmbedderObject.name}
                         </div>
-                        <div className="mt-1 text-xs text-description">
+                        <div className="mt-1 text-xs text-theme-text-description">
                           {selectedEmbedderObject.description}
                         </div>
                       </div>
diff --git a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
index 95438523b..01844e83e 100644
--- a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
@@ -448,7 +448,7 @@ export default function GeneralLLMPreference() {
                         <div className="text-sm font-semibold text-white">
                           {selectedLLMObject?.name || "None selected"}
                         </div>
-                        <div className="mt-1 text-xs text-description">
+                        <div className="mt-1 text-xs text-theme-text-description">
                           {selectedLLMObject?.description ||
                             "You need to select an LLM"}
                         </div>
diff --git a/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx b/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx
index 0cc67fd72..5da7699b7 100644
--- a/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx
@@ -206,7 +206,7 @@ export default function TranscriptionModelPreference() {
                         <div className="text-sm font-semibold text-white">
                           {selectedProviderObject.name}
                         </div>
-                        <div className="mt-1 text-xs text-description">
+                        <div className="mt-1 text-xs text-theme-text-description">
                           {selectedProviderObject.description}
                         </div>
                       </div>
diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
index 04ad77a6e..caf71d08c 100644
--- a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
+++ b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
@@ -282,7 +282,7 @@ export default function GeneralVectorDatabase() {
                         <div className="text-sm font-semibold text-white">
                           {selectedVDBObject.name}
                         </div>
-                        <div className="mt-1 text-xs text-description">
+                        <div className="mt-1 text-xs text-theme-text-description">
                           {selectedVDBObject.description}
                         </div>
                       </div>
diff --git a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx
index 573dd7211..1b3c7d2af 100644
--- a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx
@@ -184,7 +184,7 @@ export default function AgentLLMSelection({
                 <div className="text-sm font-semibold text-white">
                   {selectedLLMObject.name}
                 </div>
-                <div className="mt-1 text-xs text-description">
+                <div className="mt-1 text-xs text-theme-text-description">
                   {selectedLLMObject.description}
                 </div>
               </div>
diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/index.jsx
index 0e1735314..20df2464c 100644
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/index.jsx
@@ -149,7 +149,7 @@ export default function WorkspaceLLMSelection({
                 <div className="text-sm font-semibold text-white">
                   {selectedLLMObject.name}
                 </div>
-                <div className="mt-1 text-xs text-description">
+                <div className="mt-1 text-xs text-theme-text-description">
                   {selectedLLMObject.description}
                 </div>
               </div>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 61af84d9f..adcb2b44d 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -58,6 +58,7 @@ export default {
           text: {
             primary: 'var(--theme-text-primary)',
             secondary: 'var(--theme-text-secondary)',
+            description: 'var(--theme-text-description)',
           },
           sidebar: {
             item: {