Add Dark Mode (#3936)

* k

* intermediate unification

* many changes

* update dark mode configs

* updates

* decent state

* functional

* mostly clean

* updaet model selector

* finalize

* calendar update

* additional styling

* nit

* k

* update colors

* push change

* k

* update

* k

* update

* address additions

* quick nit

web/components.json

@@ -4,7 +4,7 @@
   "rsc": true,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "tailwind-themes/tailwind.config.js",
     "css": "src/app/globals.css",
     "baseColor": "neutral",
     "cssVariables": false,

web/package.json

@@ -4,7 +4,7 @@
   "version-comment": "version field must be SemVer or chromatic will barf",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -21,17 +21,17 @@
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.1.2",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-radio-group": "^1.2.2",
     "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slider": "^1.2.2",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@sentry/nextjs": "^8.50.0",
@@ -56,6 +56,7 @@
     "lucide-react": "^0.454.0",
     "mdast-util-find-and-replace": "^3.0.1",
     "next": "^15.0.2",
+    "next-themes": "^0.4.4",
     "npm": "^10.8.0",
     "postcss": "^8.4.31",
     "posthog-js": "^1.176.0",

web/src/app/admin/add-connector/page.tsx

@@ -27,8 +27,12 @@ function SourceTile({
         w-40 
         cursor-pointer
         shadow-md
-        hover:bg-hover
-        ${preSelect ? "bg-hover subtle-pulse" : "bg-hover-light"}
+        hover:bg-accent-background-hovered
+        ${
+          preSelect
+            ? "bg-accent-background-hovered subtle-pulse"
+            : "bg-accent-background"
+        }
       `}
       href={sourceMetadata.adminUrl}
     >

web/src/app/admin/api-key/page.tsx

@@ -56,7 +56,7 @@ function NewApiKeyModal({
           <div className="flex mt-2">
             <b className="my-auto break-all">{apiKey}</b>
             <div
-              className="ml-2 my-auto p-2 hover:bg-hover rounded cursor-pointer"
+              className="ml-2 my-auto p-2 hover:bg-accent-background-hovered rounded cursor-pointer"
               onClick={() => {
                 setCopyClicked(true);
                 navigator.clipboard.writeText(apiKey);
@@ -179,7 +179,7 @@ function Main() {
                   flex 
                   mb-1 
                   w-fit 
-                  hover:bg-hover cursor-pointer
+                  hover:bg-accent-background-hovered cursor-pointer
                   p-2 
                   rounded-lg
                   border-border
@@ -203,7 +203,7 @@ function Main() {
                   flex 
                   mb-1 
                   w-fit 
-                  hover:bg-hover cursor-pointer
+                  hover:bg-accent-background-hovered cursor-pointer
                   p-2 
                   rounded-lg
                   border-border

web/src/app/admin/assistants/AssistantEditor.tsx

@@ -825,10 +825,7 @@ export function AssistantEditor({
                               </TooltipProvider>
                             </div>
                           </div>
-                          <p
-                            className="text-sm text-subtle"
-                            style={{ color: "rgb(113, 114, 121)" }}
-                          >
+                          <p className="text-sm text-neutral-700 dark:text-neutral-400">
                             Attach additional unique knowledge to this assistant
                           </p>
                         </div>
@@ -1217,7 +1214,7 @@ export function AssistantEditor({
                           setFieldValue("label_ids", newLabelIds);
                         }}
                         itemComponent={({ option }) => (
-                          <div className="flex items-center justify-between px-4 py-3 text-sm hover:bg-hover cursor-pointer border-b border-border last:border-b-0">
+                          <div className="flex items-center justify-between px-4 py-3 text-sm hover:bg-accent-background-hovered cursor-pointer border-b border-border last:border-b-0">
                             <div
                               className="flex-grow"
                               onClick={() => {
@@ -1356,7 +1353,7 @@ export function AssistantEditor({
                 </>
               )}
 
-              <div className="mt-12 gap-x-2 w-full  justify-end flex">
+              <div className="mt-12 gap-x-2 w-full justify-end flex">
                 <Button
                   type="submit"
                   disabled={isSubmitting || isRequestSuccessful}

web/src/app/admin/assistants/HidableSection.tsx

@@ -31,7 +31,7 @@ export function HidableSection({
   return (
     <div>
       <div
-        className="flex hover:bg-hover-light rounded cursor-pointer p-2"
+        className="flex hover:bg-accent-background rounded cursor-pointer p-2"
         onClick={() => setIsHidden(!isHidden)}
       >
         <SectionHeader includeMargin={false}>{sectionTitle}</SectionHeader>

web/src/app/admin/assistants/PersonaTable.tsx

@@ -187,7 +187,9 @@ export function PersonasTable() {
                   }
                 }}
                 className={`px-1 py-0.5 rounded flex ${
-                  isEditable ? "hover:bg-hover cursor-pointer" : ""
+                  isEditable
+                    ? "hover:bg-accent-background-hovered cursor-pointer"
+                    : ""
                 } select-none w-fit`}
               >
                 <div className="my-auto w-12">
@@ -205,7 +207,7 @@ export function PersonasTable() {
                 <div className="mr-auto my-auto">
                   {!persona.builtin_persona && isEditable ? (
                     <div
-                      className="hover:bg-hover rounded p-1 cursor-pointer"
+                      className="hover:bg-accent-background-hovered rounded p-1 cursor-pointer"
                       onClick={() => openDeleteModal(persona)}
                     >
                       <TrashIcon />

web/src/app/admin/assistants/StarterMessageList.tsx

@@ -65,7 +65,7 @@ export default function StarterMessagesList({
             onClick={() => {
               arrayHelpers.remove(index);
             }}
-            className={`text-gray-400 hover:text-red-500 ${
+            className={`text-text-400 hover:text-red-500 ${
               index === values.length - 1 && !starterMessage.message
                 ? "opacity-50 cursor-not-allowed"
                 : ""
@@ -105,7 +105,7 @@ export default function StarterMessagesList({
                       4 ||
                     isRefreshing ||
                     !autoStarterMessageEnabled
-                      ? "bg-neutral-800 text-neutral-300 cursor-not-allowed"
+                      ? "bg-background-800 text-text-300 cursor-not-allowed"
                       : ""
                   }
                 `}

web/src/app/admin/assistants/page.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { PersonasTable } from "./PersonaTable";
 import Text from "@/components/ui/text";
 import Title from "@/components/ui/title";

web/src/app/admin/bots/SlackBotUpdateForm.tsx

@@ -92,9 +92,9 @@ export const ExistingSlackBotForm = ({
 
         <div className="flex flex-col" ref={dropdownRef}>
           <div className="flex items-center gap-4">
-            <div className="border rounded-lg border-gray-200">
+            <div className="border rounded-lg border-background-200">
               <div
-                className="flex items-center gap-2 cursor-pointer hover:bg-gray-100 p-2"
+                className="flex items-center gap-2 cursor-pointer hover:bg-background-100 p-2"
                 onClick={() => setIsExpanded(!isExpanded)}
               >
                 {isExpanded ? (
@@ -117,7 +117,7 @@ export const ExistingSlackBotForm = ({
           </div>
 
           {isExpanded && (
-            <div className="bg-white border rounded-lg border-gray-200 shadow-lg absolute mt-12 right-0 z-10 w-full md:w-3/4 lg:w-1/2">
+            <div className="bg-white border rounded-lg border-background-200 shadow-lg absolute mt-12 right-0 z-10 w-full md:w-3/4 lg:w-1/2">
               <div className="p-4">
                 <SlackTokensForm
                   isUpdate={true}
@@ -134,7 +134,7 @@ export const ExistingSlackBotForm = ({
         </div>
       </div>
       <div className="mt-2">
-        <div className="inline-block border rounded-lg border-gray-200 p-2">
+        <div className="inline-block border rounded-lg border-background-200 p-2">
           <Checkbox
             label="Enabled"
             checked={formValues.enabled}

web/src/app/admin/bots/[bot-id]/channels/SlackChannelConfigFormFields.tsx

@@ -613,7 +613,7 @@ export function SlackChannelConfigFormFields({
                         <Link
                           key={ccpairinfo.id}
                           href={`/admin/connector/${ccpairinfo.id}`}
-                          className="flex items-center p-2 rounded-md hover:bg-gray-100 transition-colors"
+                          className="flex items-center p-2 rounded-md hover:bg-background-100 transition-colors"
                         >
                           <div className="mr-2">
                             <SourceIcon

web/src/app/admin/configuration/document-processing/page.tsx

@@ -84,7 +84,7 @@ function Main() {
             {isApiKeySet ? (
               <div className="w-full p-3 border rounded-md bg-background text-text flex items-center">
                 <span className="flex-grow">••••••••••••••••</span>
-                <Lock className="h-5 w-5 text-gray-400" />
+                <Lock className="h-5 w-5 text-text-400" />
               </div>
             ) : (
               <input

web/src/app/admin/configuration/llm/ConfiguredLLMProviderDisplay.tsx

@@ -25,8 +25,7 @@ function LLMProviderUpdateModal({
 }) {
   const providerName = existingLlmProvider?.name
     ? `"${existingLlmProvider.name}"`
-    : null ||
-      llmProviderDescriptor?.display_name ||
+    : llmProviderDescriptor?.display_name ||
       llmProviderDescriptor?.name ||
       "Custom LLM Provider";
   return (
@@ -75,7 +74,7 @@ function LLMProviderDisplay({
   return (
     <div>
       {popup}
-      <div className="border border-border p-3 rounded w-96 flex shadow-md">
+      <div className="border border-border p-3 dark:bg-neutral-800 dark:border-neutral-700 rounded w-96 flex shadow-md">
         <div className="my-auto">
           <div className="font-bold">{providerName} </div>
           <div className="text-xs italic">({existingLlmProvider.provider})</div>
@@ -113,7 +112,7 @@ function LLMProviderDisplay({
         {existingLlmProvider && (
           <div className="my-auto ml-3">
             {existingLlmProvider.is_default_provider ? (
-              <Badge variant="orange">Default</Badge>
+              <Badge variant="agent">Default</Badge>
             ) : (
               <Badge variant="success">Enabled</Badge>
             )}

web/src/app/admin/configuration/llm/CustomLLMProviderUpdateForm.tsx

@@ -348,7 +348,7 @@ export function CustomLLMProviderUpdateForm({
                           </div>
                           <div className="my-auto">
                             <FiX
-                              className="my-auto w-10 h-10 cursor-pointer hover:bg-hover rounded p-2"
+                              className="my-auto w-10 h-10 cursor-pointer hover:bg-accent-background-hovered rounded p-2"
                               onClick={() => arrayHelpers.remove(index)}
                             />
                           </div>

web/src/app/admin/configuration/llm/LLMConfiguration.tsx

@@ -73,7 +73,7 @@ function DefaultLLMProviderDisplay({
   return (
     <div>
       {popup}
-      <div className="border border-border p-3 rounded w-96 flex shadow-md">
+      <div className="border border-border p-3 dark:bg-neutral-800 dark:border-neutral-700 rounded w-96 flex shadow-md">
         <div className="my-auto">
           <div className="font-bold">{providerName} </div>
         </div>

web/src/app/admin/configuration/llm/interfaces.ts

@@ -12,6 +12,7 @@ import {
   OpenSourceIcon,
   AnthropicSVG,
   IconProps,
+  OpenAIISVG,
 } from "@/components/icons/icons";
 import { FaRobot } from "react-icons/fa";
 
@@ -104,7 +105,7 @@ export const getProviderIcon = (providerName: string, modelName?: string) => {
   switch (providerName) {
     case "openai":
       // Special cases for openai based on modelName
-      return modelNameToIcon(modelName || "", OpenAIIcon);
+      return modelNameToIcon(modelName || "", OpenAIISVG);
     case "anthropic":
       return AnthropicSVG;
     case "bedrock":

web/src/app/admin/configuration/search/page.tsx

@@ -111,14 +111,14 @@ function Main() {
                   <div className="space-y-4">
                     <div>
                       <Text className="font-semibold">Reranking Model</Text>
-                      <Text className="text-gray-700">
+                      <Text className="text-text-700">
                         {searchSettings.rerank_model_name || "Not set"}
                       </Text>
                     </div>
 
                     <div>
                       <Text className="font-semibold">Results to Rerank</Text>
-                      <Text className="text-gray-700">
+                      <Text className="text-text-700">
                         {searchSettings.num_rerank}
                       </Text>
                     </div>
@@ -127,7 +127,7 @@ function Main() {
                       <Text className="font-semibold">
                         Multilingual Expansion
                       </Text>
-                      <Text className="text-gray-700">
+                      <Text className="text-text-700">
                         {searchSettings.multilingual_expansion.length > 0
                           ? searchSettings.multilingual_expansion.join(", ")
                           : "None"}
@@ -136,7 +136,7 @@ function Main() {
 
                     <div>
                       <Text className="font-semibold">Multipass Indexing</Text>
-                      <Text className="text-gray-700">
+                      <Text className="text-text-700">
                         {searchSettings.multipass_indexing
                           ? "Enabled"
                           : "Disabled"}
@@ -147,7 +147,7 @@ function Main() {
                       <Text className="font-semibold">
                         Disable Reranking for Streaming
                       </Text>
-                      <Text className="text-gray-700">
+                      <Text className="text-text-700">
                         {searchSettings.disable_rerank_for_streaming
                           ? "Yes"
                           : "No"}

web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx

@@ -149,7 +149,7 @@ export function AdvancedConfigDisplay({
     <>
       <Title className="mt-8 mb-2">Advanced Configuration</Title>
       <CardSection>
-        <ul className="w-full text-sm divide-y divide-background-200 dark:divide-background-700">
+        <ul className="w-full text-sm divide-y divide-neutral-200 dark:divide-neutral-700">
           {pruneFreq && (
             <li
               key={0}

web/src/app/admin/connector/[ccPairId]/DeletionErrorStatus.tsx

@@ -11,7 +11,7 @@ export default function DeletionErrorStatus({
         <h3 className="text-base font-medium">Deletion Error</h3>
         <div className="ml-2 relative group">
           <FiInfo className="h-4 w-4 text-error-600 cursor-help" />
-          <div className="absolute z-10 w-64 p-2 mt-2 text-sm bg-white rounded-md shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 border border-gray-200">
+          <div className="absolute z-10 w-64 p-2 mt-2 text-sm bg-white rounded-md shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 border border-background-200">
             This error occurred while attempting to delete the connector. You
             may re-attempt a deletion by clicking the &quot;Delete&quot; button.
           </div>

web/src/app/admin/connector/[ccPairId]/page.tsx

@@ -293,7 +293,7 @@ function Main({ ccPairId }: { ccPairId: number }) {
         <b className="text-emphasis">{ccPair.num_docs_indexed}</b>
       </div>
       {!ccPair.is_editable_for_current_user && (
-        <div className="text-sm mt-2 text-neutral-500 italic">
+        <div className="text-sm mt-2 text-text-500 italic">
           {ccPair.access_type === "public"
             ? "Public connectors are not editable by curators."
             : ccPair.access_type === "sync"

web/src/app/admin/connectors/[connector]/NavigationRow.tsx

@@ -50,11 +50,10 @@ const NavigationRow = ({
           </SquareNavigationButton>
         )}
       </div>
-
       <div className="flex justify-center">
         {(formStep > 0 || noCredentials) && (
           <SquareNavigationButton
-            className="bg-accent text-white py-2.5 px-3.5 disabled:opacity-50"
+            className="bg-agent text-white py-2.5 px-3.5 disabled:opacity-50"
             disabled={!isValid}
             onClick={onSubmit}
           >
@@ -63,7 +62,6 @@ const NavigationRow = ({
           </SquareNavigationButton>
         )}
       </div>
-
       <div className="flex justify-end">
         {formStep === 0 && (
           <SquareNavigationButton

web/src/app/admin/connectors/[connector]/Sidebar.tsx

@@ -96,7 +96,7 @@ export default function Sidebar() {
             <div className="mx-auto w-full max-w-2xl px-4 py-8">
               <div className="relative">
                 {connector != "file" && (
-                  <div className="absolute h-[85%] left-[6px] top-[8px] bottom-0 w-0.5 bg-gray-300"></div>
+                  <div className="absolute h-[85%] left-[6px] top-[8px] bottom-0 w-0.5 bg-background-300"></div>
                 )}
                 {settingSteps.map((step, index) => {
                   const allowed =
@@ -119,7 +119,7 @@ export default function Sidebar() {
                       <div className="flex-shrink-0 mr-4 z-10">
                         <div
                           className={`rounded-full h-3.5 w-3.5 flex items-center justify-center ${
-                            allowed ? "bg-blue-500" : "bg-gray-300"
+                            allowed ? "bg-blue-500" : "bg-background-300"
                           }`}
                         >
                           {formStep === index && (
@@ -129,7 +129,7 @@ export default function Sidebar() {
                       </div>
                       <div
                         className={`${
-                          index <= formStep ? "text-gray-800" : "text-gray-500"
+                          index <= formStep ? "text-text-800" : "text-text-500"
                         }`}
                       >
                         {step}

web/src/app/admin/connectors/[connector]/pages/ConnectorInput/NumberInput.tsx

@@ -16,7 +16,7 @@ export default function NumberInput({
 }) {
   return (
     <div className="w-full flex flex-col">
-      <label className="block text-base font-medium text-text-700 mb-1">
+      <label className="block text-base font-medium text-text-700 dark:text-neutral-100 mb-1">
         {label}
         {optional && <span className="text-text-500 ml-1">(optional)</span>}
       </label>
@@ -27,10 +27,10 @@ export default function NumberInput({
         name={name}
         min="-1"
         className={`mt-2 block w-full px-3 py-2 
-                bg-white border border-gray-300 rounded-md 
-                text-sm shadow-sm placeholder-gray-400
+                bg-[#fff] dark:bg-transparent border border-background-300 rounded-md 
+                text-sm shadow-sm placeholder-text-400
                 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
-                disabled:bg-gray-50 disabled:text-gray-500 disabled:border-gray-200 disabled:shadow-none
+                disabled:bg-background-50 disabled:text-text-500 disabled:border-background-200 disabled:shadow-none
                 invalid:border-pink-500 invalid:text-pink-600
                 focus:invalid:border-pink-500 focus:invalid:ring-pink-500`}
       />

web/src/app/admin/connectors/[connector]/pages/formelements/NumberInput.tsx

@@ -30,10 +30,10 @@ export default function NumberInput({
         min="-1"
         value={value === 0 && showNeverIfZero ? "Never" : value}
         className={`mt-2 block w-full px-3 py-2 
-                bg-white border border-gray-300 rounded-md 
-                text-sm shadow-sm placeholder-gray-400
+                bg-white border border-background-300 rounded-md 
+                text-sm shadow-sm placeholder-text-400
                 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
-                disabled:bg-gray-50 disabled:text-gray-500 disabled:border-gray-200 disabled:shadow-none
+                disabled:bg-background-50 disabled:text-text-500 disabled:border-background-200 disabled:shadow-none
                 invalid:border-pink-500 invalid:text-pink-600
                 focus:invalid:border-pink-500 focus:invalid:ring-pink-500`}
       />

web/src/app/admin/connectors/[connector]/pages/gdrive/Credential.tsx

@@ -34,9 +34,9 @@ export const DriveJsonUpload = ({
     <>
       <input
         className={
-          "mr-3 text-sm text-gray-900 border border-gray-300 " +
-          "cursor-pointer bg-backgrournd dark:text-gray-400 focus:outline-none " +
-          "dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+          "mr-3 text-sm text-text-900 border border-background-300 " +
+          "cursor-pointer bg-backgrournd dark:text-text-400 focus:outline-none " +
+          "dark:bg-background-700 dark:border-background-600 dark:placeholder-text-400"
         }
         type="file"
         accept=".json"

web/src/app/admin/connectors/[connector]/pages/gmail/Credential.tsx

@@ -34,9 +34,9 @@ const DriveJsonUpload = ({
     <>
       <input
         className={
-          "mr-3 text-sm text-gray-900 border border-gray-300 overflow-visible " +
-          "cursor-pointer bg-background dark:text-gray-400 focus:outline-none " +
-          "dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+          "mr-3 text-sm text-text-900 border border-background-300 overflow-visible " +
+          "cursor-pointer bg-background dark:text-text-400 focus:outline-none " +
+          "dark:bg-background-700 dark:border-background-600 dark:placeholder-text-400"
         }
         type="file"
         accept=".json"

web/src/app/admin/documents/explorer/Explorer.tsx

@@ -50,7 +50,7 @@ const DocumentDisplay = ({
         </a>
       </div>
       <div className="flex flex-wrap gap-x-2 mt-1 text-xs">
-        <div className="px-1 py-0.5 bg-hover rounded flex">
+        <div className="px-1 py-0.5 bg-accent-background-hovered rounded flex">
           <p className="mr-1 my-auto">Boost:</p>
           <ScoreSection
             documentId={document.document_id}
@@ -77,7 +77,7 @@ const DocumentDisplay = ({
               });
             }
           }}
-          className="px-1 py-0.5 bg-hover hover:bg-hover-light rounded flex cursor-pointer select-none"
+          className="px-1 py-0.5 bg-accent-background-hovered hover:bg-accent-background rounded flex cursor-pointer select-none"
         >
           <div className="my-auto">
             {document.hidden ? (
@@ -169,7 +169,7 @@ export function Explorer({
     <div>
       {popup}
       <div className="justify-center py-2">
-        <div className="flex items-center w-full border-2 border-border rounded-lg px-4 py-2 focus-within:border-accent bg-background-search">
+        <div className="flex items-center w-full border-2 border-border rounded-lg px-4 py-2 focus-within:border-accent bg-background-search dark:bg-transparent">
           <MagnifyingGlass />
           <textarea
             autoFocus
@@ -221,7 +221,7 @@ export function Explorer({
         </div>
       )}
       {!query && (
-        <div className="flex text-emphasis mt-3">
+        <div className="flex text-text-darker mt-3">
           Search for a document above to modify its boost or hide it from
           searches.
         </div>

web/src/app/admin/documents/feedback/DocumentFeedbackTable.tsx

@@ -37,7 +37,7 @@ const IsVisibleSection = ({
               );
               onUpdate(response);
             }}
-            className="flex text-error cursor-pointer hover:bg-hover py-1 px-2 w-fit rounded-full"
+            className="flex text-error cursor-pointer hover:bg-accent-background-hovered py-1 px-2 w-fit rounded-full"
           >
             <div className="select-none">Hidden</div>
             <div className="ml-1 my-auto">
@@ -53,7 +53,7 @@ const IsVisibleSection = ({
               );
               onUpdate(response);
             }}
-            className="flex cursor-pointer hover:bg-hover py-1 px-2 w-fit rounded-full"
+            className="flex cursor-pointer hover:bg-accent-background-hovered py-1 px-2 w-fit rounded-full"
           >
             <div className="my-auto select-none">Visible</div>
             <div className="ml-1 my-auto">

web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx

@@ -189,7 +189,7 @@ export const DocumentSetCreationForm = ({
                                   cursor-pointer ` +
                                     (isSelected
                                       ? " bg-background-strong"
-                                      : " hover:bg-hover")
+                                      : " hover:bg-accent-background-hovered")
                                   }
                                   onClick={() => {
                                     if (isSelected) {
@@ -305,7 +305,7 @@ export const DocumentSetCreationForm = ({
                               cursor-pointer ` +
                                 (isSelected
                                   ? " bg-background-strong"
-                                  : " hover:bg-hover")
+                                  : " hover:bg-accent-background-hovered")
                               }
                               onClick={() => {
                                 if (isSelected) {

web/src/app/admin/documents/sets/page.tsx

@@ -55,7 +55,7 @@ const EditRow = ({
 
   if (!isEditable) {
     return (
-      <div className="text-emphasis font-medium my-auto p-1">
+      <div className="text-text-darkerfont-medium my-auto p-1">
         {documentSet.name}
       </div>
     );
@@ -68,7 +68,7 @@ const EditRow = ({
           <TooltipTrigger asChild>
             <div
               className={`
-              text-emphasis font-medium my-auto p-1 hover:bg-hover-light flex items-center select-none
+              text-text-darkerfont-medium my-auto p-1 hover:bg-accent-background flex items-center select-none
               ${documentSet.is_up_to_date ? "cursor-pointer" : "cursor-default"}
             `}
               style={{ wordBreak: "normal", overflowWrap: "break-word" }}
@@ -213,7 +213,7 @@ const DocumentSetTable = ({
                       </Badge>
                     ) : (
                       <Badge
-                        variant={isEditable ? "in_progress" : "outline"}
+                        variant={isEditable ? "private" : "default"}
                         icon={FiLock}
                       >
                         Private

web/src/app/admin/embeddings/EmbeddingModelSelectionForm.tsx

@@ -235,8 +235,8 @@ export function EmbeddingModelSelection({
           onClick={() => setModelTab(null)}
           className={`mr-4 p-2 font-bold  ${
             !modelTab
-              ? "rounded bg-background-900 text-text-100 underline"
-              : " hover:underline bg-background-100"
+              ? "rounded bg-background-900 dark:bg-neutral-900 text-text-100 dark:text-neutral-100 underline"
+              : " hover:underline bg-background-100 dark:bg-neutral-700"
           }`}
         >
           Current
@@ -246,8 +246,8 @@ export function EmbeddingModelSelection({
             onClick={() => setModelTab("cloud")}
             className={`mx-2 p-2 font-bold  ${
               modelTab == "cloud"
-                ? "rounded bg-background-900 text-text-100 underline"
-                : " hover:underline bg-background-100"
+                ? "rounded bg-background-900 dark:bg-neutral-900 text-text-100 dark:text-neutral-100 underline"
+                : " hover:underline bg-background-100 dark:bg-neutral-700"
             }`}
           >
             Cloud-based
@@ -258,8 +258,8 @@ export function EmbeddingModelSelection({
             onClick={() => setModelTab("open")}
             className={` mx-2 p-2 font-bold  ${
               modelTab == "open"
-                ? "rounded bg-background-900 text-text-100 underline"
-                : "hover:underline bg-background-100"
+                ? "rounded bg-background-900 dark:bg-neutral-900 text-text-100 dark:text-neutral-100 underline"
+                : "hover:underline bg-background-100 dark:bg-neutral-700"
             }`}
           >
             Self-hosted

web/src/app/admin/embeddings/RerankingFormPage.tsx

@@ -177,8 +177,8 @@ const RerankingDetailsForm = forwardRef<
                         key={`${card.rerank_provider_type}-${card.modelName}`}
                         className={`p-4 border rounded-lg cursor-pointer transition-all duration-200 ${
                           isSelected
-                            ? "border-blue-500 bg-blue-50 shadow-md"
-                            : "border-gray-200 hover:border-blue-300 hover:shadow-sm"
+                            ? "border-blue-500 bg-blue-50 dark:bg-blue-900 dark:border-blue-700 shadow-md"
+                            : "border-background-200 hover:border-blue-300 hover:shadow-sm dark:border-neutral-700 dark:hover:border-blue-300"
                         }`}
                         onClick={() => {
                           if (
@@ -240,10 +240,10 @@ const RerankingDetailsForm = forwardRef<
                             </a>
                           )}
                         </div>
-                        <p className="text-sm text-gray-600 mb-2">
+                        <p className="text-sm text-text-600 mb-2">
                           {card.description}
                         </p>
-                        <div className="text-xs text-gray-500">
+                        <div className="text-xs text-text-500">
                           {card.cloud ? "Cloud-based" : "Self-hosted"}
                         </div>
                       </div>

web/src/app/admin/embeddings/pages/CloudEmbeddingPage.tsx

@@ -210,12 +210,12 @@ export default function CloudEmbeddingPage({
             )}
 
             {!liteLLMProvider && (
-              <CardSection className="mt-2 w-full max-w-4xl bg-gray-50 border border-gray-200">
+              <CardSection className="mt-2 w-full max-w-4xl bg-background-50 border border-background-200">
                 <div className="p-4">
                   <Text className="text-lg font-semibold mb-2">
                     API URL Required
                   </Text>
-                  <Text className="text-sm text-gray-600 mb-4">
+                  <Text className="text-sm text-text-600 mb-4">
                     Before you can add models, you need to provide an API URL
                     for your LiteLLM proxy. Click the &quot;Provide API
                     URL&quot; button above to set up your LiteLLM configuration.
@@ -313,16 +313,16 @@ export default function CloudEmbeddingPage({
                 Configure Azure OpenAI
               </button>
               <div className="mt-2 w-full max-w-4xl">
-                <CardSection className="p-4 border border-gray-200 rounded-lg shadow-sm">
+                <CardSection className="p-4 border border-background-200 rounded-lg shadow-sm">
                   <Text className="text-base font-medium mb-2">
                     Configure Azure OpenAI for Embeddings
                   </Text>
-                  <Text className="text-sm text-gray-600 mb-3">
+                  <Text className="text-sm text-text-600 mb-3">
                     Click &quot;Configure Azure OpenAI&quot; to set up Azure
                     OpenAI for embeddings.
                   </Text>
-                  <div className="flex items-center text-sm text-gray-700">
-                    <FiInfo className="text-gray-400 mr-2" size={16} />
+                  <div className="flex items-center text-sm text-text-700">
+                    <FiInfo className="text-text-400 mr-2" size={16} />
                     <Text>
                       You&apos;ll need: API version, base URL, API key, model
                       name, and deployment name.
@@ -339,7 +339,7 @@ export default function CloudEmbeddingPage({
                 </Text>
 
                 {azureProviderDetails ? (
-                  <CardSection className="bg-white shadow-sm border border-gray-200 rounded-lg">
+                  <CardSection className="bg-white shadow-sm border border-background-200 rounded-lg">
                     <div className="p-4 space-y-3">
                       <div className="flex justify-between">
                         <span className="font-medium">API Version:</span>
@@ -364,8 +364,8 @@ export default function CloudEmbeddingPage({
                     </button>
                   </CardSection>
                 ) : (
-                  <CardSection className="bg-gray-50 border border-gray-200 rounded-lg">
-                    <div className="p-4 text-gray-500 text-center">
+                  <CardSection className="bg-background-50 border border-background-200 rounded-lg">
+                    <div className="p-4 text-text-500 text-center">
                       No Azure provider has been configured yet.
                     </div>
                   </CardSection>
@@ -450,8 +450,8 @@ export function CloudModelCard({
     <div
       className={`p-4 w-96 border rounded-lg transition-all duration-200 ${
         enabled
-          ? "border-blue-500 bg-blue-50 shadow-md"
-          : "border-gray-300 hover:border-blue-300 hover:shadow-sm"
+          ? "border-blue-500 bg-blue-50 dark:bg-blue-950 shadow-md"
+          : "border-background-300 hover:border-blue-300 hover:shadow-sm"
       } ${!provider.configured && "opacity-80 hover:opacity-100"}`}
     >
       {popup}
@@ -465,7 +465,9 @@ export function CloudModelCard({
       )}
 
       <div className="flex items-center justify-between mb-3">
-        <h3 className="font-bold text-lg">{model.model_name}</h3>
+        <h3 className="font-bold dark:text-neutral-100 text-lg">
+          {model.model_name}
+        </h3>
         <div className="flex gap-x-2">
           {model.provider_type == EmbeddingProvider.LITELLM.toLowerCase() && (
             <button
@@ -487,10 +489,12 @@ export function CloudModelCard({
           </a>
         </div>
       </div>
-      <p className="text-sm text-gray-600 mb-2">{model.description}</p>
+      <p className="text-sm text-text-600 dark:text-neutral-400 mb-2">
+        {model.description}
+      </p>
       {model?.provider_type?.toLowerCase() !=
         EmbeddingProvider.LITELLM.toLowerCase() && (
-        <div className="text-xs text-gray-500 mb-2">
+        <div className="text-xs text-text-500 mb-2">
           ${model.pricePerMillion}/M tokens
         </div>
       )}
@@ -499,7 +503,7 @@ export function CloudModelCard({
           className={`w-full p-2 rounded-lg text-sm ${
             enabled
               ? "bg-background-125 border border-border cursor-not-allowed"
-              : "bg-background border border-border hover:bg-hover cursor-pointer"
+              : "bg-background border border-border hover:bg-accent-background-hovered cursor-pointer"
           }`}
           onClick={() => {
             if (enabled) {

web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx

@@ -187,7 +187,7 @@ export default function EmbeddingForm() {
       return needsReIndex ? (
         <div className="flex mx-auto gap-x-1 ml-auto items-center">
           <button
-            className="enabled:cursor-pointer disabled:bg-accent/50 disabled:cursor-not-allowed bg-accent flex gap-x-1 items-center text-white py-2.5 px-3.5 text-sm font-regular rounded-sm"
+            className="enabled:cursor-pointer disabled:bg-accent/50 disabled:cursor-not-allowed bg-agent flex gap-x-1 items-center text-white py-2.5 px-3.5 text-sm font-regular rounded-sm"
             onClick={handleReindex}
           >
             Re-index
@@ -214,7 +214,7 @@ export default function EmbeddingForm() {
         </div>
       ) : (
         <button
-          className="enabled:cursor-pointer ml-auto disabled:bg-accent/50 disabled:cursor-not-allowed bg-accent flex mx-auto gap-x-1 items-center text-white py-2.5 px-3.5 text-sm font-regular rounded-sm"
+          className="enabled:cursor-pointer ml-auto disabled:bg-accent/50 disabled:cursor-not-allowed bg-agent flex mx-auto gap-x-1 items-center text-white py-2.5 px-3.5 text-sm font-regular rounded-sm"
           onClick={async () => {
             updateSearch();
             navigateToEmbeddingPage("search settings");

web/src/app/admin/indexing/[id]/IndexAttemptErrorsTable.tsx

@@ -52,13 +52,13 @@ export function CustomModal({
                   setCopyClicked(true);
                   setTimeout(() => setCopyClicked(false), 2000);
                 }}
-                className="flex w-fit cursor-pointer hover:bg-hover-light p-2 border-border border rounded"
+                className="flex w-fit cursor-pointer hover:bg-accent-background p-2 border-border border rounded"
               >
                 Copy full content
                 <CopyIcon className="ml-2 my-auto" />
               </div>
             ) : (
-              <div className="flex w-fit hover:bg-hover-light p-2 border-border border rounded cursor-default">
+              <div className="flex w-fit hover:bg-accent-background p-2 border-border border rounded cursor-default">
                 Copied to clipboard
                 <CheckmarkIcon
                   className="my-auto ml-2 flex flex-shrink-0 text-success"

web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx

@@ -59,7 +59,7 @@ function SummaryRow({
   return (
     <TableRow
       onClick={onToggle}
-      className="border-border group hover:bg-background-settings-hover bg-background-sidebar py-4 rounded-sm !border cursor-pointer"
+      className="border-border dark:hover:bg-neutral-800 dark:border-neutral-700 group hover:bg-background-settings-hover/20 bg-background-sidebar py-4 rounded-sm !border cursor-pointer"
     >
       <TableCell>
         <div className="text-xl flex items-center truncate ellipsis gap-x-2 font-semibold">
@@ -76,37 +76,26 @@ function SummaryRow({
       </TableCell>
 
       <TableCell>
-        <div className="text-sm text-gray-500">Total Connectors</div>
+        <div className="text-sm text-neutral-500 dark:text-neutral-300">
+          Total Connectors
+        </div>
         <div className="text-xl font-semibold">{summary.count}</div>
       </TableCell>
 
       <TableCell>
-        <div className="text-sm text-gray-500">Active Connectors</div>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div className="flex items-center mt-1">
-                <div className="w-full bg-white rounded-full h-2 mr-2">
-                  <div
-                    className="bg-green-500 h-2 rounded-full"
-                    style={{ width: `${activePercentage}%` }}
-                  ></div>
-                </div>
-                <span className="text-sm font-medium whitespace-nowrap">
-                  {summary.active} ({activePercentage.toFixed(0)}%)
-                </span>
-              </div>
-            </TooltipTrigger>
-            <TooltipContent>
-              {summary.active} out of {summary.count} connectors are active
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        <div className="text-sm text-neutral-500 dark:text-neutral-300">
+          Active Connectors
+        </div>
+        <p className="flex text-xl mx-auto font-semibold items-center text-lg mt-1">
+          {summary.active}/{summary.count}
+        </p>
       </TableCell>
 
       {isPaidEnterpriseFeaturesEnabled && (
         <TableCell>
-          <div className="text-sm text-gray-500">Public Connectors</div>
+          <div className="text-sm text-neutral-500 dark:text-neutral-300">
+            Public Connectors
+          </div>
           <p className="flex text-xl mx-auto font-semibold items-center text-lg mt-1">
             {summary.public}/{summary.count}
           </p>
@@ -114,14 +103,18 @@ function SummaryRow({
       )}
 
       <TableCell>
-        <div className="text-sm text-gray-500">Total Docs Indexed</div>
+        <div className="text-sm text-neutral-500 dark:text-neutral-300">
+          Total Docs Indexed
+        </div>
         <div className="text-xl font-semibold">
           {summary.totalDocsIndexed.toLocaleString()}
         </div>
       </TableCell>
 
       <TableCell>
-        <div className="text-sm text-gray-500">Errors</div>
+        <div className="text-sm text-neutral-500 dark:text-neutral-300">
+          Errors
+        </div>
 
         <div className="flex items-center text-lg gap-x-1 font-semibold">
           {summary.errors > 0 && <Warning className="text-error h-6 w-6" />}
@@ -178,7 +171,7 @@ function ConnectorRow({
         );
       case "not_started":
         return (
-          <Badge circle variant="purple">
+          <Badge circle variant="not_started">
             Scheduled
           </Badge>
         );
@@ -193,11 +186,13 @@ function ConnectorRow({
 
   return (
     <TableRow
-      className={`hover:bg-hover-light ${
-        invisible
-          ? "invisible !h-0 !-mb-10 !border-none"
-          : "!border !border-border"
-      }  w-full cursor-pointer relative `}
+      className={`
+border border-border dark:border-neutral-700
+        hover:bg-accent-background ${
+          invisible
+            ? "invisible !h-0 !-mb-10 !border-none"
+            : "!border border-border dark:border-neutral-700"
+        }  w-full cursor-pointer relative `}
       onClick={() => {
         router.push(`/admin/connector/${ccPairsIndexingStatus.cc_pair_id}`);
       }}
@@ -219,16 +214,13 @@ function ConnectorRow({
             </Badge>
           ) : ccPairsIndexingStatus.access_type === "sync" ? (
             <Badge
-              variant={isEditable ? "orange" : "default"}
+              variant={isEditable ? "auto-sync" : "default"}
               icon={FiRefreshCw}
             >
-              Sync
+              Auto-Sync
             </Badge>
           ) : (
-            <Badge
-              variant={isEditable ? "in_progress" : "default"}
-              icon={FiLock}
-            >
+            <Badge variant={isEditable ? "private" : "default"} icon={FiLock}>
               Private
             </Badge>
           )}
@@ -457,7 +449,10 @@ export function CCPairIndexingStatusTable({
                   />
                   {connectorsToggled[source] && (
                     <>
-                      <TableRow className="border border-border">
+                      <TableRow
+                        noHover
+                        className="border  !  border-border dark:border-neutral-700"
+                      >
                         <TableHead>Name</TableHead>
                         <TableHead>Last Indexed</TableHead>
                         <TableHead>Activity</TableHead>

web/src/app/admin/settings/AnonymousUserPath.tsx

@@ -96,11 +96,11 @@ export function AnonymousUserPath({
   }
 
   return (
-    <div className="mt-4 ml-6 max-w-xl p-6 bg-white shadow-lg border border-gray-200 rounded-lg">
-      <h4 className="font-semibold text-lg text-gray-800 mb-3">
+    <div className="mt-4 ml-6 max-w-xl p-6 bg-white shadow-lg border border-background-200 rounded-lg">
+      <h4 className="font-semibold text-lg text-text-800 mb-3">
         Anonymous User Access
       </h4>
-      <p className="text-gray-600 text-sm mb-4">
+      <p className="text-text-600 text-sm mb-4">
         Enable this to allow non-authenticated users to access all documents
         indexed by public connectors in your workspace.
         {anonymousUserPath
@@ -115,12 +115,12 @@ export function AnonymousUserPath({
       ) : (
         <div className="flex flex-col gap-2 justify-center items-start">
           <div className="w-full flex-grow  flex items-center rounded-md shadow-sm">
-            <span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm h-10">
+            <span className="inline-flex items-center rounded-l-md border border-r-0 border-background-300 bg-background-50 px-3 text-text-500 sm:text-sm h-10">
               {settings?.webDomain}/anonymous/
             </span>
             <Input
               type="text"
-              className="block w-full flex-grow flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm h-10"
+              className="block w-full flex-grow flex-1 rounded-none rounded-r-md border-background-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm h-10"
               placeholder="your-custom-path"
               value={customPath ?? anonymousUserPath ?? ""}
               onChange={(e) => setCustomPath(e.target.value)}

web/src/app/admin/systeminfo/page.tsx

@@ -15,7 +15,7 @@ const Page = async () => {
 
   return (
     <div>
-      <div className="border-solid border-gray-600 border-b pb-2 mb-4 flex">
+      <div className="border-solid border-background-600 border-b pb-2 mb-4 flex">
         <NotebookIcon size={32} />
         <h1 className="text-3xl font-bold pl-2">Version</h1>
       </div>

web/src/app/admin/token-rate-limits/TokenRateLimitTables.tsx

@@ -109,7 +109,7 @@ export const TokenRateLimitTable = ({
                       }
                       className={`px-1 py-0.5 rounded select-none w-24 ${
                         isAdmin
-                          ? "hover:bg-hover-light cursor-pointer"
+                          ? "hover:bg-accent-background cursor-pointer"
                           : "opacity-50"
                       }`}
                     >
@@ -131,7 +131,7 @@ export const TokenRateLimitTable = ({
                   </div>
                 </TableCell>
                 {shouldRenderGroupName() && (
-                  <TableCell className="font-bold text-emphasis">
+                  <TableCell className="font-bold text-text-darker">
                     {tokenRateLimit.group_name}
                   </TableCell>
                 )}

web/src/app/admin/tools/ToolEditor.tsx

@@ -139,7 +139,7 @@ function ToolForm({
             py-1 
             px-3 
             text-sm
-            hover:bg-hover-light
+            hover:bg-accent-background
           "
           onClick={() => {
             const definition = values.definition;
@@ -193,7 +193,7 @@ function ToolForm({
         <div className="my-4">
           <h3 className="text-base font-semibold mb-2">Available methods</h3>
           <div className="overflow-x-auto">
-            <table className="min-w-full bg-white border border-gray-200">
+            <table className="min-w-full bg-white border border-background-200">
               <thead>
                 <tr>
                   <th className="px-4 py-2 border-b">Name</th>
@@ -228,7 +228,7 @@ function ToolForm({
           <h3 className="text-xl font-bold mb-2 text-primary-600">
             Custom Headers
           </h3>
-          <p className="text-sm mb-6 text-gray-600 italic">
+          <p className="text-sm mb-6 text-text-600 italic">
             Specify custom headers for each request to this tool&apos;s API.
           </p>
           <FieldArray
@@ -240,17 +240,17 @@ function ToolForm({
                     (header: { key: string; value: string }, index: number) => (
                       <div
                         key={index}
-                        className="flex items-center space-x-2 bg-gray-50 p-3 rounded-lg shadow-sm"
+                        className="flex items-center space-x-2 bg-background-50 p-3 rounded-lg shadow-sm"
                       >
                         <Field
                           name={`customHeaders.${index}.key`}
                           placeholder="Header Key"
-                          className="flex-1 p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                          className="flex-1 p-2 border border-background-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                         />
                         <Field
                           name={`customHeaders.${index}.value`}
                           placeholder="Header Value"
-                          className="flex-1 p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                          className="flex-1 p-2 border border-background-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                         />
                         <Button
                           type="button"

web/src/app/admin/tools/ToolsTable.tsx

@@ -76,7 +76,7 @@ export function ToolsTable({ tools }: { tools: ToolSnapshot[] }) {
                   {tool.in_code_tool_id === null ? (
                     <div className="my-auto">
                       <div
-                        className="hover:bg-hover rounded p-1 cursor-pointer"
+                        className="hover:bg-accent-background-hovered rounded p-1 cursor-pointer"
                         onClick={async () => {
                           const response = await deleteCustomTool(tool.id);
                           if (response.data) {

web/src/app/admin/users/page.tsx

@@ -78,7 +78,6 @@ const UsersTables = ({
           </CardContent>
         </Card>
       </TabsContent>
-
       <TabsContent value="invited">
         <Card>
           <CardHeader>

web/src/app/anonymous/[id]/AnonymousPage.tsx

@@ -39,15 +39,15 @@ export default function AnonymousPage({
   }, []);
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+    <div className="flex flex-col items-center justify-center min-h-screen bg-background-100">
       <div className="bg-white p-8 rounded-lg shadow-md">
         <h1 className="text-2xl font-bold mb-4 text-center">
           Redirecting you to the chat page...
         </h1>
         <div className="flex justify-center">
-          <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-neutral-800"></div>
+          <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-background-800"></div>
         </div>
-        <p className="mt-4 text-gray-600 text-center">
+        <p className="mt-4 text-text-600 text-center">
           Please wait while we set up your anonymous session.
         </p>
       </div>

web/src/app/assistants/LargeBackButton.tsx

@@ -8,7 +8,7 @@ export function LargeBackButton() {
   return (
     <div className="cursor-pointer" onClick={() => router.back()}>
       <FiChevronLeft
-        className="mr-1 my-auto p-1 hover:bg-hover rounded cursor-pointer"
+        className="mr-1 my-auto p-1 hover:bg-accent-background-hovered rounded cursor-pointer"
         size={32}
       />
     </div>

web/src/app/assistants/mine/AssistantCard.tsx

@@ -48,9 +48,9 @@ export const AssistantBadge = ({
 }) => {
   return (
     <div
-      className={`h-4 px-1.5 py-1 text-[10px] flex-none bg-[#e6e3dd]/50 rounded-lg justify-center items-center gap-1 inline-flex ${className}`}
+      className={`h-4 px-1.5 py-1 text-[10px] flex-none bg-neutral-200/50 dark:bg-neutral-700 rounded-lg justify-center items-center gap-1 inline-flex ${className}`}
     >
-      <div className="text-[#4a4a4a] font-normal leading-[8px]">
+      <div className="text-text-800 font-normal leading-[8px]">
         {maxLength ? truncateString(text, maxLength) : text}
       </div>
     </div>
@@ -101,7 +101,7 @@ const AssistantCard: React.FC<{
   }, [persona.name]);
 
   return (
-    <div className="w-full p-2 overflow-visible pb-4 pt-3 bg-[#fefcf9] rounded shadow-[0px_0px_4px_0px_rgba(0,0,0,0.25)] flex flex-col">
+    <div className="w-full text-text-800 p-2 overflow-visible pb-4 pt-3 bg-transparent dark:bg-neutral-800/80 rounded shadow-[0px_0px_4px_0px_rgba(0,0,0,0.25)] flex flex-col">
       <div className="w-full flex">
         <div className="ml-2 flex-none mr-2 mt-1 w-10 h-10">
           <AssistantIcon assistant={persona} size="large" />
@@ -114,7 +114,7 @@ const AssistantCard: React.FC<{
                   <TooltipTrigger asChild>
                     <h3
                       ref={nameRef}
-                      className={` text-black line-clamp-1 break-all	 text-ellipsis leading-none font-semibold text-base lg-normal w-full overflow-hidden`}
+                      className={`text-neutral-900 dark:text-neutral-100 line-clamp-1 break-all	 text-ellipsis leading-none font-semibold text-base lg-normal w-full overflow-hidden`}
                     >
                       {persona.name}
                     </h3>
@@ -159,13 +159,13 @@ const AssistantCard: React.FC<{
                   <PopoverTrigger asChild>
                     <button
                       type="button"
-                      className="hover:bg-neutral-100 p-1 -my-1 rounded-full"
+                      className="hover:bg-neutral-200 dark:hover:bg-neutral-700 p-1 -my-1 rounded-full"
                     >
                       <FiMoreHorizontal size={16} />
                     </button>
                   </PopoverTrigger>
                   <PopoverContent
-                    className={`z-[10000] ${
+                    className={`z-[1000000] ${
                       activePopover === null ? "w-32" : "w-80"
                     } p-2`}
                   >
@@ -175,7 +175,7 @@ const AssistantCard: React.FC<{
                           onClick={isOwnedByUser ? handleEdit : undefined}
                           className={`w-full flex items-center text-left px-2 py-1 rounded ${
                             isOwnedByUser
-                              ? "hover:bg-neutral-100"
+                              ? "hover:bg-neutral-200 dark:hover:bg-neutral-700"
                               : "opacity-50 cursor-not-allowed"
                           }`}
                           disabled={!isOwnedByUser}
@@ -183,7 +183,7 @@ const AssistantCard: React.FC<{
                           <FiEdit size={12} className="inline mr-2" />
                           Edit
                         </button>
-                        {isPaidEnterpriseFeaturesEnabled && (
+                        {isPaidEnterpriseFeaturesEnabled && isOwnedByUser && (
                           <button
                             onClick={
                               isOwnedByUser
@@ -197,7 +197,7 @@ const AssistantCard: React.FC<{
                             }
                             className={`w-full text-left items-center px-2 py-1 rounded ${
                               isOwnedByUser
-                                ? "hover:bg-neutral-100"
+                                ? "hover:bg-neutral-200 dark:hover:bg-neutral-800"
                                 : "opacity-50 cursor-not-allowed"
                             }`}
                             disabled={!isOwnedByUser}
@@ -208,10 +208,10 @@ const AssistantCard: React.FC<{
                         )}
                         <button
                           onClick={isOwnedByUser ? handleDelete : undefined}
-                          className={`w-full text-left items-center px-2 py-1 rounded ${
+                          className={`w-full text-left  items-center  px-2 py-1 rounded ${
                             isOwnedByUser
-                              ? "hover:bg-neutral-100 text-red-600"
-                              : "opacity-50 cursor-not-allowed text-red-300"
+                              ? "hover:bg-neutral-200 dark:hover:bg-neutral- text-red-600 dark:text-red-400"
+                              : "opacity-50 cursor-not-allowed text-red-300 dark:text-red-500"
                           }`}
                           disabled={!isOwnedByUser}
                         >
@@ -251,13 +251,13 @@ const AssistantCard: React.FC<{
             )}
           </div>
 
-          <p className="text-black font-[350] mt-0 text-sm line-clamp-2 h-[2.7em]">
+          <p className="text-neutral-800 dark:text-neutral-200 font-[350] mt-0 text-sm line-clamp-2 h-[2.7em]">
             {persona.description || "\u00A0"}
           </p>
 
           <div className="flex flex-col ">
             <div className="my-1.5">
-              <p className="flex items-center text-black text-xs opacity-50">
+              <p className="flex items-center text-neutral-800 dark:text-neutral-200 text-xs opacity-50">
                 {persona.owner?.email || persona.builtin_persona ? (
                   <>
                     <span className="truncate">
@@ -302,7 +302,7 @@ const AssistantCard: React.FC<{
                       router.push(`/chat?assistantId=${persona.id}`);
                       closeModal();
                     }}
-                    className="hover:bg-neutral-100 hover:text-text px-2 py-1 gap-x-1 rounded border border-black flex items-center"
+                    className="hover:bg-neutral-100 dark:hover:bg-neutral-700 dark:bg-[#2E2E2D] hover:text-neutral-900 dark:hover:text-neutral-100 px-2 py-1 gap-x-1 rounded border border-neutral-400 dark:border-neutral-600 flex items-center"
                   >
                     <PencilIcon size={12} className="flex-none" />
                     <span className="text-xs">Start Chat</span>
@@ -324,15 +324,17 @@ const AssistantCard: React.FC<{
                         !pinned
                       );
                     }}
-                    className="hover:bg-neutral-100 px-2 group cursor-pointer py-1 gap-x-1 relative rounded border border-black flex items-center w-[65px]"
+                    className="hover:bg-neutral-100  dark:hover:bg-neutral-700 dark:bg-[#2E2E2D] px-2 group cursor-pointer py-1 gap-x-1 relative rounded border border-neutral-400 dark:border-neutral-600 flex items-center w-[65px]"
                   >
                     <PinnedIcon size={12} />
                     {!pinned ? (
-                      <p className="absolute w-full left-0 group-hover:text-black w-full text-center transform text-xs">
+                      <p className="absolute w-full left-0 group-hover:text-neutral-900 dark:group-hover:text-neutral-100 w-full text-center transform text-xs">
                         Pin
                       </p>
                     ) : (
-                      <p className="text-xs group-hover:text-black">Unpin</p>
+                      <p className="text-xs group-hover:text-neutral-900 dark:group-hover:text-neutral-100">
+                        Unpin
+                      </p>
                     )}
                   </div>
                 </TooltipTrigger>
@@ -348,5 +350,4 @@ const AssistantCard: React.FC<{
     </div>
   );
 };
-
 export default AssistantCard;

web/src/app/assistants/mine/AssistantModal.tsx

@@ -23,8 +23,8 @@ export const AssistantBadgeSelector = ({
       className={`
         select-none ${
           selected
-            ? "bg-neutral-900 text-white"
-            : "bg-transparent text-neutral-900"
+            ? "bg-background-900 text-white"
+            : "bg-transparent text-text-900"
         } w-12 h-5 text-center px-1 py-0.5 rounded-lg cursor-pointer text-[12px] font-normal leading-[10px] border border-black justify-center items-center gap-1 inline-flex`}
       onClick={toggleFilter}
     >
@@ -118,7 +118,7 @@ export function AssistantModal({
   return (
     <Dialog open={true} onOpenChange={(open) => !open && hideModal()}>
       <DialogContent
-        className="p-0 overflow-hidden max-h-[80vh] max-w-none w-[95%] bg-background rounded-sm shadow-2xl transform transition-all duration-300 ease-in-out relative w-11/12 max-w-4xl pt-10 pb-10  px-10  overflow-hidden flex flex-col   max-w-4xl"
+        className="p-0  max-h-[80vh] max-w-none w-[95%] bg-background rounded-sm shadow-2xl transform transition-all duration-300 ease-in-out relative w-11/12 max-w-4xl pt-10 pb-10  px-10  overflow-hidden flex flex-col   max-w-4xl"
         style={{
           position: "fixed",
           top: "10vh",
@@ -127,15 +127,15 @@ export function AssistantModal({
           margin: 0,
         }}
       >
-        <div className="flex overflow-hidden flex-col h-full">
+        <div className="flex den flex-col h-full">
           <div className="flex flex-col sticky top-0 z-10">
             <div className="flex px-2 justify-between items-center gap-x-2 mb-0">
               <div className="h-12 w-full rounded-lg flex-col justify-center items-start gap-2.5 inline-flex">
-                <div className="h-12 rounded-md w-full shadow-[0px_0px_2px_0px_rgba(0,0,0,0.25)] border border-[#dcdad4] flex items-center px-3">
+                <div className="h-12 rounded-md w-full shadow-[0px_0px_2px_0px_rgba(0,0,0,0.25)] border border-background-300 flex items-center px-3">
                   {!isSearchFocused && (
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
-                      className="h-5 w-5 text-gray-400"
+                      className="h-5 w-5 text-text-400"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -160,15 +160,15 @@ export function AssistantModal({
               </div>
               <button
                 onClick={() => router.push("/assistants/new")}
-                className="h-10 cursor-pointer px-6 py-3 bg-black rounded-md border border-black justify-center items-center gap-2.5 inline-flex"
+                className="h-10 cursor-pointer px-6 py-3 bg-background-800 hover:bg-black rounded-md border border-black justify-center items-center gap-2.5 inline-flex"
               >
-                <div className="text-[#fffcf4] text-lg font-normal leading-normal">
+                <div className="text-text-50 text-lg font-normal leading-normal">
                   Create
                 </div>
               </button>
             </div>
             <div className="px-2 flex py-4 items-center gap-x-2 flex-wrap">
-              <FilterIcon size={16} />
+              <FilterIcon className="text-text-800" size={16} />
               <AssistantBadgeSelector
                 text="Pinned"
                 selected={assistantFilters[AssistantFilter.Pinned]}
@@ -197,11 +197,11 @@ export function AssistantModal({
                 }
               />
             </div>
-            <div className="w-full border-t border-neutral-200" />
+            <div className="w-full border-t border-background-200" />
           </div>
 
           <div className="flex-grow overflow-y-auto">
-            <h2 className="text-2xl font-semibold text-gray-800 mb-2 px-4 py-2">
+            <h2 className="text-2xl font-semibold text-text-800 mb-2 px-4 py-2">
               Featured Assistants
             </h2>
 
@@ -219,7 +219,7 @@ export function AssistantModal({
                   </div>
                 ))
               ) : (
-                <div className="col-span-2 text-center text-gray-500">
+                <div className="col-span-2 text-center text-text-500">
                   No featured assistants match filters
                 </div>
               )}
@@ -227,7 +227,7 @@ export function AssistantModal({
 
             {allAssistants && allAssistants.length > 0 && (
               <>
-                <h2 className="text-2xl font-semibold text-gray-800 mt-4 mb-2 px-4 py-2">
+                <h2 className="text-2xl font-semibold text-text-800 mt-4 mb-2 px-4 py-2">
                   All Assistants
                 </h2>
 

web/src/app/assistants/mine/AssistantSharingModal.tsx

@@ -145,7 +145,7 @@ export function AssistantSharingModal({
 
           <div className="mb-8 flex flex-col gap-y-4">
             <h3 className="text-lg font-semibold">Current Status</h3>
-            <div className="bg-gray-50 rounded-lg">{sharedStatus}</div>
+            <div className="bg-background-50 rounded-lg">{sharedStatus}</div>
           </div>
 
           <div className="mb-8 flex flex-col gap-y-4">
@@ -175,8 +175,8 @@ export function AssistantSharingModal({
                 ]);
               }}
               itemComponent={({ option }) => (
-                <div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-gray-100">
-                  <UsersIcon className="mr-3 text-gray-500" />
+                <div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-background-100">
+                  <UsersIcon className="mr-3 text-text-500" />
                   <span className="flex-grow">{option.name}</span>
                   <FiPlus className="text-blue-500" />
                 </div>
@@ -186,7 +186,7 @@ export function AssistantSharingModal({
 
           {selectedUsers.length > 0 && (
             <div className="mb-6">
-              <h4 className="text-sm font-medium text-gray-700 mb-2">
+              <h4 className="text-sm font-medium text-text-700 mb-2">
                 Selected Users:
               </h4>
               <div className="flex flex-wrap gap-2">

web/src/app/assistants/mine/AssistantSharingPopover.tsx

@@ -131,7 +131,7 @@ export function AssistantSharingPopover({
 
         <div className="mb-4">
           <h3 className="text-sm font-semibold mb-2">Current Status</h3>
-          <div className="bg-gray-50 rounded-lg p-2">{sharedStatus}</div>
+          <div className="bg-background-50 rounded-lg p-2">{sharedStatus}</div>
         </div>
 
         <div className="mb-4">
@@ -159,8 +159,8 @@ export function AssistantSharingPopover({
               ]);
             }}
             itemComponent={({ option }) => (
-              <div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-gray-100">
-                <UsersIcon className="mr-3 text-gray-500" />
+              <div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-background-100">
+                <UsersIcon className="mr-3 text-text-500" />
                 <span className="flex-grow">{option.name}</span>
                 <FiPlus className="text-blue-500" />
               </div>
@@ -170,7 +170,7 @@ export function AssistantSharingPopover({
 
         {selectedUsers.length > 0 && (
           <div className="mb-4">
-            <h4 className="text-xs font-medium text-gray-700 mb-2">
+            <h4 className="text-xs font-medium text-text-700 mb-2">
               Selected Users:
             </h4>
             <div className="flex flex-wrap gap-2">

web/src/app/assistants/mine/AssistantVisibilityPopover.tsx

@@ -99,7 +99,7 @@ export function AssistantVisibilityPopover({
             {isUpdating && (
               <div className="ml-2 inline-flex items-center">
                 <ThreeDotsLoader />
-                <span className="ml-2 text-sm text-gray-600">Updating...</span>
+                <span className="ml-2 text-sm text-text-600">Updating...</span>
               </div>
             )}
           </Button>
@@ -134,8 +134,8 @@ export function AssistantVisibilityPopover({
               ]);
             }}
             itemComponent={({ option }) => (
-              <div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-gray-100">
-                <UsersIcon className="mr-3 text-gray-500" />
+              <div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-background-100">
+                <UsersIcon className="mr-3 text-text-500" />
                 <span className="flex-grow">{option.name}</span>
                 <FiPlus className="text-blue-500" />
               </div>
@@ -145,7 +145,7 @@ export function AssistantVisibilityPopover({
 
         {selectedUsers.length > 0 && (
           <div>
-            <h4 className="text-xs font-medium text-gray-700 mb-2">
+            <h4 className="text-xs font-medium text-text-700 mb-2">
               Selected Users:
             </h4>
             <div className="flex flex-wrap gap-2">
@@ -184,7 +184,7 @@ export function AssistantVisibilityPopover({
 
         <div>
           <h3 className="text-sm font-semibold mb-2">Currently Shared With</h3>
-          <div className="bg-gray-50 rounded-lg p-2">
+          <div className="bg-background-50 rounded-lg p-2">
             <AssistantSharedStatusDisplay
               size="md"
               assistant={assistant}

web/src/app/auth/impersonate/page.tsx

@@ -111,7 +111,7 @@ export default function ImpersonatePage() {
 
               <button
                 type="submit"
-                className="w-full py-3 bg-accent text-white rounded-lg hover:bg-accent/90 transition-colors"
+                className="w-full py-3 bg-agent text-white rounded-lg hover:bg-accent/90 transition-colors"
               >
                 Impersonate User
               </button>

web/src/app/auth/login/LoginPage.tsx

@@ -45,9 +45,9 @@ export default function LoginPage({
       {authTypeMetadata?.authType === "cloud" && (
         <div className="mt-4 w-full justify-center">
           <div className="flex items-center w-full my-4">
-            <div className="flex-grow border-t border-gray-300"></div>
-            <span className="px-4 text-gray-500">or</span>
-            <div className="flex-grow border-t border-gray-300"></div>
+            <div className="flex-grow border-t border-background-300"></div>
+            <span className="px-4 text-text-500">or</span>
+            <div className="flex-grow border-t border-background-300"></div>
           </div>
           <EmailPasswordForm shouldVerify={true} nextUrl={nextUrl} />
 

web/src/app/auth/login/SignInButton.tsx

@@ -46,7 +46,7 @@ export function SignInButton({
 
   return (
     <a
-      className="mx-auto mb-4 mt-6 py-3 w-full text-text-100 bg-accent flex rounded cursor-pointer hover:bg-indigo-800"
+      className="mx-auto mb-4 mt-6 py-3 w-full text-neutral-100 bg-indigo-500 flex rounded cursor-pointer hover:bg-indigo-800"
       href={finalAuthorizeUrl}
     >
       {button}

web/src/app/auth/signup/ReferralSourceSelector.tsx

@@ -51,7 +51,7 @@ const ReferralSourceSelector: React.FC<ReferralSourceSelectorProps> = ({
       <Select value={referralSource} onValueChange={handleChange}>
         <SelectTrigger
           id="referral-source"
-          className="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+          className="w-full border-background-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
         >
           <SelectValue placeholder="Select an option" />
         </SelectTrigger>

web/src/app/auth/signup/page.tsx

@@ -89,7 +89,7 @@ const Page = async (props: {
               <SignInButton authorizeUrl={authUrl} authType="cloud" />
               <div className="flex items-center w-full my-4">
                 <div className="flex-grow border-t border-background-300"></div>
-                <span className="px-4 text-gray-500">or</span>
+                <span className="px-4 text-text-500">or</span>
                 <div className="flex-grow border-t border-background-300"></div>
               </div>
             </div>

web/src/app/chat/ChatBanner.tsx

@@ -61,7 +61,7 @@ export function ChatBanner() {
       onMouseLeave={handleMouseLeave}
       aria-expanded={isExpanded}
     >
-      <div className="text-emphasis text-sm w-full">
+      <div className="text-text-darker text-sm w-full">
         {/* Padding for consistent spacing */}
         <div className="relative p-2">
           {/* Collapsible container */}
@@ -113,7 +113,7 @@ export function ChatBanner() {
             aria-label="Expand banner content"
             onClick={() => setIsExpanded(true)}
           >
-            <ChevronDownIcon className="h-3 w-3 text-emphasis" />
+            <ChevronDownIcon className="h-3 w-3 text-text-darker" />
           </button>
         )}
       </div>

web/src/app/chat/ChatPage.tsx

@@ -129,6 +129,7 @@ import {
   useOperatingSystem,
   useSidebarShortcut,
 } from "@/lib/browserUtilities";
+import { Button } from "@/components/ui/button";
 
 const TEMP_USER_MESSAGE_ID = -1;
 const TEMP_ASSISTANT_MESSAGE_ID = -2;
@@ -2260,7 +2261,7 @@ export function ChatPage({
         <AssistantModal hideModal={() => setShowAssistantsModal(false)} />
       )}
 
-      <div className="fixed inset-0 flex flex-col text-default">
+      <div className="fixed inset-0 flex flex-col text-text-dark">
         <div className="h-[100dvh] overflow-y-hidden">
           <div className="w-full">
             <div
@@ -2417,7 +2418,7 @@ export function ChatPage({
                           className={`
                           flex-none 
                           overflow-y-hidden 
-                          bg-background-100 
+                          bg-transparent
                           transition-all 
                           bg-opacity-80
                           duration-300 
@@ -2622,6 +2623,7 @@ export function ChatPage({
 
                                 return (
                                   <div
+                                    className="text-text"
                                     id={`message-${message.messageId}`}
                                     key={messageReactComponentKey}
                                     ref={
@@ -2963,6 +2965,9 @@ export function ChatPage({
                                 return (
                                   <div key={messageReactComponentKey}>
                                     <AIMessage
+                                      setPresentingDocument={
+                                        setPresentingDocument
+                                      }
                                       currentPersona={liveAssistant}
                                       messageId={message.messageId}
                                       content={
@@ -3005,6 +3010,7 @@ export function ChatPage({
                                 key={`${messageHistory.length}-${chatSessionIdRef.current}`}
                               >
                                 <AIMessage
+                                  setPresentingDocument={setPresentingDocument}
                                   key={-3}
                                   currentPersona={liveAssistant}
                                   alternativeAssistant={
@@ -3029,6 +3035,7 @@ export function ChatPage({
                             {loadingError && (
                               <div key={-1}>
                                 <AIMessage
+                                  setPresentingDocument={setPresentingDocument}
                                   currentPersona={liveAssistant}
                                   messageId={-1}
                                   content={
@@ -3153,7 +3160,7 @@ export function ChatPage({
                 <div className="mx-auto h-full flex">
                   <div
                     style={{ transition: "width 0.30s ease-out" }}
-                    className={`flex-none bg-transparent transition-all bg-opacity-80 duration-300 epase-in-out h-full
+                    className={`flex-none bg-transparent transition-all bg-opacity-80 duration-300 ease-in-out h-full
                         ${
                           toggledSidebar && !settings?.isMobile
                             ? "w-[250px] "

web/src/app/chat/ChatPersonaSelector.tsx

@@ -33,10 +33,14 @@ function PersonaItem({
           mx-1
           select-none 
           cursor-pointer 
-          text-emphasis
+          text-text-darker
           bg-background
-          hover:bg-hover-light
-          ${isSelected ? "bg-hover text-selected-emphasis" : ""}
+          hover:bg-accent-background
+          ${
+            isSelected
+              ? "bg-accent-background-hovered text-selected-emphasis"
+              : ""
+          }
         `}
         onClick={() => {
           onSelect(id);
@@ -51,7 +55,10 @@ function PersonaItem({
       </div>
       {isOwner && (
         <Link href={`/assistants/edit/${id}`} className="mx-2 my-auto">
-          <FiEdit2 className="hover:bg-hover p-0.5 my-auto" size={20} />
+          <FiEdit2
+            className="hover:bg-accent-background-hovered p-0.5 my-auto"
+            size={20}
+          />
         </Link>
       )}
     </div>
@@ -130,7 +137,7 @@ export function ChatPersonaSelector({
         </div>
       }
     >
-      <div className="select-none text-xl text-strong font-bold flex px-2 rounded cursor-pointer hover:bg-hover-light">
+      <div className="select-none text-xl text-strong font-bold flex px-2 rounded cursor-pointer hover:bg-accent-background">
         <div className="mt-auto">
           {currentlySelectedPersona?.name || "Default"}
         </div>

web/src/app/chat/ChatPopup.tsx

@@ -45,7 +45,7 @@ export function ChatPopup() {
     <Modal width="w-3/6 xl:w-[700px]" title={popupTitle}>
       <>
         <ReactMarkdown
-          className="prose max-w-full"
+          className="prose text-text-800 dark:text-neutral-100 max-w-full"
           components={{
             a: ({ node, ...props }) => (
               <a

web/src/app/chat/Refinement.tsx

@@ -256,7 +256,7 @@ export const NoNewAnswerMessage = () => {
 
   return (
     <div
-      className="text-gray-600 text-sm transition-opacity duration-2000 ease-out"
+      className="text-text-600 text-sm transition-opacity duration-2000 ease-out"
       style={{ opacity: opacity }}
     >
       No new answer found...
@@ -338,7 +338,7 @@ export function StatusRefinement({
                 onMouseLeave={() => setToolTipHovered(false)}
                 side="bottom"
                 align="start"
-                className="w-fit p-4 bg-white border-2 border-border shadow-lg rounded-md"
+                className="w-fit p-4 bg-[#fff] border-2 border-border dark:border-neutral-800 shadow-lg rounded-md"
               >
                 {/* If not done, show the "Refining" box + a chevron */}
 
@@ -353,8 +353,9 @@ export function StatusRefinement({
                       <div className="w-3 h-3">
                         <StatusIndicator status={ToggleState.Done} />
                       </div>
-                      <span className="text-sm font-medium">
+                      <span className="text-neutral-800 text-sm font-medium">
                         {StreamingPhaseText[phase]}
+                        LLL
                       </span>
                     </div>
                   ))}

web/src/app/chat/RegenerateOption.tsx

@@ -40,9 +40,9 @@ export function RegenerateDropdown({
   };
 
   const Dropdown = (
-    <div className="overflow-y-auto py-2 min-w-fit bg-white dark:bg-gray-800 rounded-md shadow-lg">
+    <div className="overflow-y-auto border border-neutral-800  py-2 min-w-fit bg-neutral-50 dark:bg-neutral-900 rounded-md shadow-lg">
       <div className="mb-1 flex items-center justify-between px-4 pt-2">
-        <span className="text-sm text-text-500 dark:text-text-400">
+        <span className="text-sm text-neutral-600 dark:text-neutral-400">
           Regenerate with
         </span>
       </div>
@@ -50,8 +50,10 @@ export function RegenerateDropdown({
         <div
           key={option.value}
           role="menuitem"
-          className={`flex items-center m-1.5 p-1.5 text-sm cursor-pointer focus-visible:outline-0 group relative hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md my-0 px-3 mx-2 gap-2.5 py-3 !pr-3 ${
-            option.value === selected ? "bg-gray-100 dark:bg-gray-700" : ""
+          className={`flex items-center m-1.5 p-1.5 text-sm cursor-pointer focus-visible:outline-0 group relative hover:bg-neutral-200 dark:hover:bg-neutral-800 rounded-md my-0 px-3 mx-2 gap-2.5 py-3 !pr-3 ${
+            option.value === selected
+              ? "bg-neutral-200 dark:bg-neutral-800"
+              : ""
           }`}
           onClick={() => onSelect(option.value)}
         >
@@ -63,7 +65,7 @@ export function RegenerateDropdown({
             </div>
           </div>
           {option.value === selected && (
-            <FiCheck className="text-blue-500 dark:text-blue-400" />
+            <FiCheck className="text-neutral-700 dark:text-neutral-300" />
           )}
         </div>
       ))}

web/src/app/chat/documentSidebar/ChatDocumentDisplay.tsx

@@ -50,7 +50,7 @@ export function DocumentMetadataBlock({
                 />
               ))}
             {metadataEntries.length > MAX_METADATA_ITEMS && (
-              <span className="ml-1 text-xs text-gray-500">...</span>
+              <span className="ml-1 text-xs text-text-500">...</span>
             )}
           </div>
         </>
@@ -82,8 +82,10 @@ export function ChatDocumentDisplay({
   return (
     <div className="desktop:max-w-[400px] opacity-100 w-full">
       <div
-        className={`flex relative flex-col px-3 py-2.5 gap-0.5 rounded-xl my-1 ${
-          isSelected ? "bg-[#ebe7de]" : "bg- hover:bg-[#ebe7de]/80"
+        className={`flex relative  flex-col px-3 py-2.5 gap-0.5  rounded-xl my-1 ${
+          isSelected
+            ? "bg-accent-background-hovered"
+            : " hover:bg-accent-background"
         }`}
       >
         <button
@@ -96,7 +98,7 @@ export function ChatDocumentDisplay({
             ) : (
               <SourceIcon sourceType={document.source_type} iconSize={18} />
             )}
-            <div className="line-clamp-1 text-text-900 text-sm font-semibold">
+            <div className="line-clamp-1 text-neutral-900 dark:text-neutral-300 text-sm font-semibold">
               {(document.semantic_identifier || document.document_id).length >
               (modal ? 30 : 40)
                 ? `${(document.semantic_identifier || document.document_id)
@@ -109,7 +111,7 @@ export function ChatDocumentDisplay({
             <DocumentMetadataBlock modal={modal} document={document} />
           )}
           <div
-            className={`line-clamp-3 text-sm font-normal leading-snug text-gray-600 ${
+            className={`line-clamp-3 text-sm font-normal leading-snug text-neutral-900 dark:text-neutral-300 ${
               hasMetadata ? "mt-2" : ""
             }`}
           >

web/src/app/chat/documentSidebar/DocumentResults.tsx

@@ -78,7 +78,9 @@ export const DocumentResults = forwardRef<HTMLDivElement, DocumentResultsProps>(
         <div
           id="onyx-chat-sidebar"
           className={`relative -mb-8 bg-background max-w-full ${
-            !modal ? "border-l border-t h-[105vh]  border-sidebar-border" : ""
+            !modal
+              ? "border-l border-t h-[105vh]  border-sidebar-border dark:border-neutral-700"
+              : ""
           }`}
           onClick={(e) => {
             if (e.target === e.currentTarget) {

web/src/app/chat/files/InputBarPreview.tsx

@@ -20,7 +20,7 @@ function DeleteButton({ onDelete }: { onDelete: () => void }) {
         -right-1
         cursor-pointer
         border-none
-        bg-hover
+        bg-accent-background-hovered
         p-.5
         rounded-full
         z-10
@@ -119,7 +119,7 @@ export function InputBarPreview({
         flex
         items-center
         px-2
-        bg-hover
+        bg-accent-background-hovered
         border
         gap-x-1.5
         border-border
@@ -164,7 +164,7 @@ export function InputBarPreview({
           className="
             cursor-pointer
             border-none
-            bg-hover
+            bg-accent-background-hovered
             rounded-full
             z-10
           "

web/src/app/chat/files/documents/DocumentPreview.tsx

@@ -27,7 +27,7 @@ export function DocumentPreview({
         ${alignBubble && "min-w-52 max-w-48"}
         flex
         items-center
-        bg-hover-light/50
+        bg-accent-background/50
         border
         border-border
         rounded-lg
@@ -80,10 +80,10 @@ export function DocumentPreview({
       {open && (
         <button
           onClick={() => open()}
-          className="ml-2 p-2 rounded-full hover:bg-gray-200 transition-colors duration-200"
+          className="ml-2 p-2 rounded-full hover:bg-background-200 transition-colors duration-200"
           aria-label="Expand document"
         >
-          <ExpandTwoIcon className="w-5 h-5 text-gray-600" />
+          <ExpandTwoIcon className="w-5 h-5 text-text-600" />
         </button>
       )}
     </div>
@@ -117,7 +117,7 @@ export function InputDocumentPreview({
         flex
         items-center
         p-2
-        bg-hover
+        bg-accent-background-hovered
         border
         border-border
         rounded-md

web/src/app/chat/files/images/InMessageImage.tsx

@@ -16,7 +16,7 @@ export function InMessageImage({ fileId }: { fileId: string }) {
 
       <div className="relative w-full h-full max-w-96 max-h-96">
         {!imageLoaded && (
-          <div className="absolute inset-0 bg-gray-200 animate-pulse rounded-lg" />
+          <div className="absolute inset-0 bg-background-200 animate-pulse rounded-lg" />
         )}
 
         <img

web/src/app/chat/files/images/InputBarPreviewImage.tsx

@@ -20,7 +20,7 @@ export function InputBarPreviewImage({ fileId }: { fileId: string }) {
           border-none
           flex
           items-center
-          bg-hover
+          bg-accent-background-hovered
           border
           border-border
           rounded-md

web/src/app/chat/folders/FolderDropdown.tsx

@@ -189,7 +189,7 @@ export const FolderDropdown = forwardRef<HTMLDivElement, FolderDropdownProps>(
                     type="text"
                     value={newFolderName}
                     onChange={(e) => setNewFolderName(e.target.value)}
-                    className="text-sm font-medium bg-transparent outline-none w-full pb-1 border-b border-[#6c6c6c] transition-colors duration-200"
+                    className="text-sm font-medium bg-transparent outline-none w-full pb-1 border-b border-background-500 transition-colors duration-200"
                     onKeyDown={(e) => {
                       if (e.key === "Enter") {
                         handleEdit();
@@ -241,7 +241,7 @@ export const FolderDropdown = forwardRef<HTMLDivElement, FolderDropdownProps>(
                       </p>
                       <div className="flex justify-center gap-2">
                         <button
-                          className="px-3 py-1 text-sm bg-gray-200 rounded"
+                          className="px-3 py-1 text-sm bg-background-200 rounded"
                           onClick={handleCancelDelete}
                         >
                           Cancel

web/src/app/chat/folders/FolderList.tsx

@@ -184,7 +184,7 @@ const FolderItem = ({
       onDragLeave={() => setIsDragOver(false)}
       onDrop={handleDrop}
       className={`transition duration-300 ease-in-out rounded-md ${
-        isDragOver ? "bg-hover" : ""
+        isDragOver ? "bg-accent-background-hovered" : ""
       }`}
     >
       <BasicSelectable fullWidth selected={false}>
@@ -261,7 +261,7 @@ const FolderItem = ({
                           </button>
                           <button
                             onClick={cancelDelete}
-                            className="bg-gray-300 hover:bg-gray-200 px-2 py-1 rounded text-xs"
+                            className="bg-background-300 hover:bg-background-200 px-2 py-1 rounded text-xs"
                           >
                             No
                           </button>

web/src/app/chat/input-prompts/InputPrompts.tsx

@@ -177,7 +177,7 @@ export default function InputPrompts() {
     };
 
     return (
-      <div className="border rounded-lg p-4 mb-4 relative">
+      <div className="border dark:border-none dark:bg-[#333333] rounded-lg p-4 mb-4 relative">
         {isEditing ? (
           <>
             <div className="absolute top-2 right-2">
@@ -234,8 +234,12 @@ export default function InputPrompts() {
             <div className="whitespace-pre-wrap">{prompt.content}</div>
             <div className="absolute top-2 right-2">
               <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="sm">
+                <DropdownMenuTrigger className="hover:bg-transparent" asChild>
+                  <Button
+                    className="!hover:bg-transparent"
+                    variant="ghost"
+                    size="sm"
+                  >
                     <MoreVertical size={14} />
                   </Button>
                 </DropdownMenuTrigger>

web/src/app/chat/input/AgenticToggle.tsx

@@ -62,16 +62,16 @@ export function AgenticToggle({
               className={`
                 ${
                   proSearchEnabled
-                    ? "border-[#D9D9D0] group-hover:border-black"
-                    : "border-[#D9D9D0] group-hover:border-black"
+                    ? "border-background-200 group-hover:border-[#000] dark:group-hover:border-neutral-300"
+                    : "border-background-200 group-hover:border-[#000] dark:group-hover:border-neutral-300"
                 }
-                 relative inline-flex h-[16px] w-8 items-center rounded-full transition-colors focus:outline-none border animate transition-all duration-200 border-[#D9D9D0] group-hover:border-[1px]  `}
+                 relative inline-flex h-[16px] w-8 items-center rounded-full transition-colors focus:outline-none border animate transition-all duration-200 border-background-200 group-hover:border-[1px]  `}
             >
               <span
                 className={`${
                   proSearchEnabled
                     ? "bg-agent translate-x-4 scale-75"
-                    : "bg-[#64645E] group-hover:bg-text translate-x-0.5 scale-75"
+                    : "bg-background-600 group-hover:bg-background-950 translate-x-0.5 scale-75"
                 }  inline-block h-[12px] w-[12px]  group-hover:scale-90 transform rounded-full transition-transform duration-200 ease-in-out`}
               />
             </div>
@@ -86,19 +86,19 @@ export function AgenticToggle({
         </TooltipTrigger>
         <TooltipContent
           side="top"
-          className="w-72 p-4 bg-white rounded-lg shadow-lg border border-gray-200"
+          className="w-72 p-4 bg-white rounded-lg shadow-lg border border-background-200 dark:border-neutral-900"
         >
           <div className="flex items-center space-x-2 mb-3">
-            <h3 className="text-sm font-semibold text-gray-900">
+            <h3 className="text-sm font-semibold text-text-900">
               Agent Search (BETA)
             </h3>
           </div>
-          <p className="text-xs text-gray-600 mb-2">
+          <p className="text-xs text-text-600 mb-2">
             Use AI agents to break down questions and run deep iterative
             research through promising pathways. Gives more thorough and
             accurate responses but takes slightly longer.
           </p>
-          <ul className="text-xs text-gray-600 list-disc list-inside">
+          <ul className="text-xs text-text-600 list-disc list-inside">
             <li>Improved accuracy of search results</li>
             <li>Less hallucinations</li>
             <li>More comprehensive answers</li>

web/src/app/chat/input/ChatInputBar.tsx

@@ -83,7 +83,7 @@ export const SourceChip2 = ({
             className={`
             h-6
             px-2
-            bg-[#f1eee8]
+            bg-background-dark
             rounded-2xl
             justify-center
             items-center
@@ -95,13 +95,13 @@ export const SourceChip2 = ({
             <div className="w-[17px] h-4 p-[3px] flex-col justify-center items-center gap-2.5 inline-flex">
               <div className="h-2.5 relative">{icon}</div>
             </div>
-            <div className="text-[#4a4a4a] text-xs font-medium leading-normal">
+            <div className="text-text-800 text-xs font-medium leading-normal">
               {truncateTitle ? truncateString(title, 50) : title}
             </div>
             {onRemove && (
               <XIcon
                 size={12}
-                className="text-[#4a4a4a] ml-2 cursor-pointer"
+                className="text-text-800 ml-2 cursor-pointer"
                 onClick={(e: React.MouseEvent<SVGSVGElement>) => {
                   e.stopPropagation();
                   onRemove();
@@ -143,7 +143,7 @@ export const SourceChip = ({
         flex
         items-center
         px-1
-        bg-gray-background
+        bg-background-background
         text-xs
         text-text-darker
         border
@@ -432,7 +432,7 @@ export function ChatInputBar({
               ref={suggestionsRef}
               className="text-sm absolute w-[calc(100%-2rem)] top-0 transform -translate-y-full"
             >
-              <div className="rounded-lg py-1 sm-1.5 bg-background border border-border shadow-lg px-1.5 mt-2 z-10">
+              <div className="rounded-lg py-1 sm-1.5 bg-input-background border border-border dark:border-none shadow-lg px-1.5 mt-2 z-10">
                 {assistantTagOptions.map((currentAssistant, index) => (
                   <button
                     key={index}
@@ -476,7 +476,7 @@ export function ChatInputBar({
               ref={suggestionsRef}
               className="text-sm absolute inset-x-0 top-0 w-full transform -translate-y-full"
             >
-              <div className="rounded-lg py-1.5 bg-background border border-border shadow-lg mx-2 px-1.5 mt-2 rounded z-10">
+              <div className="rounded-lg py-1.5 bg-input-background dark:border-none border border-border shadow-lg mx-2 px-1.5 mt-2 rounded z-10">
                 {filteredPrompts.map(
                   (currentPrompt: InputPrompt, index: number) => (
                     <button
@@ -523,8 +523,11 @@ export function ChatInputBar({
               flex-col
               border
               shadow
-              border-[#DCDAD4]/60
+              bg-input-background
+              border-input-border
+              dark:border-none
               rounded-lg
+              overflow-hidden
               text-text-chatbar
               [&:has(textarea:focus)]::ring-1
               [&:has(textarea:focus)]::ring-black
@@ -578,8 +581,11 @@ export function ChatInputBar({
                 resize-none
                 rounded-lg
                 border-0
-                bg-background
-                placeholder:text-text-muted
+                bg-input-background
+                font-normal
+                text-base
+                leading-6
+                placeholder:text-input-text
                 ${
                   textAreaRef.current &&
                   textAreaRef.current.scrollHeight > MAX_INPUT_HEIGHT
@@ -590,10 +596,10 @@ export function ChatInputBar({
                 break-word
                 overscroll-contain
                 outline-none
-                placeholder-subtle
                 resize-none
                 px-5
                 py-4
+                dark:text-[#D4D4D4]
               `}
               autoFocus
               style={{ scrollbarWidth: "thin" }}
@@ -627,7 +633,7 @@ export function ChatInputBar({
               filterManager.selectedDocumentSets.length > 0 ||
               filterManager.selectedTags.length > 0 ||
               filterManager.selectedSources.length > 0) && (
-              <div className="flex bg-background gap-x-.5 px-2">
+              <div className="flex bg-input-background gap-x-.5 px-2">
                 <div className="flex gap-x-1 px-2 overflow-visible overflow-x-scroll items-end miniscroll">
                   {filterManager.selectedTags &&
                     filterManager.selectedTags.map((tag, index) => (
@@ -750,7 +756,7 @@ export function ChatInputBar({
               </div>
             )}
 
-            <div className="flex pr-4 pb-2 justify-between items-center w-full ">
+            <div className="flex pr-4 pb-2 justify-between bg-input-background items-center w-full ">
               <div className="space-x-1 flex  px-4 ">
                 <ChatInputOption
                   flexPriority="stiff"
@@ -813,8 +819,8 @@ export function ChatInputBar({
                     chatState == "toolBuilding" ||
                     chatState == "loading"
                       ? chatState != "streaming"
-                        ? "bg-background-400"
-                        : "bg-background-800"
+                        ? "bg-neutral-900 dark:bg-neutral-400 "
+                        : "bg-neutral-500 dark:bg-neutral-50"
                       : ""
                   } h-[22px] w-[22px] rounded-full`}
                   onClick={() => {
@@ -840,15 +846,15 @@ export function ChatInputBar({
                   chatState == "loading" ? (
                     <StopGeneratingIcon
                       size={8}
-                      className="text-emphasis m-auto text-white flex-none"
+                      className="text-neutral-50 dark:text-neutral-900 m-auto text-white flex-none"
                     />
                   ) : (
                     <SendIcon
                       size={22}
-                      className={`text-emphasis text-white p-1 my-auto rounded-full ${
+                      className={`text-neutral-50 dark:text-neutral-900 p-1 my-auto rounded-full ${
                         chatState == "input" && message
-                          ? "bg-submit-background"
-                          : "bg-disabled-submit-background"
+                          ? "bg-neutral-900 dark:bg-neutral-50"
+                          : "bg-neutral-500 dark:bg-neutral-400"
                       }`}
                     />
                   )}

web/src/app/chat/input/ChatInputOption.tsx

@@ -44,10 +44,12 @@ export const ChatInputOption: React.FC<ChatInputOptionProps> = ({
             items-center 
             space-x-1
             group
-            text-text-700
-            !rounded-lg
+            rounded
+            text-input-text
             hover:bg-background-chat-hover
-            hover:text-emphasis
+            hover:text-neutral-900
+
+            dark:hover:text-neutral-50
             py-1.5
             px-2
             ${
@@ -65,15 +67,10 @@ export const ChatInputOption: React.FC<ChatInputOptionProps> = ({
           `}
             onClick={onClick}
           >
-            <Icon
-              size={size}
-              className="h-4 w-4 my-auto text-[#4a4a4a] group-hover:text-text flex-none"
-            />
+            <Icon size={size} className="h-4 w-4 my-auto  flex-none" />
             <div className={`flex items-center ${minimize && "mobile:hidden"}`}>
               {name && (
-                <span className="text-sm text-[#4a4a4a] group-hover:text-text break-all line-clamp-1">
-                  {name}
-                </span>
+                <span className="text-sm  break-all line-clamp-1">{name}</span>
               )}
               {toggle && (
                 <ChevronDownIcon className="flex-none ml-1" size={size - 4} />

web/src/app/chat/input/LLMPopover.tsx

@@ -139,7 +139,7 @@ export default function LLMPopover({
       </PopoverTrigger>
       <PopoverContent
         align="start"
-        className="w-64 p-1 bg-background border border-gray-200 rounded-md shadow-lg flex flex-col"
+        className="w-64 p-1 bg-background border border-background-200 rounded-md shadow-lg flex flex-col"
       >
         <div className="flex-grow max-h-[300px] default-scrollbar overflow-y-auto">
           {llmOptions.map(({ name, icon, value }, index) => {
@@ -147,9 +147,9 @@ export default function LLMPopover({
               return (
                 <button
                   key={index}
-                  className={`w-full flex items-center gap-x-2 px-3 py-2 text-sm text-left hover:bg-gray-100 transition-colors duration-150 ${
+                  className={`w-full flex items-center gap-x-2 px-3 py-2 text-sm text-left hover:bg-background-100 dark:hover:bg-neutral-800 transition-colors duration-150 ${
                     currentLlm === name
-                      ? "bg-gray-100 text-text"
+                      ? "bg-background-100 dark:bg-neutral-900 text-text"
                       : "text-text-darker"
                   }`}
                   onClick={() => {
@@ -157,7 +157,11 @@ export default function LLMPopover({
                     setIsOpen(false);
                   }}
                 >
-                  {icon({ size: 16, className: "flex-none my-auto " })}
+                  {icon({
+                    size: 16,
+                    className: "flex-none my-auto text-black",
+                  })}
+                  asdfasdf
                   <span className="line-clamp-1 ">
                     {getDisplayNameForModel(name)}
                   </span>
@@ -193,7 +197,7 @@ export default function LLMPopover({
           })}
         </div>
         {user?.preferences?.temperature_override_enabled && (
-          <div className="mt-2 pt-2 border-t border-gray-200">
+          <div className="mt-2 pt-2 border-t border-background-200">
             <div className="w-full px-3 py-2">
               <Slider
                 value={[localTemperature]}
@@ -204,7 +208,7 @@ export default function LLMPopover({
                 onValueCommit={handleTemperatureChangeComplete}
                 className="w-full"
               />
-              <div className="flex justify-between text-xs text-gray-500 mt-2">
+              <div className="flex justify-between text-xs text-text-500 mt-2">
                 <span>Temperature (creativity)</span>
                 <span>{localTemperature.toFixed(1)}</span>
               </div>

web/src/app/chat/input/SelectedFilterDisplay.tsx

@@ -40,7 +40,7 @@ const SelectedFilter = ({
       px-2 
       w-fit 
       select-none 
-      hover:bg-hover 
+      hover:bg-accent-background-hovered 
       bg-background 
       shadow-md 
     "

web/src/app/chat/input/SimplifiedChatInputBar.tsx

@@ -90,7 +90,7 @@ export function SimplifiedChatInputBar({
               flex
               flex-col
               border
-              border-[#E5E7EB]
+              border-background-200
               rounded-lg
               relative
               text-text-chatbar
@@ -232,10 +232,12 @@ export function SimplifiedChatInputBar({
           }}
         >
           <SendIcon
-            size={28}
-            className={`text-emphasis text-white p-1 rounded-full  ${
-              message ? "bg-submit-background" : "bg-disabled-submit-background"
-            } `}
+            size={22}
+            className={`text-neutral-50 dark:text-neutral-900 p-1 my-auto rounded-full ${
+              message
+                ? "bg-neutral-900 dark:bg-neutral-50"
+                : "bg-neutral-500 dark:bg-neutral-400"
+            }`}
           />
         </button>
       </div>

web/src/app/chat/message/AgenticMessage.tsx

@@ -680,7 +680,7 @@ function MessageSwitcher({
         onClick={currentPage === 1 ? undefined : handlePrevious}
       />
 
-      <span className="text-emphasis select-none">
+      <span className="text-text-darker select-none">
         {currentPage} / {totalPages}
       </span>
 

web/src/app/chat/message/CodeBlock.tsx

@@ -60,10 +60,10 @@ export const CodeBlock = memo(function CodeBlock({
       <span
         className={`
           font-mono 
-          text-gray-800 
-          bg-gray-50 
+          text-text-800 
+          bg-background-50 
           border 
-          border-gray-300 
+          border-background-300 
           rounded 
           align-bottom
           px-1

web/src/app/chat/message/ContinueMessage.tsx

@@ -27,7 +27,7 @@ export function ContinueGenerating({
           </>
         </EmphasizedClickable>
         {showExplanation && (
-          <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">
+          <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-background-800 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">
             LLM reached its token limit. Click to continue.
           </div>
         )}

web/src/app/chat/message/DocumentsDisplay.tsx

@@ -12,9 +12,9 @@ const DocumentsDisplay: React.FC<DocumentsDisplayProps> = ({ documents }) => {
   const toggleExpand = () => setIsExpanded(!isExpanded);
 
   return (
-    <div className="w-full border border-gray-200 rounded-lg overflow-hidden">
+    <div className="w-full border border-background-200 rounded-lg overflow-hidden">
       <div
-        className="flex justify-between items-center p-4 bg-gray-50 cursor-pointer"
+        className="flex justify-between items-center p-4 bg-background-50 cursor-pointer"
         onClick={toggleExpand}
       >
         <h3 className="text-lg font-semibold">Sources</h3>
@@ -25,15 +25,15 @@ const DocumentsDisplay: React.FC<DocumentsDisplayProps> = ({ documents }) => {
           {documents.map((doc, index) => (
             <div
               key={index}
-              className="bg-white p-4 rounded-lg shadow-sm border border-gray-100"
+              className="bg-white p-4 rounded-lg shadow-sm border border-background-100"
             >
               <div className="flex items-start space-x-3">
-                <FiFile className="text-gray-400 mt-1" />
+                <FiFile className="text-text-400 mt-1" />
                 <div>
                   <h4 className="font-medium text-sm mb-1 line-clamp-1">
                     {doc.semantic_identifier || "Unknown Source"}
                   </h4>
-                  <p className="text-xs text-gray-600 line-clamp-3">
+                  <p className="text-xs text-text-600 line-clamp-3">
                     {doc.blurb}
                   </p>
                 </div>

web/src/app/chat/message/MemoizedTextComponents.tsx

@@ -181,7 +181,7 @@ export const MemoizedParagraph = memo(
   function MemoizedParagraph({ children, fontSize }: any) {
     return (
       <p
-        className={`text-default my-0 ${
+        className={`text-neutral-900 dark:text-neutral-200 my-0 ${
           fontSize === "sm" ? "leading-tight text-sm" : ""
         }`}
       >

web/src/app/chat/message/Messages.tsx

@@ -64,7 +64,8 @@ import { MemoizedAnchor, MemoizedParagraph } from "./MemoizedTextComponents";
 import { extractCodeText, preprocessLaTeX } from "./codeUtils";
 import ToolResult from "../../../components/tools/ToolResult";
 import CsvContent from "../../../components/tools/CSVContent";
-import SourceCard, { SeeMoreBlock } from "@/components/chat/sources/SourceCard";
+import { SeeMoreBlock } from "@/components/chat/sources/SourceCard";
+import { SourceCard } from "./SourcesDisplay";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 import "katex/dist/katex.min.css";
@@ -212,7 +213,7 @@ export const AIMessage = ({
   retrievalDisabled?: boolean;
   overriddenModel?: string;
   regenerate?: (modelOverRide: LlmOverride) => Promise<void>;
-  setPresentingDocument?: (document: OnyxDocument) => void;
+  setPresentingDocument: (document: OnyxDocument) => void;
 }) => {
   const toolCallGenerating = toolCall && !toolCall.tool_result;
 
@@ -341,6 +342,9 @@ export const AIMessage = ({
     () => ({
       a: anchorCallback,
       p: paragraphCallback,
+      b: ({ node, className, children }: any) => {
+        return <span className={className}>||||{children}</span>;
+      },
       code: ({ node, className, children }: any) => {
         const codeText = extractCodeText(
           node,
@@ -398,7 +402,7 @@ export const AIMessage = ({
     <div
       id={isComplete ? "onyx-ai-message" : undefined}
       ref={trackedElementRef}
-      className={`py-5 ml-4 lg:px-5 relative flex `}
+      className={`py-5 text-text ml-4 lg:px-5 relative flex `}
     >
       <div
         className={`mx-auto ${
@@ -406,7 +410,7 @@ export const AIMessage = ({
         }  max-w-message-max`}
       >
         <div className={`lg:mr-12 ${!shared && "mobile:ml-0 md:ml-8"}`}>
-          <div className="flex">
+          <div className="flex items-start">
             <AssistantIcon
               className="mobile:hidden"
               size={24}
@@ -496,7 +500,7 @@ export const AIMessage = ({
                                 .slice(0, 2)
                                 .map((doc: OnyxDocument, ind: number) => (
                                   <SourceCard
-                                    doc={doc}
+                                    document={doc}
                                     key={ind}
                                     setPresentingDocument={
                                       setPresentingDocument
@@ -650,6 +654,7 @@ export const AIMessage = ({
                               onClick={() => handleFeedback("dislike")}
                             />
                           </CustomTooltip>
+
                           {regenerate && (
                             <CustomTooltip
                               disabled={isRegenerateDropdownVisible}
@@ -796,7 +801,7 @@ function MessageSwitcher({
         onClick={currentPage === 1 ? undefined : handlePrevious}
       />
 
-      <span className="text-emphasis select-none">
+      <span className="text-text-darker select-none">
         {currentPage} / {totalPages}
       </span>
 
@@ -907,7 +912,7 @@ export const HumanMessage = ({
                         break-word
                         overscroll-contain
                         outline-none 
-                        placeholder-gray-400 
+                        placeholder-text-400 
                         resize-none
                         text-text-editing-message
                         pl-4
@@ -940,7 +945,7 @@ export const HumanMessage = ({
                         <button
                           className={`
                           w-fit
-                          bg-accent 
+                          bg-agent 
                           text-inverted 
                           text-sm
                           rounded-lg 
@@ -972,7 +977,7 @@ export const HumanMessage = ({
                           bg-background-strong 
                           text-sm
                           rounded-lg
-                          hover:bg-hover-emphasis
+                          hover:bg-accent-background-hovered-emphasis
                         `}
                           onClick={() => {
                             setEditedContent(content);
@@ -995,7 +1000,7 @@ export const HumanMessage = ({
                           <Tooltip>
                             <TooltipTrigger>
                               <HoverableIcon
-                                icon={<FiEdit2 className="text-gray-600" />}
+                                icon={<FiEdit2 className="text-text-600" />}
                                 onClick={() => {
                                   setIsEditing(true);
                                   setIsHovered(false);
@@ -1018,7 +1023,7 @@ export const HumanMessage = ({
                           !isEditing &&
                           (!files || files.length === 0)
                         ) && "ml-auto"
-                      } relative flex-none max-w-[70%] mb-auto whitespace-break-spaces rounded-3xl bg-user px-5 py-2.5`}
+                      } relative text-text flex-none max-w-[70%] mb-auto whitespace-break-spaces rounded-3xl bg-user px-5 py-2.5`}
                     >
                       {content}
                     </div>

web/src/app/chat/message/SearchSummary.tsx

@@ -134,7 +134,7 @@ export function SearchSummary({
               ))}
             {Array.from(new Set(docs.map((doc) => doc.source_type))).length >
               3 && (
-              <div className="rounded-full bg-gray-200 w-3.5 h-3.5 flex items-center justify-center">
+              <div className="rounded-full bg-background-200 w-3.5 h-3.5 flex items-center justify-center">
                 <span className="text-[8px]">
                   +
                   {Array.from(new Set(docs.map((doc) => doc.source_type)))
@@ -225,7 +225,7 @@ export function SearchSummary({
               <Tooltip>
                 <TooltipTrigger asChild>
                   <button
-                    className="ml-2 -my-2 mobile:hidden hover:bg-hover p-1 rounded flex-shrink-0 group-hover:opacity-100 opacity-0"
+                    className="ml-2 -my-2 mobile:hidden hover:bg-accent-background-hovered p-1 rounded flex-shrink-0 group-hover:opacity-100 opacity-0"
                     onClick={() => {
                       setIsEditing(true);
                     }}

web/src/app/chat/message/SkippedSearch.tsx

@@ -25,7 +25,7 @@ export function SkippedSearch({
             <>
               <BasicClickable
                 onClick={handleForceSearch}
-                className="ml-auto mr-4 -my-1 text-xs mobile:hidden bg-background/80 rounded-md px-2 py-1 cursor-pointer"
+                className="ml-auto mr-4 -my-1 text-xs mobile:hidden bg-background/80 rounded-md px-2 py-1 cursor-pointer dark:hover:bg-neutral-700 dark:text-neutral-200"
               >
                 Force search?
               </BasicClickable>

web/src/app/chat/message/SourcesDisplay.tsx

@@ -15,7 +15,7 @@ interface SourcesDisplayProps {
   setPresentingDocument: (document: OnyxDocument) => void;
 }
 
-const SourceCard: React.FC<{
+export const SourceCard: React.FC<{
   document: OnyxDocument;
   hideDocumentDisplay?: boolean;
   setPresentingDocument: (document: OnyxDocument) => void;
@@ -33,15 +33,15 @@ const SourceCard: React.FC<{
       onClick={() =>
         openDocument(document, () => setPresentingDocument(document))
       }
-      className="w-full max-w-[260px] h-[80px] p-3 bg-[#f1eee8]
-             text-left hover:bg-[#ebe7de]
+      className="w-full max-w-[260px] h-[80px] p-3
+             text-left bg-accent-background hover:bg-accent-background-hovered dark:bg-accent-background-hovered dark:hover:bg-neutral-700/80
              cursor-pointer rounded-lg
              flex flex-col justify-between
              overflow-hidden"
     >
       <div
         className="
-        text-black text-xs
+        text-text-900 text-xs
         font-medium leading-tight
         whitespace-normal
         break-all
@@ -54,7 +54,7 @@ const SourceCard: React.FC<{
 
       <div className="flex items-center gap-1 mt-1">
         <ResultIcon doc={document} size={18} />
-        <div className="text-[#4a4a4a] text-xs leading-tight truncate flex-1 min-w-0">
+        <div className="text-text-700 text-xs leading-tight truncate flex-1 min-w-0">
           {truncatedIdentifier}
         </div>
       </div>

web/src/app/chat/message/SubQuestionsDisplay.tsx

@@ -317,7 +317,7 @@ const SubQuestionDisplay: React.FC<{
       <div
         className={`absolute left-[5px] ${
           isFirst ? "top-[15px]" : "top-0"
-        } bottom-0 w-[2px] bg-neutral-200
+        } bottom-0 w-[2px] bg-background-200
 
         ${isLast && !toggled ? "h-4" : "h-full"}`}
       />
@@ -331,7 +331,7 @@ const SubQuestionDisplay: React.FC<{
         </div>
         <div className="ml-8 w-full">
           <div
-            className="flex -mx-2 rounded-md px-2 hover:bg-[#F5F3ED] items-start py-1.5 my-.5 cursor-pointer"
+            className="flex -mx-2 rounded-md px-2 hover:bg-background-100 dark:hover:bg-neutral-800 items-start py-1.5 my-.5 cursor-pointer"
             onClick={() => setToggled(!toggled)}
           >
             <div className="text-black text-base font-medium leading-normal flex-grow pr-2">
@@ -359,7 +359,7 @@ const SubQuestionDisplay: React.FC<{
                 >
                   <div className="pl-0 pb-2">
                     <div className="mb-4 flex flex-col gap-2">
-                      <div className="text-[#4a4a4a] text-xs font-medium leading-normal">
+                      <div className="text-text-800 text-xs font-medium leading-normal">
                         Searching
                       </div>
                       <div className="flex flex-wrap gap-2">
@@ -376,7 +376,7 @@ const SubQuestionDisplay: React.FC<{
 
                     {(subQuestion?.is_complete || memoizedDocs?.length > 0) && (
                       <div className="mb-4 flex flex-col gap-2">
-                        <div className="text-[#4a4a4a] text-xs font-medium leading-normal">
+                        <div className="text-text-800 text-xs font-medium leading-normal">
                           Reading
                         </div>
                         <div className="flex flex-wrap gap-2">
@@ -413,7 +413,7 @@ const SubQuestionDisplay: React.FC<{
                       subQuestion?.answer?.length > 0) && (
                       <div className="flex flex-col gap-2">
                         <div
-                          className="text-[#4a4a4a] cursor-pointer items-center text-xs flex gap-x-1 font-medium leading-normal"
+                          className="text-text-800 cursor-pointer items-center text-xs flex gap-x-1 font-medium leading-normal"
                           onClick={() => setAnalysisToggled(!analysisToggled)}
                         >
                           Analyzing
@@ -447,7 +447,7 @@ const SubQuestionDisplay: React.FC<{
               >
                 <div className="pl-0">
                   <div className="flex flex-col gap-2">
-                    <div className="leading-none text-[#4a4a4a] text-xs font-medium">
+                    <div className="leading-none text-text-800 text-xs font-medium">
                       {temporaryDisplay?.tinyQuestion}
                     </div>
                   </div>

web/src/app/chat/modal/FeedbackModal.tsx

@@ -55,7 +55,7 @@ export const FeedbackModal = ({
   return (
     <Modal onOutsideClick={onClose} width="w-full max-w-3xl">
       <>
-        <h2 className="text-2xl text-emphasis font-bold mb-4 flex">
+        <h2 className="text-2xl text-text-darker font-bold mb-4 flex">
           <div className="mr-1 my-auto">
             {feedbackType === "like" ? (
               <FilledLikeIcon
@@ -76,7 +76,7 @@ export const FeedbackModal = ({
           {predefinedFeedbackOptions.map((feedback, index) => (
             <button
               key={index}
-              className={`bg-background-dark hover:bg-hover text-default py-2 px-4 rounded m-1 
+              className={`bg-background-dark hover:bg-accent-background-hovered text-default py-2 px-4 rounded m-1 
                 ${predefinedFeedback === feedback && "ring-2 ring-accent/20"}`}
               onClick={() => handlePredefinedFeedback(feedback)}
             >
@@ -109,7 +109,7 @@ export const FeedbackModal = ({
 
         <div className="flex mt-2">
           <button
-            className="bg-accent text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none mx-auto"
+            className="bg-agent text-white py-2 px-4 rounded hover:bg-agent/50 focus:outline-none mx-auto"
             onClick={handleSubmit}
           >
             Submit feedback

web/src/app/chat/modal/MakePublicAssistantModal.tsx

@@ -15,7 +15,7 @@ export function MakePublicAssistantModal({
   return (
     <Modal onOutsideClick={onClose} width="max-w-3xl">
       <div className="space-y-6">
-        <h2 className="text-2xl font-bold text-emphasis">
+        <h2 className="text-2xl font-bold text-text-darker">
           {isPublic ? "Public Assistant" : "Make Assistant Public"}
         </h2>
 

web/src/app/chat/modal/ShareChatSessionModal.tsx

@@ -13,6 +13,7 @@ import { usePopup } from "@/components/admin/connectors/Popup";
 import { structureValue } from "@/lib/llm/utils";
 import { LlmOverride } from "@/lib/hooks";
 import { Separator } from "@/components/ui/separator";
+import { AdvancedOptionsToggle } from "@/components/AdvancedOptionsToggle";
 
 function buildShareLink(chatSessionId: string) {
   const baseUrl = `${window.location.protocol}//${window.location.host}`;
@@ -99,14 +100,15 @@ export function ShareChatSessionModal({
       : ""
   );
   const { popup, setPopup } = usePopup();
+  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
 
   return (
     <>
       {popup}
-      <Modal onOutsideClick={onClose} width="max-w-3xl">
+      <Modal onOutsideClick={onClose} width="w-full max-w-3xl">
         <>
           <div className="flex mb-4">
-            <h2 className="text-2xl text-emphasis font-bold flex my-auto">
+            <h2 className="text-2xl text-text-darker font-bold flex my-auto">
               Share link to Chat
             </h2>
           </div>
@@ -181,7 +183,7 @@ export function ShareChatSessionModal({
                       }
                     }}
                     size="sm"
-                    variant="submit"
+                    variant="secondary"
                   >
                     Generate and Copy Share Link
                   </Button>
@@ -191,47 +193,56 @@ export function ShareChatSessionModal({
           </div>
 
           <Separator className="my-4" />
-          <div className="mb-4">
-            <Callout type="notice" title="Seed New Chat">
-              Generate a link to a new chat session with the same settings as
-              this chat (including the assistant and model).
-            </Callout>
-          </div>
-          <div className="flex w-full justify-between">
-            <Button
-              icon={FiCopy}
-              onClick={async () => {
-                // NOTE: for "insecure" non-https setup, the `navigator.clipboard.writeText` may fail
-                // as the browser may not allow the clipboard to be accessed.
-                try {
-                  const seedLink = await generateSeedLink(
-                    message,
-                    assistantId,
-                    modelOverride
-                  );
-                  if (!seedLink) {
-                    setPopup({
-                      message: "Failed to generate seed link",
-                      type: "error",
-                    });
-                  } else {
-                    navigator.clipboard.writeText(seedLink);
-                    setPopup({
-                      message: "Link copied to clipboard!",
-                      type: "success",
-                    });
-                  }
-                } catch (e) {
-                  console.error(e);
-                  alert("Failed to generate or copy link.");
-                }
-              }}
-              size="sm"
-              variant="secondary"
-            >
-              Generate and Copy Seed Link
-            </Button>
-          </div>
+
+          <AdvancedOptionsToggle
+            showAdvancedOptions={showAdvancedOptions}
+            setShowAdvancedOptions={setShowAdvancedOptions}
+            title="Advanced Options"
+          />
+
+          {showAdvancedOptions && (
+            <>
+              <div className="mb-4">
+                <Callout type="notice" title="Seed New Chat">
+                  Generate a link to a new chat session with the same settings
+                  as this chat (including the assistant and model).
+                </Callout>
+              </div>
+              <div className="flex w-full justify-between">
+                <Button
+                  icon={FiCopy}
+                  onClick={async () => {
+                    try {
+                      const seedLink = await generateSeedLink(
+                        message,
+                        assistantId,
+                        modelOverride
+                      );
+                      if (!seedLink) {
+                        setPopup({
+                          message: "Failed to generate seed link",
+                          type: "error",
+                        });
+                      } else {
+                        navigator.clipboard.writeText(seedLink);
+                        setPopup({
+                          message: "Link copied to clipboard!",
+                          type: "success",
+                        });
+                      }
+                    } catch (e) {
+                      console.error(e);
+                      alert("Failed to generate or copy link.");
+                    }
+                  }}
+                  size="sm"
+                  variant="secondary"
+                >
+                  Generate and Copy Seed Link
+                </Button>
+              </div>
+            </>
+          )}
         </>
       </Modal>
     </>

web/src/app/chat/modal/ThemeToggle.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun, Laptop } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ModeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem
+          onClick={() => setTheme("light")}
+          className={
+            theme === "light" ? "bg-neutral-100 dark:bg-neutral-800" : ""
+          }
+        >
+          <Sun className="mr-2 h-4 w-4" />
+          <span>Light</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => setTheme("dark")}
+          className={
+            theme === "dark" ? "bg-neutral-100 dark:bg-neutral-800" : ""
+          }
+        >
+          <Moon className="mr-2 h-4 w-4" />
+          <span>Dark</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => setTheme("system")}
+          className={
+            theme === "system" ? "bg-neutral-100 dark:bg-neutral-800" : ""
+          }
+        >
+          <Laptop className="mr-2 h-4 w-4" />
+          <span>System</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

web/src/app/chat/modal/UserSettingsModal.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { Modal } from "@/components/Modal";
 import { getDisplayNameForModel, LlmOverride } from "@/lib/hooks";
 import { LLMProviderDescriptor } from "@/app/admin/configuration/llm/interfaces";
@@ -15,6 +15,16 @@ import { SettingsContext } from "@/components/settings/SettingsProvider";
 import { useChatContext } from "@/components/context/ChatContext";
 import { InputPromptsSection } from "./InputPromptsSection";
 import { LLMSelector } from "@/components/llm/LLMSelector";
+import { ModeToggle } from "./ThemeToggle";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Monitor } from "lucide-react";
+import { useTheme } from "next-themes";
 
 export function UserSettingsModal({
   setPopup,
@@ -39,6 +49,8 @@ export function UserSettingsModal({
   } = useUser();
   const containerRef = useRef<HTMLDivElement>(null);
   const messageRef = useRef<HTMLDivElement>(null);
+  const { theme, setTheme } = useTheme();
+  const [selectedTheme, setSelectedTheme] = useState(theme);
 
   useEffect(() => {
     const container = containerRef.current;
@@ -155,16 +167,21 @@ export function UserSettingsModal({
       : user?.preferences?.auto_scroll;
 
   return (
-    <Modal onOutsideClick={onClose} width="rounded-lg w-full bg-white max-w-xl">
-      <>
-        <div className="flex mb-4">
-          <h2 className="text-2xl text-emphasis font-bold flex my-auto">
-            User settings
-          </h2>
+    <Modal onOutsideClick={onClose} width="rounded-lg w-full max-w-xl">
+      <div className="p-2">
+        <div>
+          <h2 className="text-2xl font-bold">User settings</h2>
         </div>
 
-        <div className="flex flex-col gap-y-2">
-          <div className="flex items-center gap-x-2">
+        <div className="space-y-6 py-4">
+          {/* Auto-scroll Section */}
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <h4 className="text-base font-medium">Auto-scroll</h4>
+              <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                Automatically scroll to new content
+              </p>
+            </div>
             <Switch
               size="sm"
               checked={checked}
@@ -172,9 +189,16 @@ export function UserSettingsModal({
                 updateUserAutoScroll(checked);
               }}
             />
-            <Label className="text-sm">Enable auto-scroll</Label>
           </div>
-          <div className="flex items-center gap-x-2">
+
+          {/* Prompt Shortcuts Section */}
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <h4 className="text-base font-medium">Prompt Shortcuts</h4>
+              <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                Enable keyboard shortcuts for prompts
+              </p>
+            </div>
             <Switch
               size="sm"
               checked={user?.preferences?.shortcut_enabled}
@@ -182,9 +206,16 @@ export function UserSettingsModal({
                 updateUserShortcuts(checked);
               }}
             />
-            <Label className="text-sm">Enable Prompt Shortcuts</Label>
           </div>
-          <div className="flex items-center gap-x-2">
+
+          {/* Temperature Override Section */}
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <h4 className="text-base font-medium">Temperature Override</h4>
+              <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                Override default temperature settings
+              </p>
+            </div>
             <Switch
               size="sm"
               checked={user?.preferences?.temperature_override_enabled}
@@ -192,53 +223,69 @@ export function UserSettingsModal({
                 updateUserTemperatureOverrideEnabled(checked);
               }}
             />
-            <Label className="text-sm">Enable Temperature Override</Label>
           </div>
-        </div>
 
-        <Separator />
+          <Separator className="my-4" />
 
-        <h3 className="text-lg text-emphasis font-bold mb-2 ">Default Model</h3>
-        <div
-          className="w-full max-h-96 overflow-y-auto flex text-sm flex-col border rounded-md"
-          ref={containerRef}
-        >
-          <div
-            ref={messageRef}
-            className="sticky top-0 bg-background-100 p-2 text-xs text-emphasis font-medium"
-            style={{ display: "none" }}
-          >
-            Scroll to see all options
+          {/* Theme Section */}
+          <div className="space-y-3">
+            <h4 className="text-base font-medium">Theme</h4>
+            <Select
+              value={selectedTheme}
+              onValueChange={(value) => {
+                setSelectedTheme(value);
+                setTheme(value);
+              }}
+            >
+              <SelectTrigger className="w-full">
+                <div className="flex items-center gap-2">
+                  <Monitor className="h-4 w-4" />
+                  <SelectValue placeholder="Select theme" />
+                </div>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="system">System</SelectItem>
+                <SelectItem value="light">Light</SelectItem>
+                <SelectItem value="dark">Dark</SelectItem>
+              </SelectContent>
+            </Select>
           </div>
-          <LLMSelector
-            userSettings
-            llmProviders={llmProviders}
-            currentLlm={
-              defaultModelDestructured
-                ? structureValue(
-                    defaultModelDestructured.provider,
-                    "",
-                    defaultModelDestructured.modelName
-                  )
-                : null
-            }
-            requiresImageGeneration={false}
-            onSelect={(selected) => {
-              if (selected === null) {
-                handleChangedefaultModel(null);
-              } else {
-                const { modelName, provider, name } =
-                  destructureValue(selected);
-                if (modelName && name) {
-                  handleChangedefaultModel(
-                    structureValue(provider, "", modelName)
-                  );
-                }
+
+          <Separator className="my-4" />
+
+          {/* Default Model Section */}
+          <div className="space-y-3">
+            <h4 className="text-base font-medium">Default Model</h4>
+            <LLMSelector
+              userSettings
+              llmProviders={llmProviders}
+              currentLlm={
+                defaultModel
+                  ? structureValue(
+                      destructureValue(defaultModel).provider,
+                      "",
+                      destructureValue(defaultModel).modelName
+                    )
+                  : null
               }
-            }}
-          />
+              requiresImageGeneration={false}
+              onSelect={(selected) => {
+                if (selected === null) {
+                  handleChangedefaultModel(null);
+                } else {
+                  const { modelName, provider, name } =
+                    destructureValue(selected);
+                  if (modelName && name) {
+                    handleChangedefaultModel(
+                      structureValue(provider, "", modelName)
+                    );
+                  }
+                }
+              }}
+            />
+          </div>
         </div>
-      </>
+      </div>
     </Modal>
   );
 }

web/src/app/chat/nrf/NRFPage.tsx

@@ -225,7 +225,7 @@ export default function NRFPage({
           onClick={toggleSettings}
           className="bg-white bg-opacity-70 rounded-full p-2.5 cursor-pointer hover:bg-opacity-80 transition-colors duration-200"
         >
-          <Menu size={12} className="text-neutral-900" />
+          <Menu size={12} className="text-text-900" />
         </button>
       </div>
 
@@ -238,7 +238,7 @@ export default function NRFPage({
             <div className="pointer-events-auto absolute top-[40%] left-1/2 -translate-x-1/2 -translate-y-1/2 text-center w-[90%] lg:max-w-3xl">
               <h1
                 className={`pl-2 text-xl text-left w-full mb-4 ${
-                  theme === "light" ? "text-neutral-800" : "text-white"
+                  theme === "light" ? "text-text-800" : "text-white"
                 }`}
               >
                 {isNight
@@ -364,7 +364,7 @@ export default function NRFPage({
                 Welcome to Onyx
               </h2>
               <Button
-                className="bg-accent w-full hover:bg-accent-hover text-white"
+                className="bg-agent w-full hover:bg-accent-hover text-white"
                 onClick={() => {
                   if (window.top) {
                     window.top.location.href = "/auth/login";

web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx

@@ -226,7 +226,7 @@ export function ChatSessionDisplay({
               <div
                 className={`flex  ${
                   isRenamingChat ? "-mr-2" : ""
-                } text-text-darker text-sm leading-normal relative gap-x-2`}
+                } text-text-dark text-sm leading-normal relative gap-x-2`}
               >
                 {isRenamingChat ? (
                   <div className="flex items-center w-full" ref={renamingRef}>
@@ -248,7 +248,7 @@ export function ChatSessionDisplay({
                         className="w-full text-sm bg-transparent border-b border-text-darker outline-none"
                       />
                     </div>
-                    <div className="flex text-[#6c6c6c] flex-none">
+                    <div className="flex text-text-500 flex-none">
                       <button onClick={onRename} className="p-1">
                         <FiCheck size={14} />
                       </button>
@@ -267,10 +267,10 @@ export function ChatSessionDisplay({
                     </div>
                   </div>
                 ) : (
-                  <p className="break-all font-normal overflow-hidden whitespace-nowrap w-full mr-3 relative">
+                  <p className="break-all font-normal overflow-hidden dark:text-[#D4D4D4] whitespace-nowrap w-full mr-3 relative">
                     {chatName || `Unnamed Chat`}
                     <span
-                      className={`absolute right-0 top-0 h-full w-8 bg-gradient-to-r from-transparent 
+                      className={`absolute right-0 top-0 h-full w-2 bg-gradient-to-r from-transparent 
                       ${
                         isSelected
                           ? "to-background-chat-selected"
@@ -325,7 +325,7 @@ export function ChatSessionDisplay({
                             }
                             popover={
                               <div
-                                className={`border border-border rounded-lg bg-background z-50 ${
+                                className={`border border-border text-text-dark rounded-lg bg-background z-50 ${
                                   isDeleteModalOpen ? "w-64" : "w-32"
                                 }`}
                               >
@@ -360,7 +360,7 @@ export function ChatSessionDisplay({
                                     </p>
                                     <div className="flex justify-center gap-2">
                                       <button
-                                        className="px-3 py-1 text-sm bg-gray-200 rounded"
+                                        className="px-3 py-1 text-sm bg-background-200 rounded"
                                         onClick={handleCancelDelete}
                                       >
                                         Cancel

web/src/app/chat/sessionSidebar/HistorySidebar.tsx

@@ -142,13 +142,13 @@ const SortableAssistant: React.FC<SortableAssistantProps> = ({
             : ""
         } relative flex items-center gap-x-2 py-1 px-2 rounded-md`}
       >
-        <AssistantIcon assistant={assistant} size={20} className="flex-none" />
+        <AssistantIcon assistant={assistant} size={16} className="flex-none" />
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
               <p
                 ref={nameRef}
-                className="text-base text-left w-fit line-clamp-1 text-ellipsis text-black"
+                className="text-base text-left w-fit line-clamp-1 text-ellipsis text-black dark:text-[#D4D4D4]"
               >
                 {assistant.name}
               </p>
@@ -271,6 +271,8 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
             bg-background-sidebar
             w-full
             border-r 
+            dark:border-none
+            dark:text-[#D4D4D4]
             border-sidebar-border 
             flex 
             flex-col relative
@@ -291,7 +293,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
           {page == "chat" && (
             <div className="px-4 px-1 -mx-2 gap-y-1 flex-col text-text-history-sidebar-button flex gap-x-1.5 items-center items-center">
               <Link
-                className="w-full px-2 py-1 group rounded-md items-center hover:bg-hover cursor-pointer transition-all duration-150 flex gap-x-2"
+                className="w-full px-2 py-1 group rounded-md items-center hover:bg-accent-background-hovered cursor-pointer transition-all duration-150 flex gap-x-2"
                 href={
                   `/${page}` +
                   (currentChatSession
@@ -309,12 +311,12 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
               >
                 <NewChatIcon size={20} className="flex-none" />
                 <p className="my-auto flex font-normal  items-center ">
-                  Start New Chat
+                  New Chat
                 </p>
               </Link>
               {user?.preferences?.shortcut_enabled && (
                 <Link
-                  className="w-full px-2 py-1  rounded-md items-center hover:bg-hover cursor-pointer transition-all duration-150 flex gap-x-2"
+                  className="w-full px-2 py-1  rounded-md items-center hover:bg-accent-background-hovered cursor-pointer transition-all duration-150 flex gap-x-2"
                   href="/chat/input-prompts"
                 >
                   <DocumentIcon2
@@ -329,8 +331,8 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
             </div>
           )}
 
-          <div className="h-full relative overflow-x-hidden overflow-y-auto">
-            <div className="flex px-4 font-normal text-sm gap-x-2 leading-normal text-[#6c6c6c]/80 items-center font-normal leading-normal">
+          <div className="h-full  relative overflow-x-hidden overflow-y-auto">
+            <div className="flex px-4 font-normal text-sm gap-x-2 leading-normal text-text-500/80 dark:text-[#D4D4D4] items-center font-normal leading-normal">
               Assistants
             </div>
             <DndContext
@@ -373,7 +375,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
             <div className="w-full px-4">
               <button
                 onClick={() => setShowAssistantsModal(true)}
-                className="w-full cursor-pointer text-base text-black hover:bg-background-chat-hover flex items-center gap-x-2 py-1 px-2 rounded-md"
+                className="w-full cursor-pointer text-base text-black dark:text-[#D4D4D4] hover:bg-background-chat-hover flex items-center gap-x-2 py-1 px-2 rounded-md"
               >
                 Explore Assistants
               </button>

web/src/app/chat/sessionSidebar/PagesTab.tsx

@@ -318,7 +318,7 @@ export function PagesTab({
     <div className="flex flex-col gap-y-2 flex-grow">
       {popup}
       <div className="px-4 mt-2 group mr-2 bg-background-sidebar z-20">
-        <div className="flex justify-between text-sm gap-x-2 text-[#6c6c6c]/80 items-center font-normal leading-normal">
+        <div className="flex justify-between text-sm gap-x-2 text-text-300/80 items-center font-normal leading-normal">
           <p>Chats</p>
           <button
             onClick={handleCreateFolder}
@@ -332,7 +332,7 @@ export function PagesTab({
 
       {isCreatingFolder ? (
         <div className="px-4">
-          <div className="flex  overflow-visible items-center w-full text-[#6c6c6c] rounded-md p-1 relative">
+          <div className="flex  overflow-visible items-center w-full text-text-500 rounded-md p-1 relative">
             <Caret size={16} className="flex-none mr-1" />
             <input
               onKeyDown={(e) => {
@@ -343,7 +343,7 @@ export function PagesTab({
               ref={newFolderInputRef}
               type="text"
               placeholder="Enter group name"
-              className="text-sm font-medium bg-transparent outline-none w-full pb-1 border-b border-[#6c6c6c] transition-colors duration-200"
+              className="text-sm font-medium bg-transparent outline-none w-full pb-1 border-b border-background-500 transition-colors duration-200"
             />
             <div className="flex -my-1">
               <div

web/src/app/chat/shared/[chatId]/SharedChatDisplay.tsx

@@ -205,7 +205,7 @@ export function SharedChatDisplay({
                     <h1 className="text-3xl text-strong font-bold">
                       {chatSession.description || `Unnamed Chat`}
                     </h1>
-                    <p className=" text-emphasis">
+                    <p className=" text-text-darker">
                       {humanReadableFormat(chatSession.time_created)}
                     </p>
                     <div