attempt light mode

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>

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>

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"

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>

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>

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>

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-secondary: #f5f7fa;
-  --theme-bg-sidebar: #f4f4f4;
+  --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-text-secondary: #666666;
-  --theme-sidebar-item-default: rgba(0, 0, 0, 0.1);
+  --theme-text-description: #666666;
-  --theme-sidebar-item-selected: rgba(0, 0, 0, 0.2);
+  --theme-sidebar-item-default: #e0e7ef;
-  --theme-sidebar-item-hover: #e2e8f0;
+  --theme-sidebar-item-selected: #c7d5e3;
-  --theme-sidebar-subitem-default: rgba(0, 0, 0, 0.1);
+  --theme-sidebar-item-hover: #d1dce8;
-  --theme-sidebar-subitem-selected: rgba(0, 0, 0, 0.05);
+  --theme-sidebar-subitem-default: #e8eef5;
-  --theme-sidebar-subitem-hover: rgba(0, 0, 0, 0.05);
+  --theme-sidebar-subitem-selected: #d1dce8;
-  --theme-sidebar-footer-icon: rgba(0, 0, 0, 0.3);
+  --theme-sidebar-subitem-hover: #d9e2ec;
-  --theme-sidebar-footer-icon-hover: rgba(0, 0, 0, 0.5);
+  --theme-sidebar-footer-icon: #a0aec0;
-  --theme-sidebar-border: rgba(0, 0, 0, 0.1);
+  --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,

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"

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>

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>

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)}
         >

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}>

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 />

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>

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>

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>

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>

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>

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>

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>

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>

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: {