Dark mode UI overhaul

frontend/src/App.jsx

@@ -15,6 +15,7 @@ import i18n from "./i18n";
 import { PfpProvider } from "./PfpContext";
 import { LogoProvider } from "./LogoContext";
 import { FullScreenLoader } from "./components/Preloader";
+import { ThemeProvider } from "./ThemeContext";
 
 const Main = lazy(() => import("@/pages/Main"));
 const InvitePage = lazy(() => import("@/pages/Invite"));
@@ -74,128 +75,135 @@ export default function App() {
         <LogoProvider>
           <PfpProvider>
             <I18nextProvider i18n={i18n}>
-              <Routes>
-                <Route path="/" element={<PrivateRoute Component={Main} />} />
-                <Route path="/login" element={<Login />} />
-                <Route
-                  path="/workspace/:slug/settings/:tab"
-                  element={<ManagerRoute Component={WorkspaceSettings} />}
-                />
-                <Route
-                  path="/workspace/:slug"
-                  element={<PrivateRoute Component={WorkspaceChat} />}
-                />
-                <Route
-                  path="/workspace/:slug/t/:threadSlug"
-                  element={<PrivateRoute Component={WorkspaceChat} />}
-                />
-                <Route path="/accept-invite/:code" element={<InvitePage />} />
+              <ThemeProvider>
+                <Routes>
+                  <Route path="/" element={<PrivateRoute Component={Main} />} />
+                  <Route path="/login" element={<Login />} />
+                  <Route
+                    path="/workspace/:slug/settings/:tab"
+                    element={<ManagerRoute Component={WorkspaceSettings} />}
+                  />
+                  <Route
+                    path="/workspace/:slug"
+                    element={<PrivateRoute Component={WorkspaceChat} />}
+                  />
+                  <Route
+                    path="/workspace/:slug/t/:threadSlug"
+                    element={<PrivateRoute Component={WorkspaceChat} />}
+                  />
+                  <Route path="/accept-invite/:code" element={<InvitePage />} />
 
-                {/* Admin */}
-                <Route
-                  path="/settings/llm-preference"
-                  element={<AdminRoute Component={GeneralLLMPreference} />}
-                />
-                <Route
-                  path="/settings/transcription-preference"
-                  element={
-                    <AdminRoute Component={GeneralTranscriptionPreference} />
-                  }
-                />
-                <Route
-                  path="/settings/audio-preference"
-                  element={<AdminRoute Component={GeneralAudioPreference} />}
-                />
-                <Route
-                  path="/settings/embedding-preference"
-                  element={
-                    <AdminRoute Component={GeneralEmbeddingPreference} />
-                  }
-                />
-                <Route
-                  path="/settings/text-splitter-preference"
-                  element={
-                    <AdminRoute Component={EmbeddingTextSplitterPreference} />
-                  }
-                />
-                <Route
-                  path="/settings/vector-database"
-                  element={<AdminRoute Component={GeneralVectorDatabase} />}
-                />
-                <Route
-                  path="/settings/agents"
-                  element={<AdminRoute Component={AdminAgents} />}
-                />
-                <Route
-                  path="/settings/event-logs"
-                  element={<AdminRoute Component={AdminLogs} />}
-                />
-                <Route
-                  path="/settings/embed-config"
-                  element={<AdminRoute Component={EmbedConfigSetup} />}
-                />
-                <Route
-                  path="/settings/embed-chats"
-                  element={<AdminRoute Component={EmbedChats} />}
-                />
-                {/* Manager */}
-                <Route
-                  path="/settings/security"
-                  element={<ManagerRoute Component={GeneralSecurity} />}
-                />
-                <Route
-                  path="/settings/privacy"
-                  element={<AdminRoute Component={PrivacyAndData} />}
-                />
-                <Route
-                  path="/settings/appearance"
-                  element={<ManagerRoute Component={GeneralAppearance} />}
-                />
-                <Route
-                  path="/settings/beta-features"
-                  element={<AdminRoute Component={ExperimentalFeatures} />}
-                />
-                <Route
-                  path="/settings/api-keys"
-                  element={<AdminRoute Component={GeneralApiKeys} />}
-                />
-                <Route
-                  path="/settings/browser-extension"
-                  element={<ManagerRoute Component={GeneralBrowserExtension} />}
-                />
-                <Route
-                  path="/settings/workspace-chats"
-                  element={<ManagerRoute Component={GeneralChats} />}
-                />
-                <Route
-                  path="/settings/invites"
-                  element={<ManagerRoute Component={AdminInvites} />}
-                />
-                <Route
-                  path="/settings/users"
-                  element={<ManagerRoute Component={AdminUsers} />}
-                />
-                <Route
-                  path="/settings/workspaces"
-                  element={<ManagerRoute Component={AdminWorkspaces} />}
-                />
-                {/* Onboarding Flow */}
-                <Route path="/onboarding" element={<OnboardingFlow />} />
-                <Route path="/onboarding/:step" element={<OnboardingFlow />} />
+                  {/* Admin */}
+                  <Route
+                    path="/settings/llm-preference"
+                    element={<AdminRoute Component={GeneralLLMPreference} />}
+                  />
+                  <Route
+                    path="/settings/transcription-preference"
+                    element={
+                      <AdminRoute Component={GeneralTranscriptionPreference} />
+                    }
+                  />
+                  <Route
+                    path="/settings/audio-preference"
+                    element={<AdminRoute Component={GeneralAudioPreference} />}
+                  />
+                  <Route
+                    path="/settings/embedding-preference"
+                    element={
+                      <AdminRoute Component={GeneralEmbeddingPreference} />
+                    }
+                  />
+                  <Route
+                    path="/settings/text-splitter-preference"
+                    element={
+                      <AdminRoute Component={EmbeddingTextSplitterPreference} />
+                    }
+                  />
+                  <Route
+                    path="/settings/vector-database"
+                    element={<AdminRoute Component={GeneralVectorDatabase} />}
+                  />
+                  <Route
+                    path="/settings/agents"
+                    element={<AdminRoute Component={AdminAgents} />}
+                  />
+                  <Route
+                    path="/settings/event-logs"
+                    element={<AdminRoute Component={AdminLogs} />}
+                  />
+                  <Route
+                    path="/settings/embed-config"
+                    element={<AdminRoute Component={EmbedConfigSetup} />}
+                  />
+                  <Route
+                    path="/settings/embed-chats"
+                    element={<AdminRoute Component={EmbedChats} />}
+                  />
+                  {/* Manager */}
+                  <Route
+                    path="/settings/security"
+                    element={<ManagerRoute Component={GeneralSecurity} />}
+                  />
+                  <Route
+                    path="/settings/privacy"
+                    element={<AdminRoute Component={PrivacyAndData} />}
+                  />
+                  <Route
+                    path="/settings/appearance"
+                    element={<ManagerRoute Component={GeneralAppearance} />}
+                  />
+                  <Route
+                    path="/settings/beta-features"
+                    element={<AdminRoute Component={ExperimentalFeatures} />}
+                  />
+                  <Route
+                    path="/settings/api-keys"
+                    element={<AdminRoute Component={GeneralApiKeys} />}
+                  />
+                  <Route
+                    path="/settings/browser-extension"
+                    element={
+                      <ManagerRoute Component={GeneralBrowserExtension} />
+                    }
+                  />
+                  <Route
+                    path="/settings/workspace-chats"
+                    element={<ManagerRoute Component={GeneralChats} />}
+                  />
+                  <Route
+                    path="/settings/invites"
+                    element={<ManagerRoute Component={AdminInvites} />}
+                  />
+                  <Route
+                    path="/settings/users"
+                    element={<ManagerRoute Component={AdminUsers} />}
+                  />
+                  <Route
+                    path="/settings/workspaces"
+                    element={<ManagerRoute Component={AdminWorkspaces} />}
+                  />
+                  {/* Onboarding Flow */}
+                  <Route path="/onboarding" element={<OnboardingFlow />} />
+                  <Route
+                    path="/onboarding/:step"
+                    element={<OnboardingFlow />}
+                  />
 
-                {/* Experimental feature pages  */}
-                {/* Live Document Sync feature */}
-                <Route
-                  path="/settings/beta-features/live-document-sync/manage"
-                  element={<AdminRoute Component={LiveDocumentSyncManage} />}
-                />
+                  {/* Experimental feature pages  */}
+                  {/* Live Document Sync feature */}
+                  <Route
+                    path="/settings/beta-features/live-document-sync/manage"
+                    element={<AdminRoute Component={LiveDocumentSyncManage} />}
+                  />
 
-                <Route
-                  path="/fine-tuning"
-                  element={<AdminRoute Component={FineTuningWalkthrough} />}
-                />
-              </Routes>
-              <ToastContainer />
+                  <Route
+                    path="/fine-tuning"
+                    element={<AdminRoute Component={FineTuningWalkthrough} />}
+                  />
+                </Routes>
+                <ToastContainer />
+              </ThemeProvider>
             </I18nextProvider>
           </PfpProvider>
         </LogoProvider>

frontend/src/ThemeContext.jsx

@@ -0,0 +1,16 @@
+import React, { createContext, useContext } from "react";
+import { useTheme } from "./hooks/useTheme";
+
+const ThemeContext = createContext();
+
+export function ThemeProvider({ children }) {
+  const themeValue = useTheme();
+
+  return (
+    <ThemeContext.Provider value={themeValue}>{children}</ThemeContext.Provider>
+  );
+}
+
+export function useThemeContext() {
+  return useContext(ThemeContext);
+}

frontend/src/components/ChangeWarning/index.jsx

@@ -17,7 +17,7 @@ export default function ChangeWarningModal({
             <h3 className="text-xl font-semibold text-yellow-300">Warning</h3>
           </div>
         </div>
-        <div className="w-[550px] p-6 text-white">
+        <div className="w-[550px] p-6 text-theme-text-primary">
           <p>
             {warningText}
             <br />
@@ -30,13 +30,13 @@ export default function ChangeWarningModal({
           <button
             onClick={onClose}
             type="button"
-            className="px-4 py-2 rounded-lg text-white hover:bg-red-500 transition-all duration-300"
+            className="px-4 py-2 rounded-lg text-theme-text-primary hover:bg-red-500 transition-all duration-300"
           >
             Cancel
           </button>
           <button
             onClick={onConfirm}
-            className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
+            className="transition-all duration-300 border border-theme-sidebar-border px-4 py-2 rounded-lg text-theme-text-primary text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
           >
             Confirm
           </button>

frontend/src/components/ChatBubble/index.jsx

@@ -1,14 +1,14 @@
 import React from "react";
 import UserIcon from "../UserIcon";
 import { userFromStorage } from "@/utils/request";
-import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
 
 export default function ChatBubble({ message, type, popMsg }) {
   const isUser = type === "user";
-  const backgroundColor = isUser ? USER_BACKGROUND_COLOR : AI_BACKGROUND_COLOR;
 
   return (
-    <div className={`flex justify-center items-end w-full ${backgroundColor}`}>
+    <div
+      className={`flex justify-center items-end w-full bg-theme-bg-secondary`}
+    >
       <div className={`py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}>
         <div className="flex gap-x-5">
           <UserIcon
@@ -17,7 +17,7 @@ export default function ChatBubble({ message, type, popMsg }) {
           />
 
           <span
-            className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
+            className={`whitespace-pre-line text-theme-text-primary font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
           >
             {message}
           </span>

frontend/src/components/ContextualSaveBar/index.jsx

@@ -10,12 +10,14 @@ export default function ContextualSaveBar({
   return (
     <div className="fixed top-0 left-0 right-0 h-14 bg-dark-input flex items-center justify-end px-4 z-[999]">
       <div className="absolute ml-4 left-0 md:left-1/2 transform md:-translate-x-1/2 flex items-center gap-x-2">
-        <Warning size={18} className="text-white" />
-        <p className="text-white font-medium text-xs">Unsaved Changes</p>
+        <Warning size={18} className="text-theme-text-primary" />
+        <p className="text-theme-text-primary font-medium text-xs">
+          Unsaved Changes
+        </p>
       </div>
       <div className="flex items-center gap-x-2">
         <button
-          className="border-none text-white font-medium text-sm px-[10px] py-[6px] rounded-md bg-white/5 hover:bg-white/10"
+          className="border-none text-theme-text-primary font-medium text-sm px-[10px] py-[6px] rounded-md bg-white/5 hover:bg-white/10"
           onClick={onCancel}
         >
           Cancel