update(ui): re-manage theme config

ui/app/layout.tsx

@@ -34,7 +34,7 @@ export default function RootLayout({
               unstyled: true,
               classNames: {
                 toast:
-                  'bg-primaryLight dark:bg-primaryDark text-white rounded-lg p-4 flex flex-row items-center space-x-2',
+                  'bg-light-primary dark:bg-dark-primary text-white rounded-lg p-4 flex flex-row items-center space-x-2',
               },
             }}
           />

ui/components/Chat.tsx

@@ -66,7 +66,7 @@ const Chat = ({
               sendMessage={sendMessage}
             />
             {!isLast && msg.role === 'assistant' && (
-              <div className="h-px w-full bg-secondLight dark:bg-secondDark" />
+              <div className="h-px w-full bg-light-secondary dark:bg-dark-secondary" />
             )}
           </Fragment>
         );

ui/components/EmptyChatMessageInput.tsx

@@ -31,7 +31,7 @@ const EmptyChatMessageInput = ({
       }}
       className="w-full"
     >
-      <div className="flex flex-col bg-primaryLight dark:bg-primaryDark px-5 pt-5 pb-2 rounded-lg w-full border border-light dark:border-dark">
+      <div className="flex flex-col bg-light-primary dark:bg-dark-primary px-5 pt-5 pb-2 rounded-lg w-full border border-light-300 dark:border-dark-200">
         <TextareaAutosize
           value={message}
           onChange={(e) => setMessage(e.target.value)}

ui/components/Layout.tsx

@@ -1,6 +1,6 @@
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <main className="lg:pl-20 bg-primaryLight dark:bg-primaryDark min-h-screen">
+    <main className="lg:pl-20 bg-light-primary dark:bg-dark-primary min-h-screen">
       <div className="max-w-screen-lg lg:mx-auto mx-4">{children}</div>
     </main>
   );

ui/components/MessageActions/Copy.tsx

@@ -19,7 +19,7 @@ const Copy = ({
         setCopied(true);
         setTimeout(() => setCopied(false), 1000);
       }}
-      className="p-2 text-black/70 dark:text-white/70 rounded-xl hover:bg-secondLight dark:hover:bg-secondDark transition duration-200 hover:text-black dark:hover:text-white"
+      className="p-2 text-black/70 dark:text-white/70 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white"
     >
       {copied ? <Check size={18} /> : <ClipboardList size={18} />}
     </button>

ui/components/MessageActions/Rewrite.tsx

@@ -10,7 +10,7 @@ const Rewrite = ({
   return (
     <button
       onClick={() => rewrite(messageId)}
-      className="py-2 px-3 text-black/70 dark:text-white/70 rounded-xl hover:bg-secondLight dark:hover:bg-secondDark transition duration-200 hover:text-black dark:hover:text-white flex flex-row items-center space-x-1"
+      className="py-2 px-3 text-black/70 dark:text-white/70 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white flex flex-row items-center space-x-1"
     >
       <ArrowLeftRight size={18} />
       <p className="text-xs font-medium">Rewrite</p>

ui/components/MessageBox.tsx

@@ -55,7 +55,7 @@ const MessageBox = ({
         message.content.replace(
           regex,
           (_, number) =>
-            `<a href="${message.sources?.[number - 1]?.metadata?.url}" target="_blank" className="bg-secondLight dark:bg-secondDark px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${number}</a>`,
+            `<a href="${message.sources?.[number - 1]?.metadata?.url}" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${number}</a>`,
         ),
       );
     }
@@ -112,7 +112,7 @@ const MessageBox = ({
               {loading && isLast ? null : (
                 <div className="flex flex-row items-center justify-between w-full text-black dark:text-white py-4 -mx-2">
                   <div className="flex flex-row items-center space-x-1">
-                    {/*  <button className="p-2 text-black/70 dark:text-white/70 rounded-xl hover:bg-secondLight dark:hover:bg-secondDark transition duration-200 hover:text-black text-black dark:hover:text-white">
+                    {/*  <button className="p-2 text-black/70 dark:text-white/70 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black text-black dark:hover:text-white">
                       <Share size={18} />
                     </button> */}
                     <Rewrite rewrite={rewrite} messageId={message.id} />
@@ -127,7 +127,7 @@ const MessageBox = ({
                           start();
                         }
                       }}
-                      className="p-2 text-black/70 dark:text-white/70 rounded-xl hover:bg-secondLight dark:hover:bg-secondDark transition duration-200 hover:text-black dark:hover:text-white"
+                      className="p-2 text-black/70 dark:text-white/70 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white"
                     >
                       {speechStatus === 'started' ? (
                         <StopCircle size={18} />
@@ -144,7 +144,7 @@ const MessageBox = ({
                 message.role === 'assistant' &&
                 !loading && (
                   <>
-                    <div className="h-px w-full bg-secondLight dark:bg-secondDark" />
+                    <div className="h-px w-full bg-light-secondary dark:bg-dark-secondary" />
                     <div className="flex flex-col space-y-3 text-black dark:text-white">
                       <div className="flex flex-row items-center space-x-2 mt-4">
                         <Layers3 />
@@ -156,7 +156,7 @@ const MessageBox = ({
                             className="flex flex-col space-y-3 text-sm"
                             key={i}
                           >
-                            <div className="h-px w-full bg-secondLight dark:bg-secondDark" />
+                            <div className="h-px w-full bg-light-secondary dark:bg-dark-secondary" />
                             <div
                               onClick={() => {
                                 sendMessage(suggestion);

ui/components/MessageBoxLoading.tsx

@@ -1,9 +1,9 @@
 const MessageBoxLoading = () => {
   return (
-    <div className="flex flex-col space-y-2 w-full lg:w-9/12 bg-primaryLight dark:bg-primaryDark animate-pulse rounded-lg p-3">
-      <div className="h-2 rounded-full w-full bg-secondLight dark:bg-secondDark" />
-      <div className="h-2 rounded-full w-9/12 bg-secondLight dark:bg-secondDark" />
-      <div className="h-2 rounded-full w-10/12 bg-secondLight dark:bg-secondDark" />
+    <div className="flex flex-col space-y-2 w-full lg:w-9/12 bg-light-primary dark:bg-dark-primary animate-pulse rounded-lg p-3">
+      <div className="h-2 rounded-full w-full bg-light-secondary dark:bg-dark-secondary" />
+      <div className="h-2 rounded-full w-9/12 bg-light-secondary dark:bg-dark-secondary" />
+      <div className="h-2 rounded-full w-10/12 bg-light-secondary dark:bg-dark-secondary" />
     </div>
   );
 };

ui/components/MessageInput.tsx

@@ -40,7 +40,7 @@ const MessageInput = ({
         }
       }}
       className={cn(
-        'bg-primaryLight dark:bg-primaryDark p-4 flex items-center overflow-hidden border border-light dark:border-dark',
+        'bg-light-primary dark:bg-dark-primary p-4 flex items-center overflow-hidden border border-light-300 dark:border-dark-200',
         mode === 'multi' ? 'flex-col rounded-lg' : 'flex-row rounded-full',
       )}
     >

ui/components/MessageInputActions.tsx

@@ -16,7 +16,7 @@ export const Attach = () => {
   return (
     <button
       type="button"
-      className="p-2 text-black/50 dark:text-white/50 rounded-xl hover:(bg-secondLight dark:bg-secondDark) transition duration-200 hover:text-black dark:hover:text-white"
+      className="p-2 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white"
     >
       <CopyPlus />
     </button>
@@ -85,7 +85,7 @@ export const Focus = ({
     <Popover className="fixed w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
       <Popover.Button
         type="button"
-        className="p-2 text-black/50 dark:text-white/50 rounded-xl hover:bg-secondLight dark:hover:bg-secondDark active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
+        className="p-2 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
       >
         {focusMode !== 'webSearch' ? (
           <div className="flex flex-row items-center space-x-1">
@@ -109,7 +109,7 @@ export const Focus = ({
         leaveTo="opacity-0 translate-y-1"
       >
         <Popover.Panel className="absolute z-10 w-full">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-1 dark:bg-primaryDark border rounded-lg border-light dark:border-dark w-full p-2 max-h-[200px] md:max-h-none overflow-y-auto">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-1 dark:bg-dark-primary border rounded-lg border-light-300 dark:border-dark-200 w-full p-2 max-h-[200px] md:max-h-none overflow-y-auto">
             {focusModes.map((mode, i) => (
               <Popover.Button
                 onClick={() => setFocusMode(mode.key)}
@@ -117,8 +117,8 @@ export const Focus = ({
                 className={cn(
                   'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-2 duration-200 cursor-pointer transition',
                   focusMode === mode.key
-                    ? 'bg-primaryLight dark:bg-primaryDark'
-                    : 'hover:bg-primaryLight dark:bg-primaryDark',
+                    ? 'bg-light-primary dark:bg-dark-primary'
+                    : 'hover:bg-light-primary dark:bg-dark-primary',
                 )}
               >
                 <div
@@ -156,7 +156,7 @@ export const CopilotToggle = ({
       <Switch
         checked={copilotEnabled}
         onChange={setCopilotEnabled}
-        className="bg-primaryLight dark:bg-primaryDark border border-light dark:border-dark relative inline-flex h-5 w-10 sm:h-6 sm:w-11 items-center rounded-full"
+        className="bg-light-primary dark:bg-dark-primary border border-light-300 dark:border-dark-200 relative inline-flex h-5 w-10 sm:h-6 sm:w-11 items-center rounded-full"
       >
         <span className="sr-only">Copilot</span>
         <span

ui/components/MessageSources.tsx

@@ -20,7 +20,7 @@ const MessageSources = ({ sources }: { sources: Document[] }) => {
     <div className="grid grid-cols-2 lg:grid-cols-4 gap-2">
       {sources.slice(0, 3).map((source, i) => (
         <a
-          className="bg-gray-100 hover:bg-gray-200 dark:bg-[#111111] dark:hover:bg-[#1c1c1c] transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
+          className="bg-light-100 hover:bg-light-200 dark:bg-dark-100 dark:hover:bg-dark-300 transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
           key={i}
           href={source.metadata.url}
           target="_blank"
@@ -51,7 +51,7 @@ const MessageSources = ({ sources }: { sources: Document[] }) => {
       {sources.length > 3 && (
         <button
           onClick={openModal}
-          className="bg-gray-100 hover:bg-gray-200 dark:bg-[#111111] dark:hover:bg-[#1c1c1c] transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
+          className="bg-light-100 hover:bg-light-200 dark:bg-dark-100 dark:hover:bg-dark-300 transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
         >
           <div className="flex flex-row items-center space-x-1">
             {sources.slice(3, 6).map((source, i) => (
@@ -83,14 +83,14 @@ const MessageSources = ({ sources }: { sources: Document[] }) => {
                 leaveFrom="opacity-100 scale-200"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-md transform rounded-2xl bg-gray-100 dark:bg-[#111111] border border-gray-200 dark:border-[#1c1c1c] p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Panel className="w-full max-w-md transform rounded-2xl bg-light-100 dark:bg-dark-100 border border-light-300 dark:border-dark-200 p-6 text-left align-middle shadow-xl transition-all">
                   <Dialog.Title className="text-lg font-medium leading-6 dark:text-white">
                     Sources
                   </Dialog.Title>
                   <div className="grid grid-cols-2 gap-2 overflow-auto max-h-[300px] mt-2 pr-2">
                     {sources.map((source, i) => (
                       <a
-                        className="bg-gray-100 hover:bg-gray-200 dark:bg-[#111111] dark:hover:bg-[#1c1c1c] border border-gray-200 dark:border-[#1c1c1c] transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
+                        className="bg-light-100 hover:bg-light-200 dark:bg-dark-100 dark:hover:bg-dark-300 border border-light-300 dark:border-dark-200 transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
                         key={i}
                         href={source.metadata.url}
                         target="_blank"

ui/components/Navbar.tsx

@@ -38,7 +38,7 @@ const Navbar = ({ messages }: { messages: Message[] }) => {
   }, []);
 
   return (
-    <div className="fixed z-40 top-0 left-0 right-0 px-4 lg:pl-[104px] lg:pr-6 lg:px-8 flex flex-row items-center justify-between w-full py-4 text-sm text-black dark:text-white/70 border-b bg-primaryLight dark:bg-primaryDark border-light dark:border-dark">
+    <div className="fixed z-40 top-0 left-0 right-0 px-4 lg:pl-[104px] lg:pr-6 lg:px-8 flex flex-row items-center justify-between w-full py-4 text-sm text-black dark:text-white/70 border-b bg-light-primary dark:bg-dark-primary border-light-300 dark:border-dark-200">
       <Edit
         size={17}
         className="active:scale-95 transition duration-100 cursor-pointer lg:hidden"

ui/components/SearchImages.tsx

@@ -62,7 +62,7 @@ const SearchImages = ({
             );
             setLoading(false);
           }}
-          className="border border-dashed border-light dark:border-dark hover:bg-secondLight dark:hover:bg-secondDark active:scale-95 duration-200 transition px-4 py-2 flex flex-row items-center justify-between rounded-lg dark:text-white text-sm w-full"
+          className="border border-dashed border-light-300 dark:border-dark-200 hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 duration-200 transition px-4 py-2 flex flex-row items-center justify-between rounded-lg dark:text-white text-sm w-full"
         >
           <div className="flex flex-row items-center space-x-2">
             <ImagesIcon size={17} />
@@ -76,7 +76,7 @@ const SearchImages = ({
           {[...Array(4)].map((_, i) => (
             <div
               key={i}
-              className="bg-secondLight dark:bg-secondDark h-32 w-full rounded-lg animate-pulse aspect-video object-cover"
+              className="bg-light-secondary dark:bg-dark-secondary h-32 w-full rounded-lg animate-pulse aspect-video object-cover"
             />
           ))}
         </div>
@@ -120,7 +120,7 @@ const SearchImages = ({
             {images.length > 4 && (
               <button
                 onClick={() => setOpen(true)}
-                className="bg-gray-100 hover:bg-gray-200 dark:bg-[#111111] dark:hover:bg-[#1c1c1c] transition duration-200 active:scale-95 hover:scale-[1.02] h-auto w-full rounded-lg flex flex-col justify-between text-white p-2"
+                className="bg-gray-100 hover:bg-gray-200 dark:bg-dark-100 dark:hover:bg-dark-300 transition duration-200 active:scale-95 hover:scale-[1.02] h-auto w-full rounded-lg flex flex-col justify-between text-white p-2"
               >
                 <div className="flex flex-row items-center space-x-1">
                   {images.slice(3, 6).map((image, i) => (

ui/components/SearchVideos.tsx

@@ -77,7 +77,7 @@ const Searchvideos = ({
             );
             setLoading(false);
           }}
-          className="border border-dashed border-light dark:border-dark hover:bg-secondLight dark:hover:bg-secondDark active:scale-95 duration-200 transition px-4 py-2 flex flex-row items-center justify-between rounded-lg dark:text-white text-sm w-full"
+          className="border border-dashed border-light-300 dark:border-dark-200 hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 duration-200 transition px-4 py-2 flex flex-row items-center justify-between rounded-lg dark:text-white text-sm w-full"
         >
           <div className="flex flex-row items-center space-x-2">
             <VideoIcon size={17} />
@@ -91,7 +91,7 @@ const Searchvideos = ({
           {[...Array(4)].map((_, i) => (
             <div
               key={i}
-              className="bg-secondLight dark:bg-secondDark h-32 w-full rounded-lg animate-pulse aspect-video object-cover"
+              className="bg-light-secondary dark:bg-dark-secondary h-32 w-full rounded-lg animate-pulse aspect-video object-cover"
             />
           ))}
         </div>
@@ -151,7 +151,7 @@ const Searchvideos = ({
             {videos.length > 4 && (
               <button
                 onClick={() => setOpen(true)}
-                className="bg-gray-100 hover:bg-gray-200 dark:bg-[#111111] dark:hover:bg-[#1c1c1c] transition duration-200 active:scale-95 hover:scale-[1.02] h-auto w-full rounded-lg flex flex-col justify-between text-white p-2"
+                className="bg-gray-100 hover:bg-gray-200 dark:bg-dark-100 dark:hover:bg-dark-300 transition duration-200 active:scale-95 hover:scale-[1.02] h-auto w-full rounded-lg flex flex-col justify-between text-white p-2"
               >
                 <div className="flex flex-row items-center space-x-1">
                   {videos.slice(3, 6).map((video, i) => (

ui/components/SettingsDialog.tsx

@@ -16,7 +16,7 @@ function Input({ className, ...restProps }: InputProps) {
     <input
       {...restProps}
       className={cn(
-        'bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm',
+        'bg-light-primary dark:bg-dark-primary px-3 py-2 flex items-center overflow-hidden border border-light-300 dark:border-dark-200 dark:text-white rounded-lg text-sm',
         className,
       )}
     />
@@ -32,7 +32,7 @@ function Select({ className, options, ...restProps }: SelectProps) {
     <select
       {...restProps}
       className={cn(
-        'bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm',
+        'bg-light-primary dark:bg-dark-primary px-3 py-2 flex items-center overflow-hidden border border-light-300 dark:border-dark-200 dark:text-white rounded-lg text-sm',
         className,
       )}
     >
@@ -203,7 +203,7 @@ const SettingsDialog = ({
               leaveFrom="opacity-100 scale-200"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="w-full max-w-md transform rounded-2xl bg-secondLight dark:bg-secondDark border border-light dark:border-dark p-6 text-left align-middle shadow-xl transition-all">
+              <Dialog.Panel className="w-full max-w-md transform rounded-2xl bg-light-secondary dark:bg-dark-secondary border border-light-300 dark:border-dark-200 p-6 text-left align-middle shadow-xl transition-all">
                 <Dialog.Title className="text-xl font-medium leading-6 dark:text-white">
                   Settings
                 </Dialog.Title>

ui/components/Sidebar.tsx

@@ -45,7 +45,7 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
   return (
     <div>
       <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-20 lg:flex-col">
-        <div className="flex grow flex-col items-center justify-between gap-y-5 overflow-y-auto bg-secondLight dark:bg-secondDark px-2 py-8">
+        <div className="flex grow flex-col items-center justify-between gap-y-5 overflow-y-auto bg-light-secondary dark:bg-dark-secondary px-2 py-8">
           <a href="/">
             <SquarePen className="cursor-pointer" />
           </a>
@@ -85,7 +85,7 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
         </div>
       </div>
 
-      <div className="fixed bottom-0 w-full z-50 flex flex-row items-center gap-x-6 bg-primaryLight dark:bg-primaryDark px-4 py-4 shadow-sm lg:hidden">
+      <div className="fixed bottom-0 w-full z-50 flex flex-row items-center gap-x-6 bg-light-primary dark:bg-dark-primary px-4 py-4 shadow-sm lg:hidden">
         {navLinks.map((link, i) => (
           <Link
             href={link.href}

ui/tailwind.config.ts

@@ -1,5 +1,18 @@
 import type { Config } from 'tailwindcss';
-import color from 'tailwindcss/colors';
+import type { DefaultColors } from 'tailwindcss/types/generated/colors';
+
+const themeDark = (colors: DefaultColors) => ({
+  50: '#0a0a0a',
+  100: '#111111',
+  200: '#1c1c1c',
+});
+
+const themeLight = (colors: DefaultColors) => ({
+  50: '#fff',
+  100: colors.slate[50],
+  200: colors.slate[100],
+  300: colors.slate[200],
+});
 
 const config: Config = {
   content: [
@@ -10,15 +23,28 @@ const config: Config = {
   darkMode: 'class',
   theme: {
     extend: {
-      borderColor: {
-        light: 'rgba(0, 0, 0, 0.1)',
-        dark: '#1c1c1c',
+      borderColor: ({ colors }) => {
+        return {
+          light: themeLight(colors),
+          dark: themeDark(colors),
+        };
       },
-      colors: {
-        primaryDark: '#0a0a0a',
-        secondDark: '#1c1c1c',
-        primaryLight: '#fff',
-        secondLight: color.gray[50],
+      colors: ({ colors }) => {
+        const colorsDark = themeDark(colors);
+        const colorsLight = themeLight(colors);
+
+        return {
+          dark: {
+            primary: colorsDark[50],
+            secondary: colorsDark[100],
+            ...colorsDark,
+          },
+          light: {
+            primary: colorsLight[50],
+            secondary: colorsLight[100],
+            ...colorsLight,
+          },
+        };
       },
     },
   },