From ee4024a3da3f8583433d7482bcba4d6da3f7e458 Mon Sep 17 00:00:00 2001
From: marurunn <narurunne@gmail.com>
Date: Sun, 5 Jan 2025 02:54:27 +0900
Subject: [PATCH 1/3] add dark theme

---
 frontend/src/components/Alert.tsx             |  6 +-
 frontend/src/components/ApiKeyItem.tsx        |  6 +-
 frontend/src/components/AppContent.tsx        | 16 +++--
 frontend/src/components/AuthAmplify.tsx       |  2 +-
 frontend/src/components/AuthCustom.tsx        |  2 +-
 frontend/src/components/Button.tsx            |  4 +-
 frontend/src/components/ButtonFileChoose.tsx  |  4 +-
 frontend/src/components/ButtonSend.tsx        |  2 +-
 frontend/src/components/ChatListDrawer.tsx    |  4 +-
 .../src/components/ChatMessage.stories.tsx    | 12 ++--
 frontend/src/components/ChatMessage.tsx       |  8 +--
 .../src/components/ChatMessageMarkdown.tsx    |  4 +-
 .../DialogConfirmClearConversations.tsx       |  2 +-
 .../src/components/DialogConfirmDeleteApi.tsx |  2 +-
 .../components/DialogConfirmDeleteApiKey.tsx  |  2 +-
 .../src/components/DialogConfirmDeleteBot.tsx |  2 +-
 .../components/DialogConfirmDeleteChat.tsx    |  2 +-
 .../components/DialogInstructionsSamples.tsx  |  4 +-
 frontend/src/components/DialogShareBot.tsx    |  4 +-
 frontend/src/components/DrawerItem.tsx        |  8 +--
 frontend/src/components/GenerationConfig.tsx  |  2 +-
 frontend/src/components/InputChatContent.tsx  | 12 ++--
 frontend/src/components/InputText.tsx         |  8 +--
 .../src/components/KnowledgeFileUploader.tsx  |  6 +-
 .../src/components/ListItemBot.stories.tsx    | 12 ++--
 frontend/src/components/ListItemBot.tsx       |  8 +--
 frontend/src/components/Menu.tsx              | 10 +--
 frontend/src/components/ModalDialog.tsx       |  6 +-
 frontend/src/components/PopoverItem.tsx       |  2 +-
 .../src/components/PopoverMenu.stories.tsx    |  2 +-
 frontend/src/components/PopoverMenu.tsx       |  4 +-
 frontend/src/components/RadioButton.tsx       |  8 +--
 .../src/components/RelatedDocumentViewer.tsx  |  4 +-
 frontend/src/components/Select.tsx            | 10 +--
 frontend/src/components/Skeleton.tsx          |  2 +-
 frontend/src/components/Slider.tsx            |  8 +--
 frontend/src/components/StatusSyncBot.tsx     |  6 +-
 .../src/components/SwitchBedrockModel.tsx     | 10 +--
 frontend/src/components/Textarea.tsx          |  8 +--
 frontend/src/components/Toggle.tsx            |  4 +-
 .../src/components/UploadedAttachedFile.tsx   |  8 +--
 .../agent/components/AgentToolList.tsx        |  2 +-
 .../agent/components/AvailableTools.tsx       |  4 +-
 .../features/agent/components/ToolCard.tsx    |  4 +-
 .../knowledgeBase/pages/BotKbEditPage.tsx     | 40 +++++------
 frontend/src/pages/AdminApiManagementPage.tsx |  4 +-
 frontend/src/pages/AdminBotManagementPage.tsx | 32 ++++-----
 .../src/pages/AdminSharedBotAnalyticsPage.tsx |  4 +-
 frontend/src/pages/BotApiSettingsPage.tsx     | 12 ++--
 frontend/src/pages/BotExplorePage.tsx         |  8 +--
 frontend/src/pages/ChatPage.tsx               | 72 ++++++++++++++++---
 frontend/src/pages/ErrorFallback.tsx          |  8 +--
 frontend/src/providers/SnackbarProvider.tsx   |  2 +-
 frontend/tailwind.config.js                   | 36 ++++++++--
 54 files changed, 276 insertions(+), 188 deletions(-)

diff --git a/frontend/src/components/Alert.tsx b/frontend/src/components/Alert.tsx
index 6bf0e62a7..9e33f36c5 100644
--- a/frontend/src/components/Alert.tsx
+++ b/frontend/src/components/Alert.tsx
@@ -24,7 +24,7 @@ const Alert: React.FC<Props> = (props) => {
   return (
     <div
       className={twMerge(
-        'flex flex-col rounded border border-aws-squid-ink  shadow-lg',
+        'flex flex-col rounded border border-aws-squid-ink-light dark:border-aws-squid-ink-dark shadow-lg',
         props.severity === 'info' && 'bg-aws-aqua',
         props.severity === 'warning' && 'bg-yellow',
         props.severity === 'error' && 'bg-red',
@@ -32,13 +32,13 @@ const Alert: React.FC<Props> = (props) => {
       )}>
       <div
         className={twMerge(
-          'flex gap-2 p-2 font-bold text-aws-font-color-white'
+          'flex gap-2 p-2 font-bold text-aws-font-color-white-light dark:text-aws-font-color-white-dark'
         )}>
         {icon}
         <div>{props.title}</div>
       </div>
 
-      <div className="px-2 pb-2 text-aws-font-color-white">
+      <div className="px-2 pb-2 text-aws-font-color-white-light dark:text-aws-font-color-white-dark">
         {props.children}
       </div>
     </div>
diff --git a/frontend/src/components/ApiKeyItem.tsx b/frontend/src/components/ApiKeyItem.tsx
index 58f3a164e..d0e39b06b 100644
--- a/frontend/src/components/ApiKeyItem.tsx
+++ b/frontend/src/components/ApiKeyItem.tsx
@@ -64,7 +64,7 @@ const ApiKeyItem: React.FC<Props> = (props) => {
         {isLoading ? (
           <Skeleton className="h-8 w-full" />
         ) : (
-          <div className="flex flex-col gap-1 rounded border border-aws-font-color/50 p-1 text-sm">
+          <div className="flex flex-col gap-1 rounded border border-aws-font-color-light/50 dark:border-aws-font-color-dark p-1 text-sm">
             <div className="text-base font-semibold">
               {botApiKey?.description}
             </div>
@@ -80,7 +80,7 @@ const ApiKeyItem: React.FC<Props> = (props) => {
                   {t('bot.apiSettings.label.apiKeyDetail.inactive')}
                 </div>
               )}
-              <div className="text-xs text-aws-font-color/70">
+              <div className="text-xs text-aws-font-color-light/70 dark:text-aws-font-color-dark/70">
                 <div className="mr-1 inline">
                   {t('bot.apiSettings.label.apiKeyDetail.creationDate')}:
                 </div>
@@ -98,7 +98,7 @@ const ApiKeyItem: React.FC<Props> = (props) => {
                 <ButtonCopy text={botApiKey?.value ?? ''} className="-my-2" />
                 <Button
                   text
-                  className="-m-2 font-bold text-aws-sea-blue"
+                  className="-m-2 font-bold text-aws-sea-blue-light dark:text-aws-sea-blue-dark"
                   onClick={() => {
                     setIsHideKey(!isHideKey);
                   }}>
diff --git a/frontend/src/components/AppContent.tsx b/frontend/src/components/AppContent.tsx
index 53defb8ba..10ed0b5e9 100644
--- a/frontend/src/components/AppContent.tsx
+++ b/frontend/src/components/AppContent.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import ChatListDrawer from './ChatListDrawer';
 import { BaseProps } from '../@types/common';
 import { ConversationMeta } from '../@types/conversation';
@@ -18,6 +18,7 @@ import useUser from '../hooks/useUser';
 import DialogConfirmDeleteChat from './DialogConfirmDeleteChat';
 import DialogConfirmClearConversations from './DialogConfirmClearConversations';
 import DialogSelectLanguage from './DialogSelectLanguage';
+import useLocalStorage from '../hooks/useLocalStorage';
 
 type Props = BaseProps & {
   signOut?: () => void;
@@ -34,6 +35,13 @@ const AppContent: React.FC<Props> = (props) => {
   const { newChat, isGeneratedTitle } = useChat();
   const { isConversationOrNewChat, pathPattern } = usePageTitlePathPattern();
   const { isAdmin } = useUser();
+  const [theme] = useLocalStorage(
+    'theme',
+    'light'
+  );
+  useEffect(() => {
+    document.documentElement.className = theme;
+  }, [theme]);
 
   const onClickNewChat = useCallback(() => {
     navigate('/');
@@ -74,7 +82,7 @@ const AppContent: React.FC<Props> = (props) => {
   const [isOpenSelectLangage, setIsOpenSelectLangage] = useState(false);
 
   return (
-    <div className="relative flex h-dvh w-screen bg-aws-paper">
+    <div className="relative flex h-dvh w-screen bg-aws-paper-light dark:bg-aws-paper-dark">
       <ChatListDrawer
         isAdmin={isAdmin}
         conversations={conversations}
@@ -120,7 +128,7 @@ const AppContent: React.FC<Props> = (props) => {
 
       <main className="min-h-dvh relative flex flex-col flex-1 overflow-y-hidden transition-width">
 
-        <header className="visible flex h-12 w-full items-center bg-aws-squid-ink p-3 text-lg text-aws-font-color-white lg:hidden lg:h-0">
+        <header className="visible flex h-12 w-full items-center bg-aws-squid-ink-light dark:bg-aws-squid-ink-dark p-3 text-lg text-aws-font-color-white-light dark:text-aws-font-color-white-dark lg:hidden lg:h-0">
           <button
             className="mr-2 rounded-full p-2 hover:brightness-50 focus:outline-none focus:ring-1 "
             onClick={() => {
@@ -149,7 +157,7 @@ const AppContent: React.FC<Props> = (props) => {
         </header>
 
         <div
-          className="h-full overflow-hidden overflow-y-auto  text-aws-font-color"
+          className="h-full overflow-hidden overflow-y-auto  text-aws-font-color-light dark:text-aws-font-color-dark"
           id="main">
           <SnackbarProvider>
             <Outlet />
diff --git a/frontend/src/components/AuthAmplify.tsx b/frontend/src/components/AuthAmplify.tsx
index feff52cc6..4a8e94221 100644
--- a/frontend/src/components/AuthAmplify.tsx
+++ b/frontend/src/components/AuthAmplify.tsx
@@ -22,7 +22,7 @@ const AuthAmplify: React.FC<Props> = ({ socialProviders, children }) => {
       socialProviders={socialProviders}
       components={{
         Header: () => (
-          <div className="mb-5 mt-10 flex justify-center text-3xl text-aws-font-color">
+          <div className="mb-5 mt-10 flex justify-center text-3xl text-aws-font-color-light">
             {!MISTRAL_ENABLED ? t('app.name') : t('app.nameWithoutClaude')}
           </div>
         ),
diff --git a/frontend/src/components/AuthCustom.tsx b/frontend/src/components/AuthCustom.tsx
index 28aee6a0b..a3f5281fa 100644
--- a/frontend/src/components/AuthCustom.tsx
+++ b/frontend/src/components/AuthCustom.tsx
@@ -58,7 +58,7 @@ const AuthCustom: React.FC<Props> = ({ children }) => {
         </div>
       ) : !authenticated ? (
         <div className="flex flex-col items-center gap-4">
-          <div className="mb-5 mt-10 text-4xl text-aws-sea-blue">
+          <div className="mb-5 mt-10 text-4xl text-aws-sea-blue-light">
             {!MISTRAL_ENABLED ? t('app.name') : t('app.nameWithoutClaude')}
           </div>
           <Button onClick={() => handleSignIn()} className="px-20 text-xl">
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
index 1218e8a53..1cb635ff3 100644
--- a/frontend/src/components/Button.tsx
+++ b/frontend/src/components/Button.tsx
@@ -21,10 +21,10 @@ const Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {
       className={twMerge(
         'flex items-center justify-center whitespace-nowrap rounded-lg border p-1 px-3',
         props.text && 'border-0',
-        props.outlined && 'border-aws-squid-ink/50 hover:bg-white ',
+        props.outlined && 'border-aws-squid-ink-light/50 dark:border-aws-font-color-gray/50 hover:bg-white dark:hover:bg-aws-ui-color-dark dark:text-aws-font-color-dark',
         !props.text &&
           !props.outlined &&
-          'bg-aws-sea-blue text-aws-font-color-white',
+          'bg-aws-sea-blue-light dark:bg-aws-ui-color-dark dark:border-aws-font-color-dark/50 text-aws-font-color-white-light dark:text-aws-font-color-white-dark',
         props.disabled || props.loading ? 'opacity-30' : 'hover:brightness-75',
         props.className
       )}
diff --git a/frontend/src/components/ButtonFileChoose.tsx b/frontend/src/components/ButtonFileChoose.tsx
index 999db985a..adf458102 100644
--- a/frontend/src/components/ButtonFileChoose.tsx
+++ b/frontend/src/components/ButtonFileChoose.tsx
@@ -26,8 +26,8 @@ const ButtonFileChoose: React.FC<Props> = (props) => {
         props.className,
         'flex  items-center justify-center whitespace-nowrap rounded-lg  hover:shadow hover:brightness-75',
         props.icon
-          ? 'rounded-full p-2 text-xl text-aws-sea-blue'
-          : 'border bg-aws-sea-blue p-1 px-3 text-aws-font-color-white',
+          ? 'rounded-full p-2 text-xl text-aws-sea-blue-light dark:text-aws-sea-blue-dark'
+          : 'border dark:border-aws-font-color-dark/50 bg-aws-sea-blue-light dark:bg-aws-ui-color-dark p-1 px-3 text-aws-font-color-white-light dark:text-aws-font-color-white-dark',
         props.disabled ? 'opacity-30 ' : 'cursor-pointer'
       )}>
       {props.children}
diff --git a/frontend/src/components/ButtonSend.tsx b/frontend/src/components/ButtonSend.tsx
index 7a4aed549..89b4dab75 100644
--- a/frontend/src/components/ButtonSend.tsx
+++ b/frontend/src/components/ButtonSend.tsx
@@ -13,7 +13,7 @@ const ButtonSend: React.FC<Props> = (props) => {
   return (
     <button
       className={twMerge(
-        'flex items-center justify-center rounded-xl bg-aws-sea-blue  p-2 text-xl  text-white hover:bg-aws-sea-blue-hover',
+        'flex items-center justify-center rounded-xl bg-aws-sea-blue-light dark:bg-aws-sea-blue-dark p-2 text-xl  text-white hover:bg-aws-sea-blue-hover-light dark:hover:bg-aws-sea-blue-hover-dark',
         props.disabled ? 'opacity-30' : '',
         props.className
       )}
diff --git a/frontend/src/components/ChatListDrawer.tsx b/frontend/src/components/ChatListDrawer.tsx
index 03d9dbf09..3bf41566b 100644
--- a/frontend/src/components/ChatListDrawer.tsx
+++ b/frontend/src/components/ChatListDrawer.tsx
@@ -262,7 +262,7 @@ const ChatListDrawer: React.FC<Props> = (props) => {
 
   return (
     <>
-      <div className="relative h-full overflow-y-auto bg-aws-squid-ink scrollbar-thin scrollbar-track-white scrollbar-thumb-aws-squid-ink/30 ">
+      <div className="relative h-full overflow-y-auto bg-aws-squid-ink-light dark:bg-aws-ui-color-dark scrollbar-thin scrollbar-track-white scrollbar-thumb-aws-squid-ink-light/30 dark:scrollbar-thumb-aws-ui-color-dark/30">
         <nav
           className={`lg:visible lg:w-64 ${
             opened ? 'visible w-64' : 'invisible w-0'
@@ -361,7 +361,7 @@ const ChatListDrawer: React.FC<Props> = (props) => {
           <div
             className={`${
               opened ? 'w-64' : 'w-0'
-            } fixed bottom-0 flex h-12 items-center justify-start border-t bg-aws-squid-ink transition-width lg:w-64`}>
+            } fixed bottom-0 flex h-12 items-center justify-start border-t bg-aws-squid-ink-light dark:bg-aws-ui-color-dark transition-width lg:w-64`}>
             <Menu
               onSignOut={props.onSignOut}
               onSelectLanguage={props.onSelectLanguage}
diff --git a/frontend/src/components/ChatMessage.stories.tsx b/frontend/src/components/ChatMessage.stories.tsx
index 3b99d0099..2c583d8cf 100644
--- a/frontend/src/components/ChatMessage.stories.tsx
+++ b/frontend/src/components/ChatMessage.stories.tsx
@@ -67,13 +67,13 @@ export const Conversation = () => {
         <div
           key={idx}
           className={`${
-            message.role === 'assistant' ? 'bg-aws-squid-ink/5' : ''
+            message.role === 'assistant' ? 'bg-aws-squid-ink-light/5 dark:bg-aws-squid-ink-dark/5' : ''
           }`}>
           <ChatMessage
             chatContent={message}
           />
 
-          <div className="w-full border-b border-aws-squid-ink/10"></div>
+          <div className="w-full border-b border-aws-squid-ink-light/10 dark:border-aws-squid-ink-dark/10"></div>
         </div>
       ))}
     </>
@@ -123,13 +123,13 @@ export const ConversationThinking = () => {
         <div
           key={idx}
           className={`${
-            message.role === 'assistant' ? 'bg-aws-squid-ink/5' : ''
+            message.role === 'assistant' ? 'bg-aws-squid-ink-light/5 dark:bg-aws-squid-ink-dark/5' : ''
           }`}>
           <ChatMessage
             chatContent={message}
           />
 
-          <div className="w-full border-b border-aws-squid-ink/10"></div>
+          <div className="w-full border-b border-aws-squid-ink-light/10 dark:border-aws-squid-ink-dark/10"></div>
         </div>
       ))}
     </>
@@ -272,7 +272,7 @@ export const ConversationWithAgnet = () => {
         <div
           key={idx}
           className={`${
-            message.role === 'assistant' ? 'bg-aws-squid-ink/5' : ''
+            message.role === 'assistant' ? 'bg-aws-squid-ink-light/5 dark:bg-aws-squid-ink-dark/5' : ''
           }`}>
           <ChatMessage
             chatContent={message}
@@ -313,7 +313,7 @@ export const ConversationWithAgnet = () => {
             ]}
           />
 
-          <div className="w-full border-b border-aws-squid-ink/10"></div>
+          <div className="w-full border-b border-aws-squid-ink-light/10 dark:border-aws-squid-ink-dark/10"></div>
         </div>
       ))}
     </>
diff --git a/frontend/src/components/ChatMessage.tsx b/frontend/src/components/ChatMessage.tsx
index f474c72a7..6c7a9dc95 100644
--- a/frontend/src/components/ChatMessage.tsx
+++ b/frontend/src/components/ChatMessage.tsx
@@ -151,7 +151,7 @@ const ChatMessage: React.FC<Props> = (props) => {
 
       <div className="order-first col-span-12 flex lg:order-none lg:col-span-8 lg:col-start-3">
         {chatContent?.role === 'user' && (
-          <div className="h-min rounded bg-aws-sea-blue p-2 text-xl text-white">
+          <div className="h-min rounded bg-aws-sea-blue-light dark:bg-aws-sea-blue-dark p-2 text-xl text-white">
             <PiUserFill />
           </div>
         )}
@@ -312,7 +312,7 @@ const ChatMessage: React.FC<Props> = (props) => {
         <div className="flex flex-col items-end lg:items-start">
           {chatContent?.role === 'user' && !isEdit && (
             <ButtonIcon
-              className="text-dark-gray"
+              className="text-dark-gray dark:text-light-gray"
               onClick={() => {
                 setChangedContent(chatContent.content[firstTextContent].body);
                 setIsEdit(true);
@@ -323,7 +323,7 @@ const ChatMessage: React.FC<Props> = (props) => {
           {chatContent?.role === 'assistant' && (
             <div className="flex">
               <ButtonIcon
-                className="text-dark-gray"
+                className="text-dark-gray dark:text-light-gray"
                 onClick={() => setIsFeedbackOpen(true)}>
                 {chatContent.feedback && !chatContent.feedback.thumbsUp ? (
                   <PiThumbsDownFill />
@@ -332,7 +332,7 @@ const ChatMessage: React.FC<Props> = (props) => {
                 )}
               </ButtonIcon>
               <ButtonCopy
-                className="text-dark-gray"
+                className="text-dark-gray dark:text-light-gray"
                 text={chatContent.content[0].body}
               />
             </div>
diff --git a/frontend/src/components/ChatMessageMarkdown.tsx b/frontend/src/components/ChatMessageMarkdown.tsx
index 58f22d27f..07b0c0355 100644
--- a/frontend/src/components/ChatMessageMarkdown.tsx
+++ b/frontend/src/components/ChatMessageMarkdown.tsx
@@ -63,7 +63,7 @@ const RelatedDocumentLink: React.FC<{
         className={twMerge(
           'mx-0.5 ',
           props.relatedDocument != null
-            ? 'cursor-pointer text-aws-sea-blue hover:text-aws-sea-blue-hover'
+            ? 'cursor-pointer text-aws-sea-blue-light dark:text-aws-sea-blue-dark hover:text-aws-sea-blue-hover-light dark:hover:text-aws-sea-blue-hover-dark'
             : 'cursor-not-allowed text-gray'
         )}
         onClick={() => {
@@ -139,7 +139,7 @@ const ChatMessageMarkdown: React.FC<Props> = ({
 
   return (
     <ReactMarkdown
-      className={twMerge(className, 'prose max-w-full break-all')}
+      className={twMerge(className, 'prose dark:prose-invert max-w-full break-all')}
       children={text}
       remarkPlugins={remarkPlugins}
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
diff --git a/frontend/src/components/DialogConfirmClearConversations.tsx b/frontend/src/components/DialogConfirmClearConversations.tsx
index 3141f22f8..1e2f292a5 100644
--- a/frontend/src/components/DialogConfirmClearConversations.tsx
+++ b/frontend/src/components/DialogConfirmClearConversations.tsx
@@ -31,7 +31,7 @@ const DialogConfirmClearConversations: React.FC<Props> = (props) => {
           onClick={() => {
             props.onDelete();
           }}
-          className="bg-red p-2 text-aws-font-color-white">
+          className="bg-red p-2 text-aws-font-color-white-light dark:text-aws-font-color-white-dark">
           {t('button.deleteAll')}
         </Button>
       </div>
diff --git a/frontend/src/components/DialogConfirmDeleteApi.tsx b/frontend/src/components/DialogConfirmDeleteApi.tsx
index 17b2351ca..798b9df40 100644
--- a/frontend/src/components/DialogConfirmDeleteApi.tsx
+++ b/frontend/src/components/DialogConfirmDeleteApi.tsx
@@ -28,7 +28,7 @@ const DialogConfirmDeleteApi: React.FC<Props> = (props) => {
         <Button
           loading={props.loading}
           onClick={props.onDelete}
-          className="bg-red p-2 text-aws-font-color-white">
+          className="bg-red p-2 text-aws-font-color-white-light dark:text-aws-font-color-white-dark">
           {t('bot.button.delete')}
         </Button>
       </div>
diff --git a/frontend/src/components/DialogConfirmDeleteApiKey.tsx b/frontend/src/components/DialogConfirmDeleteApiKey.tsx
index c55218ecb..3ab3af8e2 100644
--- a/frontend/src/components/DialogConfirmDeleteApiKey.tsx
+++ b/frontend/src/components/DialogConfirmDeleteApiKey.tsx
@@ -35,7 +35,7 @@ const DialogConfirmDeleteApiKey: React.FC<Props> = (props) => {
         </Button>
         <Button
           onClick={props.onDelete}
-          className="bg-red p-2 text-aws-font-color-white">
+          className="bg-red p-2 text-aws-font-color-white-light dark:text-aws-font-color-white-dark">
           {t('bot.button.delete')}
         </Button>
       </div>
diff --git a/frontend/src/components/DialogConfirmDeleteBot.tsx b/frontend/src/components/DialogConfirmDeleteBot.tsx
index 5c74a530a..83cec18eb 100644
--- a/frontend/src/components/DialogConfirmDeleteBot.tsx
+++ b/frontend/src/components/DialogConfirmDeleteBot.tsx
@@ -36,7 +36,7 @@ const DialogConfirmDeleteBot: React.FC<Props> = (props) => {
           onClick={() => {
             props.onDelete(props.target?.id ?? '');
           }}
-          className="bg-red p-2 text-aws-font-color-white">
+          className="bg-red p-2 text-aws-font-color-white-light dark:text-aws-font-color-white-dark">
           {t('button.delete')}
         </Button>
       </div>
diff --git a/frontend/src/components/DialogConfirmDeleteChat.tsx b/frontend/src/components/DialogConfirmDeleteChat.tsx
index b3290f57f..489c532ab 100644
--- a/frontend/src/components/DialogConfirmDeleteChat.tsx
+++ b/frontend/src/components/DialogConfirmDeleteChat.tsx
@@ -36,7 +36,7 @@ const DialogConfirmDeleteChat: React.FC<Props> = (props) => {
           onClick={() => {
             props.onDelete(props.target?.id ?? '');
           }}
-          className="bg-red p-2 text-aws-font-color-white">
+          className="bg-red p-2 text-aws-font-color-white-light dark:text-aws-font-color-white-dark">
           {t('button.delete')}
         </Button>
       </div>
diff --git a/frontend/src/components/DialogInstructionsSamples.tsx b/frontend/src/components/DialogInstructionsSamples.tsx
index 54fb3e73d..24026da66 100644
--- a/frontend/src/components/DialogInstructionsSamples.tsx
+++ b/frontend/src/components/DialogInstructionsSamples.tsx
@@ -13,7 +13,7 @@ const PromptSample: React.FC<PromptSampleProps> = (props) => {
   return (
     <div>
       <div>{props.title}</div>
-      <div className="rounded bg-light-gray p-2 text-aws-font-color">
+      <div className="rounded bg-light-gray dark:bg-aws-ui-color-dark p-2 text-aws-font-color-light dark:text-aws-font-color-dark">
         {props.prompt.split('\n').map((s, idx) => (
           <div key={idx}>{s}</div>
         ))}
@@ -58,7 +58,7 @@ const DialogInstructionsSamples: React.FC<Props> = (props) => {
             href={t('bot.samples.anthropicLibrary.url')}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-aws-sea-blue underline hover:text-aws-sea-blue-hover">
+            className="text-aws-sea-blue-light dark:text-aws-font-color-blue underline hover:text-aws-sea-blue-hover-light dark:hover:text-aws-sea-blue-hover-dark">
             {t('bot.samples.anthropicLibrary.title')}
           </a>
         </div>
diff --git a/frontend/src/components/DialogShareBot.tsx b/frontend/src/components/DialogShareBot.tsx
index 3f56d445b..61b7f17ee 100644
--- a/frontend/src/components/DialogShareBot.tsx
+++ b/frontend/src/components/DialogShareBot.tsx
@@ -54,10 +54,10 @@ const DialogShareBot: React.FC<Props> = (props) => {
       </div>
 
       {isShared && (
-        <div className="mt-3 flex justify-between rounded border border-aws-squid-ink/50 bg-aws-paper">
+        <div className="mt-3 flex justify-between rounded border border-aws-squid-ink-light/50 dark:border-aws-squid-ink-dark/50 bg-aws-paper-light dark:bg-aws-paper-dark">
           <input
             type="text"
-            className="my-2 ml-2 w-full bg-aws-paper"
+            className="my-2 ml-2 w-full bg-aws-paper-light dark:bg-aws-paper-dark"
             readOnly
             value={url}
           />
diff --git a/frontend/src/components/DrawerItem.tsx b/frontend/src/components/DrawerItem.tsx
index 93f4569a1..46612a0f3 100644
--- a/frontend/src/components/DrawerItem.tsx
+++ b/frontend/src/components/DrawerItem.tsx
@@ -19,8 +19,8 @@ const DrawerItem: React.FC<Props> = (props) => {
       className={twMerge(
         'group mx-2 my-1 flex h-10 items-center  rounded px-2',
         props.isActive ?? true
-          ? 'bg-aws-sea-blue'
-          : 'hover:bg-aws-sea-blue-hover',
+          ? 'bg-aws-sea-blue-light dark:bg-aws-sea-blue-dark'
+          : 'hover:bg-aws-sea-blue-hover-light dark:hover:bg-aws-paper-dark',
         props.className
       )}
       to={props.to}
@@ -34,8 +34,8 @@ const DrawerItem: React.FC<Props> = (props) => {
               className={twMerge(
                 'absolute inset-y-0 right-0 w-8 bg-gradient-to-l',
                 props.isActive
-                  ? 'from-aws-sea-blue'
-                  : 'from-aws-squid-ink group-hover:from-aws-sea-blue-hover'
+                  ? 'from-aws-sea-blue-light dark:from-aws-sea-blue-dark'
+                  : 'from-aws-squid-ink-light dark:from-aws-squid-ink-dark group-hover:from-aws-sea-blue-hover-light dark:group-hover:from-aws-paper-dark'
               )}
             />
           )}
diff --git a/frontend/src/components/GenerationConfig.tsx b/frontend/src/components/GenerationConfig.tsx
index 1ad155ac1..1cc065542 100644
--- a/frontend/src/components/GenerationConfig.tsx
+++ b/frontend/src/components/GenerationConfig.tsx
@@ -36,7 +36,7 @@ const GenerationConfig: React.FC<GenerationConfigProps> = ({
   const { t } = useTranslation();
   return (
     <div>
-      <div className="text-sm text-aws-font-color/50">
+      <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
         {t('generationConfig.description')}
       </div>
       <div className="mt-2">
diff --git a/frontend/src/components/InputChatContent.tsx b/frontend/src/components/InputChatContent.tsx
index 9c89459d5..96e8456bb 100644
--- a/frontend/src/components/InputChatContent.tsx
+++ b/frontend/src/components/InputChatContent.tsx
@@ -457,7 +457,7 @@ const InputChatContent = forwardRef<HTMLElement, Props>((props, focusInputRef) =
         onDrop={onDrop}
         className={twMerge(
           props.className,
-          'relative mb-7 flex w-11/12 flex-col rounded-xl border border-black/10 bg-white shadow-[0_0_30px_7px] shadow-light-gray md:w-10/12 lg:w-4/6 xl:w-3/6'
+          'relative mb-7 flex w-11/12 flex-col rounded-xl border border-black/10 bg-white dark:bg-aws-ui-color-dark shadow-[0_0_30px_7px] shadow-light-gray dark:shadow-black/35 md:w-10/12 lg:w-4/6 xl:w-3/6'
         )}>
         <div className="flex w-full">
           <Textarea
@@ -493,14 +493,14 @@ const InputChatContent = forwardRef<HTMLElement, Props>((props, focusInputRef) =
               <div key={idx} className="relative">
                 <img
                   src={imageFile}
-                  className="h-16 rounded border border-aws-squid-ink"
+                  className="h-16 rounded border border-aws-squid-ink-light dark:border-aws-squid-ink-dark"
                   onClick={() => {
                     setPreviewImageUrl(imageFile);
                     setIsOpenPreviewImage(true);
                   }}
                 />
                 <ButtonIcon
-                  className="absolute left-0 top-0 -m-2 border border-aws-sea-blue bg-white p-1 text-xs text-aws-sea-blue"
+                  className="absolute left-0 top-0 -m-2 border border-aws-sea-blue-light dark:border-aws-sea-blue-dark bg-white p-1 text-xs text-aws-sea-blue-light dark:text-aws-sea-blue-dark"
                   onClick={() => {
                     removeBase64EncodedImage(idx);
                   }}>
@@ -529,7 +529,7 @@ const InputChatContent = forwardRef<HTMLElement, Props>((props, focusInputRef) =
               <div key={idx} className="relative flex flex-col items-center">
                 <UploadedAttachedFile fileName={file.name} />
                 <ButtonIcon
-                  className="absolute left-2 top-1 -m-2 border border-aws-sea-blue bg-white p-1 text-xs text-aws-sea-blue"
+                  className="absolute left-2 top-1 -m-2 border border-aws-sea-blue-light dark:border-aws-sea-blue-dark bg-white p-1 text-xs text-aws-sea-blue-light dark:text-aws-sea-blue-dark"
                   onClick={() => {
                     removeTextFile(idx);
                   }}>
@@ -543,7 +543,7 @@ const InputChatContent = forwardRef<HTMLElement, Props>((props, focusInputRef) =
           <div className="absolute -top-14 right-0 flex space-x-2">
             {props.canContinue && !props.disabledContinue && !props.disabled && (
               <Button
-                className="bg-aws-paper p-2 text-sm"
+                className="bg-aws-paper-light dark:bg-aws-paper-dark p-2 text-sm"
                 outlined
                 onClick={props.continueGenerate}>
                 <PiArrowFatLineRight className="mr-2" />
@@ -551,7 +551,7 @@ const InputChatContent = forwardRef<HTMLElement, Props>((props, focusInputRef) =
               </Button>
             )}
             <Button
-              className="bg-aws-paper p-2 text-sm"
+              className="bg-aws-paper-light dark:bg-aws-paper-dark p-2 text-sm"
               outlined
               disabled={props.disabledRegenerate || props.disabled}
               onClick={props.onRegenerate}>
diff --git a/frontend/src/components/InputText.tsx b/frontend/src/components/InputText.tsx
index 1ae5d4545..61081e841 100644
--- a/frontend/src/components/InputText.tsx
+++ b/frontend/src/components/InputText.tsx
@@ -19,10 +19,10 @@ const InputText: React.FC<Props> = (props) => {
       <input
         type={props.type ?? 'text'}
         className={twMerge(
-          'peer h-9 rounded border p-1',
+          'peer h-9 rounded border p-1 dark:bg-aws-ui-color-dark dark:placeholder-aws-font-color-gray',
           props.errorMessage
             ? 'border-2 border-red'
-            : 'border-aws-font-color/50 '
+            : 'border-aws-font-color-light/50 dark:border-aws-font-color-dark/50'
         )}
         disabled={props.disabled}
         value={props.value}
@@ -37,13 +37,13 @@ const InputText: React.FC<Props> = (props) => {
             'order-first text-sm peer-focus:font-semibold peer-focus:italic ',
             props.errorMessage
               ? 'font-bold text-red'
-              : 'text-dark-gray peer-focus:text-aws-font-color'
+              : 'text-dark-gray dark:text-light-gray peer-focus:text-aws-font-color-light dark:peer-focus:text-aws-font-color-dark'
           )}>
           {props.label}
         </div>
       )}
       {props.hint && !props.errorMessage && (
-        <div className="mt-0.5 text-xs text-gray">{props.hint}</div>
+        <div className="mt-0.5 text-xs text-gray dark:text-aws-font-color-dark">{props.hint}</div>
       )}
       {props.errorMessage && (
         <div className="mt-0.5 text-xs text-red ">{props.errorMessage}</div>
diff --git a/frontend/src/components/KnowledgeFileUploader.tsx b/frontend/src/components/KnowledgeFileUploader.tsx
index a7d78b4a7..cc3823540 100644
--- a/frontend/src/components/KnowledgeFileUploader.tsx
+++ b/frontend/src/components/KnowledgeFileUploader.tsx
@@ -172,7 +172,7 @@ const KnowledgeFileUploader: React.FC<Props> = (props) => {
         onDragOver={onDragOver}
         onDrop={onDrop}
         className={twMerge(
-          'flex h-full w-full flex-col items-center justify-center gap-3 rounded border-4 border-gray text-dark-gray',
+          'flex h-full w-full flex-col items-center justify-center gap-3 rounded border-4 border-gray text-dark-gray dark:text-light-gray',
           props.disabled && 'opacity-50 cursor-not-allowed',
           props.className
         )}>
@@ -205,13 +205,13 @@ const KnowledgeFileUploader: React.FC<Props> = (props) => {
               <div className="flex items-center gap-2">
                 <div className="ml-auto whitespace-nowrap">
                   {file.status === 'UPLOADING' && (
-                    <div className="text-sm text-dark-gray">
+                    <div className="text-sm text-dark-gray dark:text-light-gray">
                       {t('bot.label.fileUploadStatus.uploading')}
                       <Progress progress={file.progress ?? 0} />
                     </div>
                   )}
                   {file.status === 'UPLOADED' && (
-                    <div className="text-sm font-bold text-dark-gray">
+                    <div className="text-sm font-bold text-dark-gray dark:text-light-gray">
                       {t('bot.label.fileUploadStatus.uploaded')}
                     </div>
                   )}
diff --git a/frontend/src/components/ListItemBot.stories.tsx b/frontend/src/components/ListItemBot.stories.tsx
index 135b0bbb0..35aed77ed 100644
--- a/frontend/src/components/ListItemBot.stories.tsx
+++ b/frontend/src/components/ListItemBot.stories.tsx
@@ -74,9 +74,9 @@ export const MyBots = () => {
   const { t } = useTranslation();
   const [myBots, setMyBots] = useState(bots);
   return (
-    <div className="h-4/5 overflow-x-hidden overflow-y-scroll border-b border-gray pr-1 scrollbar-thin scrollbar-thumb-aws-font-color/20 ">
+    <div className="h-4/5 overflow-x-hidden overflow-y-scroll border-b border-gray pr-1 scrollbar-thin scrollbar-thumb-aws-font-color-light/20 dark:scrollbar-thumb-aws-font-color-dark/20">
       {myBots.length === 0 && (
-        <div className="flex size-full items-center justify-center italic text-dark-gray">
+        <div className="flex size-full items-center justify-center italic text-dark-gray dark:text-light-gray">
           {t('bot.label.noBots')}
         </div>
       )}
@@ -161,9 +161,9 @@ export const RecentlyUsedSharedBots = () => {
   const { t } = useTranslation();
   const [recentlyUsedSharedBots, setRecentlyUsedSharedBots] = useState(bots);
   return (
-    <div className="h-4/5 overflow-y-scroll border-b border-gray  pr-1 scrollbar-thin scrollbar-thumb-aws-font-color/20">
+    <div className="h-4/5 overflow-y-scroll border-b border-gray  pr-1 scrollbar-thin scrollbar-thumb-aws-font-color-light/20 dark:scrollbar-thumb-aws-font-color-dark/20">
       {recentlyUsedSharedBots.length === 0 && (
-        <div className="flex size-full items-center justify-center italic text-dark-gray">
+        <div className="flex size-full items-center justify-center italic text-dark-gray dark:text-light-gray">
           {t('bot.label.noBotsRecentlyUsed')}
         </div>
       )}
@@ -218,7 +218,7 @@ export const ApiManagement = () => {
     },
   ];
   return (
-    <div className="h-4/5 overflow-x-hidden overflow-y-scroll border-b border-gray pr-1 scrollbar-thin scrollbar-thumb-aws-font-color/20 ">
+    <div className="h-4/5 overflow-x-hidden overflow-y-scroll border-b border-gray pr-1 scrollbar-thin scrollbar-thumb-aws-font-color-light/20 dark:scrollbar-thumb-aws-font-color-dark/20">
       {botApis?.map((api, idx) => (
         <ListItemBot key={idx} bot={api} onClick={() => {}}>
           <div className="flex flex-col items-end gap-2">
@@ -277,7 +277,7 @@ export const Analytics = () => {
     },
   ];
   return (
-    <div className="h-4/5 overflow-x-hidden overflow-y-scroll border-b border-gray pr-1 scrollbar-thin scrollbar-thumb-aws-font-color/20 ">
+    <div className="h-4/5 overflow-x-hidden overflow-y-scroll border-b border-gray pr-1 scrollbar-thin scrollbar-thumb-aws-font-color-light/20 dark:scrollbar-thumb-aws-font-color-dark/20">
       {sortedBots?.map((bot, idx) => (
         <ListItemBot key={idx} bot={bot} onClick={() => {}}>
           <div className="relative flex h-full items-center">
diff --git a/frontend/src/components/ListItemBot.tsx b/frontend/src/components/ListItemBot.tsx
index d174a1b34..84911f0ed 100644
--- a/frontend/src/components/ListItemBot.tsx
+++ b/frontend/src/components/ListItemBot.tsx
@@ -22,10 +22,10 @@ const ListItemBot: React.FC<Props> = (props) => {
         props.className ?? ''
       } relative flex w-full justify-between border-b border-light-gray`}>
       <div
-        className={`h-full grow bg-aws-paper p-2 ${
+        className={`h-full grow bg-aws-paper-light dark:bg-aws-paper-dark p-2 ${
           props.bot.available
             ? 'cursor-pointer hover:brightness-90'
-            : 'text-aws-font-color/30'
+            : 'text-aws-font-color-light/30 dark:text-aws-font-color-dark/30'
         }`}
         onClick={() => {
           if (props.bot.available) {
@@ -49,8 +49,8 @@ const ListItemBot: React.FC<Props> = (props) => {
       </div>
 
       <div className="absolute right-0 flex h-full justify-between">
-        <div className="w-10 bg-gradient-to-r from-transparent to-aws-paper"></div>
-        <div className="flex items-center gap-2 bg-aws-paper pl-2">
+        <div className="w-10 bg-gradient-to-r from-transparent to-aws-paper-light dark:to-aws-paper-dark"></div>
+        <div className="flex items-center gap-2 bg-aws-paper-light dark:bg-aws-paper-dark pl-2">
           {props.children}
         </div>
       </div>
diff --git a/frontend/src/components/Menu.tsx b/frontend/src/components/Menu.tsx
index eb21df1bd..cc9275eed 100644
--- a/frontend/src/components/Menu.tsx
+++ b/frontend/src/components/Menu.tsx
@@ -44,7 +44,7 @@ const Menu: React.FC<Props> = (props) => {
     <>
       <Button
         ref={buttonRef}
-        className="relative bg-aws-squid-ink"
+        className="relative bg-aws-squid-ink-light dark:bg-aws-squid-ink-dark"
         text
         icon={<PiList />}
         onClick={() => {
@@ -56,9 +56,9 @@ const Menu: React.FC<Props> = (props) => {
       {isOpen && (
         <div
           ref={menuRef}
-          className="absolute bottom-10 left-2 w-60 rounded border border-aws-font-color-white bg-aws-sea-blue text-aws-font-color-white">
+          className="absolute bottom-10 left-2 w-60 rounded border border-aws-font-color-white-light dark:border-aws-font-color-white-dark bg-aws-sea-blue-light dark:bg-aws-ui-color-dark text-aws-font-color-white-light dark:text-aws-font-color-white-dark">
           <div
-            className="flex w-full cursor-pointer items-center p-2 hover:bg-aws-sea-blue-hover"
+            className="flex w-full cursor-pointer items-center p-2 hover:bg-aws-sea-blue-hover-light dark:hover:bg-aws-paper-dark"
             onClick={() => {
               setIsOpen(false);
               props.onSelectLanguage();
@@ -67,7 +67,7 @@ const Menu: React.FC<Props> = (props) => {
             {t('button.language')}
           </div>
           <div
-            className="flex w-full cursor-pointer items-center p-2 hover:bg-aws-sea-blue-hover"
+            className="flex w-full cursor-pointer items-center p-2 hover:bg-aws-sea-blue-hover-light dark:hover:bg-aws-paper-dark"
             onClick={() => {
               setIsOpen(false);
               props.onClearConversations();
@@ -76,7 +76,7 @@ const Menu: React.FC<Props> = (props) => {
             {t('button.clearConversation')}
           </div>
           <div
-            className="flex w-full cursor-pointer items-center border-t p-2 hover:bg-aws-sea-blue-hover"
+            className="flex w-full cursor-pointer items-center border-t p-2 hover:bg-aws-sea-blue-hover-light dark:hover:bg-aws-paper-dark"
             onClick={props.onSignOut}>
             <PiSignOut className="mr-2" />
             {t('button.signOut')}
diff --git a/frontend/src/components/ModalDialog.tsx b/frontend/src/components/ModalDialog.tsx
index dfce40d81..14d83d669 100644
--- a/frontend/src/components/ModalDialog.tsx
+++ b/frontend/src/components/ModalDialog.tsx
@@ -57,19 +57,19 @@ const ModalDialog: React.FC<Props> = (props) => {
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95">
                 <Dialog.Panel
-                  className={`rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all ${
+                  className={`rounded-2xl bg-white dark:bg-aws-paper-dark p-6 text-left align-middle shadow-xl transition-all ${
                     !props.widthFromContent && 'w-full max-w-md'
                   }`}>
                   {props.title && (
                     <Dialog.Title
                       as="h3"
-                      className="border-b pb-2 text-lg font-medium leading-6 text-aws-font-color">
+                      className="border-b pb-2 text-lg font-medium leading-6 text-aws-font-color-light dark:text-aws-font-color-white-dark">
                       {props.title}
                     </Dialog.Title>
                   )}
 
                   <div className="mt-3">
-                    <div className="text-sm text-aws-font-color/70">
+                    <div className="text-sm text-aws-font-color-light/70 dark:text-aws-font-color-dark">
                       {props.children}
                     </div>
                   </div>
diff --git a/frontend/src/components/PopoverItem.tsx b/frontend/src/components/PopoverItem.tsx
index 9375eb267..efc8d5409 100644
--- a/frontend/src/components/PopoverItem.tsx
+++ b/frontend/src/components/PopoverItem.tsx
@@ -11,7 +11,7 @@ const PopoverItem: React.FC<Props> = (props) => {
     <div
       className={`${
         props.className ?? ''
-      } flex cursor-pointer items-center gap-1 border-b border-aws-font-color/50 bg-aws-paper px-2 py-1 first:rounded-t last:rounded-b last:border-b-0 hover:brightness-75`}
+      } flex cursor-pointer items-center gap-1 border-b border-aws-font-color-light/50 dark:border-aws-font-color-dark/50 bg-aws-paper-light dark:bg-aws-paper-dark px-2 py-1 first:rounded-t last:rounded-b last:border-b-0 hover:brightness-75`}
       onClick={props.onClick}>
       {props.children}
     </div>
diff --git a/frontend/src/components/PopoverMenu.stories.tsx b/frontend/src/components/PopoverMenu.stories.tsx
index 27b8e7ccd..f97faf56c 100644
--- a/frontend/src/components/PopoverMenu.stories.tsx
+++ b/frontend/src/components/PopoverMenu.stories.tsx
@@ -15,7 +15,7 @@ export const ChatHeader = () => {
   const { t } = useTranslation();
   const [isPinned, togglePinned] = useReducer(current => !current, true);
   return (
-    <div className="flex items-center bg-aws-paper">
+    <div className="flex items-center bg-aws-paper-light dark:bg-aws-paper-dark">
       <StatusSyncBot
         syncStatus='SUCCEEDED'
         onClickError={() => {}}
diff --git a/frontend/src/components/PopoverMenu.tsx b/frontend/src/components/PopoverMenu.tsx
index 8ba992d9d..d01ce470c 100644
--- a/frontend/src/components/PopoverMenu.tsx
+++ b/frontend/src/components/PopoverMenu.tsx
@@ -25,7 +25,7 @@ const PopoverMenu: React.FC<Props> = (props) => {
           <Popover.Button
             className={`${
               props.className ?? ''
-            } group inline-flex items-center rounded-lg border border-aws-squid-ink/50 bg-aws-paper p-1 px-3 text-base hover:brightness-75`}>
+            } group inline-flex items-center rounded-lg border border-aws-squid-ink-light/50 dark:border-aws-font-color-gray/50 bg-aws-paper-light dark:bg-aws-paper-dark p-1 px-3 text-base hover:brightness-75`}>
             <PiDotsThreeOutlineFill />
           </Popover.Button>
           <Transition
@@ -38,7 +38,7 @@ const PopoverMenu: React.FC<Props> = (props) => {
             leaveTo="opacity-0 translate-y-1">
             <Popover.Panel className={`absolute z-10 ${origin}`}>
               <div className="mt-0.5 overflow-hidden shadow-lg">
-                <div className="flex flex-col whitespace-nowrap rounded border border-aws-font-color/50 bg-aws-paper text-sm">
+                <div className="flex flex-col whitespace-nowrap rounded border border-aws-font-color-light/50 dark:border-aws-font-color-dark/50 bg-aws-paper-light dark:bg-aws-paper-dark text-sm">
                   {props.children}
                 </div>
               </div>
diff --git a/frontend/src/components/RadioButton.tsx b/frontend/src/components/RadioButton.tsx
index 35a12be76..76958d187 100644
--- a/frontend/src/components/RadioButton.tsx
+++ b/frontend/src/components/RadioButton.tsx
@@ -16,9 +16,9 @@ type Props = BaseProps & {
 };
 
 const variantStyles: Record<RadioButtonVariant, string> = {
-  default: 'border-aws-font-color/50 after:bg-aws-sea-blue',
-  outlined: 'border-gray-300 after:bg-aws-sea-blue',
-  colored: 'border-aws-sea-blue after:bg-aws-sea-blue',
+  default: 'border-aws-font-color-light/50 dark:border-aws-font-color-dark/50 after:bg-aws-sea-blue-light dark:after:bg-aws-sea-blue-dark',
+  outlined: 'border-gray-300 after:bg-aws-sea-blue-light dark:after:bg-aws-sea-blue-dark',
+  colored: 'border-aws-sea-blue-light dark:border-aws-sea-blue-dark after:bg-aws-sea-blue-light dark:after:bg-aws-sea-blue-dark',
 };
 
 const RadioButton: React.FC<Props> = ({
@@ -62,7 +62,7 @@ const RadioButton: React.FC<Props> = ({
               'after:absolute after:left-1/2 after:top-1/2 after:h-3 after:w-3 after:rounded-full after:-translate-x-1/2 after:-translate-y-1/2',
               'after:transition-all after:content-[""]',
               variantStyles[variant],
-              'peer-checked:border-aws-sea-blue peer-checked:after:opacity-100',
+              'dark:bg-aws-ui-color-dark peer-checked:border-aws-sea-blue-light dark:after:bg-white dark:peer-checked:border-white peer-checked:after:opacity-100',
               'after:opacity-0',
               disabled ? 'opacity-30' : 'hover:brightness-90'
             )}
diff --git a/frontend/src/components/RelatedDocumentViewer.tsx b/frontend/src/components/RelatedDocumentViewer.tsx
index 2eacdcd57..d11745c2e 100644
--- a/frontend/src/components/RelatedDocumentViewer.tsx
+++ b/frontend/src/components/RelatedDocumentViewer.tsx
@@ -25,10 +25,10 @@ const RelatedDocumentViewer: React.FC<{
 
   return (
     <div
-      className="fixed left-0 top-0 z-50 flex h-dvh w-dvw items-center justify-center bg-aws-squid-ink/20 transition duration-1000"
+      className="fixed left-0 top-0 z-50 flex h-dvh w-dvw items-center justify-center bg-aws-squid-ink-light/20 dark:bg-aws-squid-ink-dark/20 transition duration-1000"
       onClick={props.onClick}>
       <div
-        className="max-h-[80vh] w-[70vw] max-w-[800px] overflow-y-auto rounded border bg-aws-squid-ink p-1 text-sm text-aws-font-color-white"
+        className="max-h-[80vh] w-[70vw] max-w-[800px] overflow-y-auto rounded border bg-aws-squid-ink-light dark:bg-aws-squid-ink-dark p-1 text-sm text-aws-font-color-white-light dark:text-aws-font-color-white-dark"
         onClick={(e) => {
           e.stopPropagation();
         }}>
diff --git a/frontend/src/components/Select.tsx b/frontend/src/components/Select.tsx
index df3997405..1860ed39b 100644
--- a/frontend/src/components/Select.tsx
+++ b/frontend/src/components/Select.tsx
@@ -41,8 +41,8 @@ const Select: React.FC<Props> = (props) => {
         <div className={twMerge('relative')}>
           <Listbox.Button
             className={twMerge(
-              'relative h-9 w-full cursor-default rounded border border-aws-font-color/50 py-1 pl-3 pr-10 text-left focus:outline-none',
-              !props.disabled && 'bg-white'
+              'relative h-9 w-full cursor-default rounded border border-aws-font-color-light/50 dark:border-aws-font-color-dark/50 py-1 pl-3 pr-10 text-left focus:outline-none',
+              !props.disabled && 'bg-white dark:bg-aws-ui-color-dark'
             )}>
             <span className="block truncate">{selectedLabel}</span>
 
@@ -62,7 +62,7 @@ const Select: React.FC<Props> = (props) => {
             leave="transition ease-in duration-100"
             leaveFrom="opacity-100"
             leaveTo="opacity-0">
-            <Listbox.Options className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
+            <Listbox.Options className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-aws-ui-color-dark py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
               {props.options.map((option, idx) => (
                 <Listbox.Option
                   key={idx}
@@ -70,7 +70,7 @@ const Select: React.FC<Props> = (props) => {
                     `relative cursor-default select-none py-2 pl-10 pr-4 ${
                       active
                         ? 'bg-aws-smile/10 text-aws-smile'
-                        : 'text-aws-font-color'
+                        : 'text-aws-font-color-light dark:text-aws-font-color-dark'
                     }`
                   }
                   value={option.value}>
@@ -82,7 +82,7 @@ const Select: React.FC<Props> = (props) => {
                         }`}>
                         <span className="flex-1">{option.label}</span>
                         {option.description && (
-                          <span className="flex-1 whitespace-pre-wrap text-aws-font-color/60">
+                          <span className="flex-1 whitespace-pre-wrap text-aws-font-color-light/60 dark:text-aws-font-color-dark/60">
                             {option.description}
                           </span>
                         )}
diff --git a/frontend/src/components/Skeleton.tsx b/frontend/src/components/Skeleton.tsx
index 977936d6a..d0a684f5a 100644
--- a/frontend/src/components/Skeleton.tsx
+++ b/frontend/src/components/Skeleton.tsx
@@ -8,7 +8,7 @@ const Skeleton: React.FC<Props> = (props) => {
   return (
     <div
       className={twMerge(
-        `h-4 w-2/3 animate-pulse rounded bg-aws-font-color/20`,
+        `h-4 w-2/3 animate-pulse rounded bg-aws-font-color-light/20 dark:bg-aws-font-color-dark/20`,
         props.className
       )}></div>
   );
diff --git a/frontend/src/components/Slider.tsx b/frontend/src/components/Slider.tsx
index bedafd178..72fdef6ab 100644
--- a/frontend/src/components/Slider.tsx
+++ b/frontend/src/components/Slider.tsx
@@ -39,7 +39,7 @@ export const Slider: FC<Props> = (props) => {
     <div className="flex flex-col">
       <label
         className={twMerge(
-          'text-sm text-dark-gray',
+          'text-sm text-dark-gray dark:text-light-gray',
           props.errorMessage && 'border-red text-red'
         )}>
         {props.label}
@@ -47,7 +47,7 @@ export const Slider: FC<Props> = (props) => {
       <div className="flex gap-2">
         <input
           className={twMerge(
-            'w-full cursor-pointer',
+            'w-full cursor-pointer dark:accent-white',
             props.disabled && 'cursor-default'
           )}
           type="range"
@@ -63,7 +63,7 @@ export const Slider: FC<Props> = (props) => {
             'peer h-9 w-16 rounded border p-1 text-center',
             props.errorMessage
               ? 'border-2 border-red'
-              : 'border-aws-font-color/50 '
+              : 'dark:bg-aws-ui-color-dark border-aws-font-color-light/50 dark:border-aws-font-color-dark'
           )}
           value={value}
           max={props.range.max}
@@ -73,7 +73,7 @@ export const Slider: FC<Props> = (props) => {
         />
       </div>
       {props.hint && !props.errorMessage && (
-        <span className={'mt-0.5 text-xs text-gray'}>{props.hint}</span>
+        <span className={'mt-0.5 text-xs text-gray dark:text-aws-font-color-gray'}>{props.hint}</span>
       )}
       {props.errorMessage && (
         <div className="mt-0.5 text-xs text-red">{props.errorMessage}</div>
diff --git a/frontend/src/components/StatusSyncBot.tsx b/frontend/src/components/StatusSyncBot.tsx
index 23cdd664c..5680a4689 100644
--- a/frontend/src/components/StatusSyncBot.tsx
+++ b/frontend/src/components/StatusSyncBot.tsx
@@ -22,7 +22,7 @@ const StatusSyncBot: React.FC<Props> = (props) => {
       <div>
         {(props.syncStatus === SyncStatus.QUEUED ||
           props.syncStatus === SyncStatus.RUNNING) && (
-          <PiSpinnerBold className="animate-spin text-aws-squid-ink" />
+          <PiSpinnerBold className="animate-spin text-aws-squid-ink-light dark:text-aws-squid-ink-dark" />
         )}
         {props.syncStatus === SyncStatus.SUCCEEDED && (
           <PiCheckCircleBold className="text-aws-aqua" />
@@ -32,7 +32,7 @@ const StatusSyncBot: React.FC<Props> = (props) => {
         )}
       </div>
 
-      <div className="whitespace-nowrap text-sm text-dark-gray">
+      <div className="whitespace-nowrap text-sm text-dark-gray dark:text-light-gray">
         {props.syncStatus === SyncStatus.QUEUED && (
           <>{t('bot.label.syncStatus.queue')}</>
         )}
@@ -46,7 +46,7 @@ const StatusSyncBot: React.FC<Props> = (props) => {
           <>
             {props.onClickError ? (
               <a
-                className="flex cursor-pointer items-center gap-0.5 border-b font-semibold text-aws-sea-blue hover:font-bold"
+                className="flex cursor-pointer items-center gap-0.5 border-b font-semibold text-aws-sea-blue-light dark:text-aws-sea-blue-dark hover:font-bold"
                 onClick={props.onClickError}>
                 {t('bot.label.syncStatus.fail')}
               </a>
diff --git a/frontend/src/components/SwitchBedrockModel.tsx b/frontend/src/components/SwitchBedrockModel.tsx
index 51f21d441..bcd6ec311 100644
--- a/frontend/src/components/SwitchBedrockModel.tsx
+++ b/frontend/src/components/SwitchBedrockModel.tsx
@@ -46,8 +46,8 @@ const SwitchBedrockModel: React.FC<Props> = (props) => {
             <Popover.Button
               className={`${
                 props.className ?? ''
-              } group inline-flex w-auto whitespace-nowrap rounded border-aws-squid-ink/50 bg-aws-paper p-2 px-3 text-base hover:brightness-75`}>
-              <div className="flex items-center justify-between text-xl font-bold text-dark-gray">
+              } group inline-flex w-auto whitespace-nowrap rounded border-aws-squid-ink-light/50 dark:border-aws-squid-ink-dark/50 bg-aws-paper-light dark:bg-aws-paper-dark p-2 px-3 text-base hover:brightness-75`}>
+              <div className="flex items-center justify-between text-xl font-bold text-dark-gray dark:text-light-gray">
                 <span>{modelName}</span>
                 <PiCaretDown className="ml-2" />
               </div>
@@ -62,11 +62,11 @@ const SwitchBedrockModel: React.FC<Props> = (props) => {
               leaveTo="opacity-0 translate-y-1">
               <Popover.Panel className="absolute left-0 top-14 z-10 w-96">
                 <div className="mt-0.5 overflow-hidden shadow-lg">
-                  <div className="flex flex-col whitespace-nowrap rounded border border-aws-font-color/50 bg-white text-sm">
+                  <div className="flex flex-col whitespace-nowrap rounded border border-aws-font-color-light/50 dark:border-aws-font-color-dark/50 bg-white dark:bg-aws-ui-color-dark text-sm">
                     {availableModels.map((model) => (
                       <div
                         key={model.modelId}
-                        className="m-1 flex cursor-pointer rounded p-1 px-2 hover:bg-light-gray"
+                        className="m-1 flex cursor-pointer rounded p-1 px-2 hover:bg-light-gray dark:hover:bg-aws-paper-dark"
                         onClick={() => {
                           setModelId(model.modelId);
                         }}>
@@ -84,7 +84,7 @@ const SwitchBedrockModel: React.FC<Props> = (props) => {
                             <span>{model.label}</span>
                           </div>
                           {model.description && (
-                            <div className="block whitespace-normal text-left text-xs text-dark-gray">
+                            <div className="block whitespace-normal text-left text-xs text-dark-gray dark:text-aws-font-color-dark">
                               <span>{model.description}</span>
                             </div>
                           )}
diff --git a/frontend/src/components/Textarea.tsx b/frontend/src/components/Textarea.tsx
index 89a98fb03..534c8c316 100644
--- a/frontend/src/components/Textarea.tsx
+++ b/frontend/src/components/Textarea.tsx
@@ -49,9 +49,9 @@ const Textarea = forwardRef<HTMLElement, Props>((props, focusInputRef) => {
           }
         }}
         className={twMerge(
-          'peer w-full resize-none rounded p-1.5 outline-none',
+          'peer w-full resize-none rounded p-1.5 outline-none dark:bg-aws-ui-color-dark dark:placeholder-aws-font-color-gray',
           isMax ? 'overflow-y-auto' : 'overflow-hidden',
-          props.noBorder ? '' : 'border border-aws-font-color/50',
+          props.noBorder ? '' : 'border border-aws-font-color-light/50 dark:border-aws-font-color-dark/50',
           props.className
         )}
         rows={props.rows ?? 1}
@@ -63,12 +63,12 @@ const Textarea = forwardRef<HTMLElement, Props>((props, focusInputRef) => {
         }}
       />
       {props.label && (
-        <div className="order-first text-sm text-dark-gray peer-focus:font-semibold peer-focus:italic peer-focus:text-aws-font-color">
+        <div className="order-first text-sm text-dark-gray dark:text-light-gray peer-focus:font-semibold peer-focus:italic peer-focus:text-aws-font-color-light dark:peer-focus:text-aws-font-color-dark">
           {props.label}
         </div>
       )}
       {props.hint && (
-        <div className="mt-0.5 text-xs text-gray">{props.hint}</div>
+        <div className="mt-0.5 text-xs text-gray dark:text-aws-font-color-dark">{props.hint}</div>
       )}
     </div>
   );
diff --git a/frontend/src/components/Toggle.tsx b/frontend/src/components/Toggle.tsx
index 85cd6335a..e6568e596 100644
--- a/frontend/src/components/Toggle.tsx
+++ b/frontend/src/components/Toggle.tsx
@@ -29,7 +29,7 @@ const Toggle: React.FC<Props> = (props) => {
         />
         <div
           className={twMerge(
-            "peer h-6 w-11 rounded-full bg-light-gray after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray after:bg-white after:transition-all after:content-[''] peer-checked:bg-aws-sea-blue peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full",
+            "peer h-6 w-11 rounded-full bg-light-gray dark:bg-aws-font-color-gray after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray after:bg-white dark:after:bg-aws-ui-color-dark after:transition-all after:content-[''] peer-checked:bg-aws-sea-blue-light dark:peer-checked:bg-white peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full",
             props.disabled ? 'opacity-20' : ''
           )}></div>
         {props.label && (
@@ -39,7 +39,7 @@ const Toggle: React.FC<Props> = (props) => {
         )}
       </label>
       {props.hint && (
-        <div className="ml-11 w-full pl-2 text-xs text-gray">{props.hint}</div>
+        <div className="ml-11 w-full pl-2 text-xs text-gray dark:text-aws-font-color-dark">{props.hint}</div>
       )}
     </div>
   );
diff --git a/frontend/src/components/UploadedAttachedFile.tsx b/frontend/src/components/UploadedAttachedFile.tsx
index 2dafaacbf..10e8a0e98 100644
--- a/frontend/src/components/UploadedAttachedFile.tsx
+++ b/frontend/src/components/UploadedAttachedFile.tsx
@@ -41,19 +41,19 @@ const UploadedFileText: React.FC<Props> = (props) => {
       )}
       onClick={() => onClick()}>
       <div className="flex w-full ">
-        <div className="w-full rounded-tl-lg border-l border-t border-gray bg-aws-paper "></div>
+        <div className="w-full rounded-tl-lg border-l border-t border-gray bg-aws-paper-light dark:bg-aws-paper-dark "></div>
         <svg
           viewBox="0 0 16 16"
           xmlns="http://www.w3.org/2000/svg"
           className="block size-4 shrink-0 drop-shadow">
           <path
             d="M0 0L16 16H0V0Z"
-            className="fill-aws-paper stroke-gray"
+            className="fill-aws-paper-light dark:fill-aws-paper-dark stroke-gray"
             strokeWidth="0.5"></path>
         </svg>
       </div>
-      <div className="flex h-20 items-center justify-center rounded-b-lg border-x border-b border-gray bg-aws-paper p-2 ">
-        <div className="w-16 break-words text-center text-xs font-bold text-dark-gray">
+      <div className="flex h-20 items-center justify-center rounded-b-lg border-x border-b border-gray bg-aws-paper-light dark:bg-aws-paper-dark p-2 ">
+        <div className="w-16 break-words text-center text-xs font-bold text-dark-gray dark:text-light-gray">
           {shortFileName}
         </div>
       </div>
diff --git a/frontend/src/features/agent/components/AgentToolList.tsx b/frontend/src/features/agent/components/AgentToolList.tsx
index f373a1e41..7ef5161d0 100644
--- a/frontend/src/features/agent/components/AgentToolList.tsx
+++ b/frontend/src/features/agent/components/AgentToolList.tsx
@@ -19,7 +19,7 @@ const AgentToolList: React.FC<AgentToolListProps> = ({messageId, tools, relatedD
     Object.values(tools.tools).some(tool => tool.status === 'running')
   );
   return (
-    <div className="mx-auto flex w-full max-w-5xl flex-col rounded border border-gray bg-aws-paper text-aws-font-color/80">
+    <div className="mx-auto flex w-full max-w-5xl flex-col rounded border border-gray bg-aws-paper-light dark:bg-aws-paper-dark text-aws-font-color-light/80 dark:text-aws-font-color-dark/80">
       {(isRunning || tools.thought) && (
         <div className="flex items-center border-b border-gray p-2 last:border-b-0">
           {isRunning && <PiCircleNotchBold className="mr-2 animate-spin" />}
diff --git a/frontend/src/features/agent/components/AvailableTools.tsx b/frontend/src/features/agent/components/AvailableTools.tsx
index 286d93f7b..47604c896 100644
--- a/frontend/src/features/agent/components/AvailableTools.tsx
+++ b/frontend/src/features/agent/components/AvailableTools.tsx
@@ -32,7 +32,7 @@ export const AvailableTools = ({ availableTools, tools, setTools }: Props) => {
         <Help direction={TooltipDirection.RIGHT} message={t('agent.hint')} />
       </div>
 
-      <div className="text-sm text-aws-font-color/50">
+      <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
         {t('agent.help.overview')}
       </div>
       {availableTools === undefined && <Skeleton className="h-12 w-full" />}
@@ -43,7 +43,7 @@ export const AvailableTools = ({ availableTools, tools, setTools }: Props) => {
             value={!!tools?.map(({ name }) => name).includes(tool.name)}
             onChange={handleChangeTool(tool)}
           />
-          <div className="whitespace-pre-wrap text-sm text-aws-font-color/50">
+          <div className="whitespace-pre-wrap text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
             {formatDescription(tool, t)}
           </div>
         </div>
diff --git a/frontend/src/features/agent/components/ToolCard.tsx b/frontend/src/features/agent/components/ToolCard.tsx
index db7321b38..34af8b94e 100644
--- a/frontend/src/features/agent/components/ToolCard.tsx
+++ b/frontend/src/features/agent/components/ToolCard.tsx
@@ -288,7 +288,7 @@ const ToolCard: React.FC<ToolCardProps> = ({
                 {displayDocuments.length == 1 && (
                   <div className="flex items-center space-x-2">
                     <a
-                      className="flex items-center cursor-pointer text-aws-sea-blue hover:text-aws-sea-blue-hover"
+                      className="flex items-center cursor-pointer text-aws-sea-blue-light dark:text-aws-sea-blue-dark hover:text-aws-sea-blue-hover-light dark:hover:text-aws-sea-blue-hover-dark"
                       onClick={() => setViewingRelatedDocument(displayDocuments[0])}
                     >
                       <PiLinkBold />
@@ -301,7 +301,7 @@ const ToolCard: React.FC<ToolCardProps> = ({
                 {displayDocuments.length > 1 && displayDocuments.map((document, index) => (
                   <div key={document.sourceId} className="flex items-center space-x-2">
                     <a
-                      className="flex items-center cursor-pointer text-aws-sea-blue hover:text-aws-sea-blue-hover"
+                      className="flex items-center cursor-pointer text-aws-sea-blue-light dark:text-aws-sea-blue-dark hover:text-aws-sea-blue-hover-light dark:hover:text-aws-sea-blue-hover-dark"
                       onClick={() => setViewingRelatedDocument(document)}
                     >
                       <div>{`[${index + 1}]`}</div>
diff --git a/frontend/src/features/knowledgeBase/pages/BotKbEditPage.tsx b/frontend/src/features/knowledgeBase/pages/BotKbEditPage.tsx
index af2558cc4..1bba700b2 100644
--- a/frontend/src/features/knowledgeBase/pages/BotKbEditPage.tsx
+++ b/frontend/src/features/knowledgeBase/pages/BotKbEditPage.tsx
@@ -1451,7 +1451,7 @@ const BotKbEditPage: React.FC = () => {
                   </div>
                 </div>
 
-                <div className="text-sm text-aws-font-color/50">
+                <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                   {t('bot.help.knowledge.overview')}
                 </div>
 
@@ -1475,7 +1475,7 @@ const BotKbEditPage: React.FC = () => {
                 {(() => {
                   if (knowledgeBaseType === 'existing') {
                     return (
-                      <div className="mt-3 p-4 border border-aws-font-color/30 rounded-lg">
+                      <div className="mt-3 p-4 border border-aws-font-color-light/30 dark:border-aws-font-color-dark/30 rounded-lg">
                         <InputText
                           label={t('knowledgeBaseSettings.advancedConfigration.existKnowledgeBaseId.label')}
                           value={existKnowledgeBaseId ?? ''}
@@ -1483,7 +1483,7 @@ const BotKbEditPage: React.FC = () => {
                           disabled={!isNewBot}
                           placeholder='ABCDEFGHIJ'
                         />
-                        <div className="text-sm text-aws-font-color/50">
+                        <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                           {t('knowledgeBaseSettings.advancedConfigration.existKnowledgeBaseId.description')}
                         </div>
                       </div>
@@ -1506,10 +1506,10 @@ const BotKbEditPage: React.FC = () => {
 
               if (knowledgeBaseType === 'new') {
                 return (
-                  <div className="mt-3 p-4 border border-aws-font-color/30 rounded-lg">
+                  <div className="mt-3 p-4 border border-aws-font-color-light/30 dark:border-aws-font-color-dark/30 rounded-lg">
                     <div className="mt-3">
                       <div className="font-semibold">{t('bot.label.file')}</div>
-                      <div className="text-sm text-aws-font-color/50">
+                      <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                         {t('bot.help.knowledge.file')}
                       </div>
                       <div className="mt-2 flex w-full flex-col gap-1">
@@ -1527,7 +1527,7 @@ const BotKbEditPage: React.FC = () => {
 
                     <div className="mt-4">
                       <div className="font-semibold">{t('bot.label.s3url')}</div>
-                      <div className="text-sm text-aws-font-color/50">
+                      <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                         {t('bot.help.knowledge.s3url')}
                       </div>
                       <div className="mt-2 flex w-full flex-col gap-1">
@@ -1568,7 +1568,7 @@ const BotKbEditPage: React.FC = () => {
 
                     <div className="mt-4">
                       <div className="font-semibold">{t('bot.label.url')}</div>
-                      <div className="text-sm text-aws-font-color/50">
+                      <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                         {t('bot.help.knowledge.url')}
                       </div>
                       <div className="mt-2 flex w-full flex-col gap-1">
@@ -1628,7 +1628,7 @@ const BotKbEditPage: React.FC = () => {
                               'knowledgeBaseSettings.webCrawlerConfig.includePatterns.label'
                             )}
                           </div>
-                          <div className="text-sm text-aws-font-color/50">
+                          <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                             {t(
                               'knowledgeBaseSettings.webCrawlerConfig.includePatterns.hint'
                             )}
@@ -1680,7 +1680,7 @@ const BotKbEditPage: React.FC = () => {
                               'knowledgeBaseSettings.webCrawlerConfig.excludePatterns.label'
                             )}
                           </div>
-                          <div className="text-sm text-aws-font-color/50">
+                          <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                             {t(
                               'knowledgeBaseSettings.webCrawlerConfig.excludePatterns.hint'
                             )}
@@ -1741,7 +1741,7 @@ const BotKbEditPage: React.FC = () => {
                       value={displayRetrievedChunks}
                       onChange={setDisplayRetrievedChunks}
                     />
-                    <div className="whitespace-pre-wrap text-sm text-aws-font-color/50">
+                    <div className="whitespace-pre-wrap text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                       {t('bot.help.knowledge.citeRetrievedContexts')}
                     </div>
                   </div>
@@ -1755,7 +1755,7 @@ const BotKbEditPage: React.FC = () => {
                   </div>
                 </div>
 
-                <div className="text-sm text-aws-font-color/50">
+                <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                   {t('bot.help.quickStarter.overview')}
                 </div>
 
@@ -1764,7 +1764,7 @@ const BotKbEditPage: React.FC = () => {
                     {conversationQuickStarters.map(
                       (conversationQuickStarter, idx) => (
                         <div
-                          className="flex w-full flex-col gap-2 rounded border border-aws-font-color/50 p-2"
+                          className="flex w-full flex-col gap-2 rounded border border-aws-font-color-light/50 dark:border-aws-font-color-dark/50 p-2"
                           key={idx}>
                           <InputText
                             className="w-full"
@@ -1858,7 +1858,7 @@ const BotKbEditPage: React.FC = () => {
                 isDefaultShow={false}
                 label={t('knowledgeBaseSettings.title')}
                 className="py-2">
-                <div className="text-sm text-aws-font-color/50">
+                <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                   {t('knowledgeBaseSettings.description')}
                 </div>
 
@@ -1884,7 +1884,7 @@ const BotKbEditPage: React.FC = () => {
                     }}
                     disabled={!isNewBot}
                   />
-                  <div className="text-sm text-aws-font-color/50">
+                  <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                     {t('knowledgeBaseSettings.advancedParsing.hint')}
                   </div>
                 </div>
@@ -2202,7 +2202,7 @@ const BotKbEditPage: React.FC = () => {
                       }}
                       className="mt-2"
                     />
-                    <div className="text-sm text-aws-font-color/50">
+                    <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                       {t('knowledgeBaseSettings.opensearchAnalyzer.hint')}
                     </div>
                   </div>
@@ -2212,12 +2212,12 @@ const BotKbEditPage: React.FC = () => {
                     <div className="text-sm">
                       {t('knowledgeBaseSettings.opensearchAnalyzer.label')}
                     </div>
-                    <div className="text-sm text-aws-font-color/50">
+                    <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                       {t('knowledgeBaseSettings.opensearchAnalyzer.hint')}
                     </div>
                     <div
                       className="grid grid-cols-[auto_1fr] gap-2 rounded 
-                      border border-aws-font-color/50 p-4 text-sm">
+                      border border-aws-font-color-light/50 dark:border-aws-font-color-dark/50 p-4 text-sm">
                       <div>
                         {t(
                           'knowledgeBaseSettings.opensearchAnalyzer.tokenizer'
@@ -2260,7 +2260,7 @@ const BotKbEditPage: React.FC = () => {
                 isDefaultShow={false}
                 label={t('searchSettings.title')}
                 className="py-2">
-                <div className="text-sm text-aws-font-color/50">
+                <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                   {t('searchSettings.description')}
                 </div>
                 <div className="mt-3">
@@ -2443,7 +2443,7 @@ const BotKbEditPage: React.FC = () => {
                 isDefaultShow={false}
                 label={t('bot.activeModels.title')}
                 className="py-2">
-                <div className="text-sm text-aws-font-color/50">
+                <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                   {t('bot.activeModels.description')}
                 </div>
 
@@ -2461,7 +2461,7 @@ const BotKbEditPage: React.FC = () => {
                         />
                         <div>
                           <div>{label}</div>
-                          <div className="text-sm text-dark-gray">{description}</div>
+                          <div className="text-sm text-dark-gray dark:text-light-gray">{description}</div>
                         </div>
                       </div>
                     ))}
diff --git a/frontend/src/pages/AdminApiManagementPage.tsx b/frontend/src/pages/AdminApiManagementPage.tsx
index 6f1291bea..9c0400ab8 100644
--- a/frontend/src/pages/AdminApiManagementPage.tsx
+++ b/frontend/src/pages/AdminApiManagementPage.tsx
@@ -36,7 +36,7 @@ const AdminApiManagementPage: React.FC = () => {
 
             <div className="mt-2 border-b border-gray"></div>
 
-            <div className="h-4/5 overflow-x-hidden overflow-y-scroll border-b border-gray pr-1 scrollbar-thin scrollbar-thumb-aws-font-color/20 ">
+            <div className="h-4/5 overflow-x-hidden overflow-y-scroll border-b border-gray pr-1 scrollbar-thin scrollbar-thumb-aws-font-color-light/20 dark:scrollbar-thumb-aws-font-color-dark/20">
               {isLoadingApis && (
                 <div className="flex flex-col gap-2">
                   {new Array(15).fill('').map((_, idx) => {
@@ -46,7 +46,7 @@ const AdminApiManagementPage: React.FC = () => {
               )}
 
               {botApis?.length === 0 && (
-                <div className="flex size-full items-center justify-center italic text-dark-gray">
+                <div className="flex size-full items-center justify-center italic text-dark-gray dark:text-light-gray">
                   {t('admin.apiManagement.label.noApi')}
                 </div>
               )}
diff --git a/frontend/src/pages/AdminBotManagementPage.tsx b/frontend/src/pages/AdminBotManagementPage.tsx
index 8288f1ce9..af3ba2542 100644
--- a/frontend/src/pages/AdminBotManagementPage.tsx
+++ b/frontend/src/pages/AdminBotManagementPage.tsx
@@ -116,19 +116,19 @@ const AdminBotManagementPage: React.FC = () => {
                 <div className="mt-3 flex flex-col gap-1">
                   <div className="text-lg font-bold">{bot?.title}</div>
                   {bot?.description ? (
-                    <div className="text-sm text-aws-font-color/50">
+                    <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                       {bot?.description}
                     </div>
                   ) : (
-                    <div className="text-sm font-light italic text-aws-font-color/50">
+                    <div className="text-sm font-light italic text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                       {t('bot.label.noDescription')}
                     </div>
                   )}
 
-                  <div className="flex items-center text-sm text-dark-gray">
+                  <div className="flex items-center text-sm text-dark-gray dark:text-light-gray">
                     {t('admin.botManagement.label.sharedUrl')}:
                     <div
-                      className="flex cursor-pointer items-center text-aws-sea-blue underline hover:text-aws-sea-blue-hover"
+                      className="flex cursor-pointer items-center text-aws-sea-blue-light dark:text-aws-sea-blue-dark underline hover:text-aws-sea-blue-hover-light dark:hover:text-aws-sea-blue-hover-dark"
                       onClick={() => {
                         window.open(getBotUrl(bot?.id ?? ''), '_blank');
                       }}>
@@ -152,14 +152,14 @@ const AdminBotManagementPage: React.FC = () => {
                     {t('bot.label.knowledge')}
                   </div>
                   {!hasSourceUrls && !hasS3Urls && !hasFiles && (
-                    <div className="italic text-dark-gray">
+                    <div className="italic text-dark-gray dark:text-light-gray">
                       {t('admin.botManagement.label.noKnowledge')}
                     </div>
                   )}
 
                   {hasSourceUrls && (
                     <div>
-                      <div className="text-sm text-dark-gray">
+                      <div className="text-sm text-dark-gray dark:text-light-gray">
                         {t('bot.label.url')}
                       </div>
                       <div className="flex w-full flex-col gap-1">
@@ -172,7 +172,7 @@ const AdminBotManagementPage: React.FC = () => {
                               value={url}
                             />
                             <ButtonIcon
-                              className="text-aws-sea-blue"
+                              className="text-aws-sea-blue-light dark:text-aws-sea-blue-dark"
                               onClick={() => {
                                 window.open(url, '_blank');
                               }}>
@@ -186,7 +186,7 @@ const AdminBotManagementPage: React.FC = () => {
 
                   {hasFiles && (
                     <div>
-                      <div className="text-sm text-dark-gray">
+                      <div className="text-sm text-dark-gray dark:text-light-gray">
                         {t('bot.label.file')}
                       </div>
                       <div className="flex w-full flex-col gap-1">
@@ -208,7 +208,7 @@ const AdminBotManagementPage: React.FC = () => {
 
                   {hasS3Urls && (
                     <div>
-                      <div className="text-sm text-dark-gray">
+                      <div className="text-sm text-dark-gray dark:text-light-gray">
                         {t('bot.label.s3url')}
                       </div>
                       <div className="flex w-full flex-col gap-1">
@@ -244,7 +244,7 @@ const AdminBotManagementPage: React.FC = () => {
                 </div>
 
                 {!botPublication && (
-                  <div className="italic text-dark-gray">
+                  <div className="italic text-dark-gray dark:text-light-gray">
                     {t('admin.botManagement.label.notPublishApi')}
                   </div>
                 )}
@@ -290,7 +290,7 @@ const AdminBotManagementPage: React.FC = () => {
                       <div className="text-base font-bold">
                         {t('bot.apiSettings.label.apiKeys')}
                       </div>
-                      <div className="text-sm text-aws-font-color/50">
+                      <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                         {t('bot.apiSettings.help.apiKeys')}
                       </div>
 
@@ -319,11 +319,11 @@ const AdminBotManagementPage: React.FC = () => {
                       <div className="text-base font-bold">
                         {t('bot.apiSettings.label.usagePlan')}
                       </div>
-                      <div className="text-sm text-aws-font-color/50">
+                      <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                         {t('bot.apiSettings.help.usagePlan')}
                       </div>
 
-                      <div className="mt-1 rounded border border-aws-font-color/50 p-2">
+                      <div className="mt-1 rounded border border-aws-font-color-light/50 dark:border-aws-font-color-dark/50 p-2">
                         <div className="flex text-sm">
                           {t('bot.apiSettings.item.throttling')}:
                           <div className="ml-1 font-bold">
@@ -360,7 +360,7 @@ const AdminBotManagementPage: React.FC = () => {
                           </ul>
                         )}
 
-                        <div className="my-2 border-t border-aws-font-color/50"></div>
+                        <div className="my-2 border-t border-aws-font-color-light/50 dark:border-aws-font-color-dark/50"></div>
 
                         <div className="flex text-sm">
                           {t('bot.apiSettings.item.quota')}:
@@ -395,7 +395,7 @@ const AdminBotManagementPage: React.FC = () => {
                         <div className="text-base font-bold">
                           {t('bot.apiSettings.label.allowOrigins')}
                         </div>
-                        <div className="text-sm text-aws-font-color/50">
+                        <div className="text-sm text-aws-font-color-light/50 dark:border-aws-font-color-dark/50">
                           <div>{t('bot.apiSettings.help.allowOrigins')}</div>
                         </div>
                       </div>
@@ -410,7 +410,7 @@ const AdminBotManagementPage: React.FC = () => {
                               value={url}
                             />
                             <ButtonIcon
-                              className="text-aws-sea-blue"
+                              className="text-aws-sea-blue-light dark:text-aws-sea-blue-dark"
                               onClick={() => {
                                 window.open(url, '_blank');
                               }}>
diff --git a/frontend/src/pages/AdminSharedBotAnalyticsPage.tsx b/frontend/src/pages/AdminSharedBotAnalyticsPage.tsx
index be2266cfa..e33fece6d 100644
--- a/frontend/src/pages/AdminSharedBotAnalyticsPage.tsx
+++ b/frontend/src/pages/AdminSharedBotAnalyticsPage.tsx
@@ -140,7 +140,7 @@ const AdminSharedBotAnalyticsPage: React.FC = () => {
 
             <div className="mt-2 border-b border-gray"></div>
 
-            <div className="h-4/5 overflow-x-hidden overflow-y-scroll border-b border-gray pr-1 scrollbar-thin scrollbar-thumb-aws-font-color/20 ">
+            <div className="h-4/5 overflow-x-hidden overflow-y-scroll border-b border-gray pr-1 scrollbar-thin scrollbar-thumb-aws-font-color-light/20 dark:scrollbar-thumb-aws-font-color-dark/20">
               {isLoadingPublicBots && (
                 <div className="flex flex-col gap-2">
                   {new Array(15).fill('').map((_, idx) => {
@@ -150,7 +150,7 @@ const AdminSharedBotAnalyticsPage: React.FC = () => {
               )}
 
               {publicBots?.length === 0 && (
-                <div className="flex size-full items-center justify-center italic text-dark-gray">
+                <div className="flex size-full items-center justify-center italic text-dark-gray dark:text-light-gray">
                   {t('admin.sharedBotAnalytics.label.noPublicBotUsages')}
                 </div>
               )}
diff --git a/frontend/src/pages/BotApiSettingsPage.tsx b/frontend/src/pages/BotApiSettingsPage.tsx
index 69334227a..f2cea1d03 100644
--- a/frontend/src/pages/BotApiSettingsPage.tsx
+++ b/frontend/src/pages/BotApiSettingsPage.tsx
@@ -313,11 +313,11 @@ const BotApiSettingsPage: React.FC = () => {
                   <div className="flex flex-col gap-1">
                     <div className="text-lg font-bold">{myBot?.title}</div>
                     {myBot?.description ? (
-                      <div className="text-sm text-aws-font-color/50">
+                      <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                         {myBot?.description}
                       </div>
                     ) : (
-                      <div className="text-sm font-light italic text-aws-font-color/50">
+                      <div className="text-sm font-light italic text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                         {t('bot.label.noDescription')}
                       </div>
                     )}
@@ -360,7 +360,7 @@ const BotApiSettingsPage: React.FC = () => {
                           {t('bot.apiSettings.label.endpoint')}
                           <Help message={t('bot.apiSettings.help.endpoint')} />
                         </div>
-                        <div className="text-sm text-aws-font-color/50">
+                        <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                           {t('bot.apiSettings.label.endpoint')}
                         </div>
                         <div className="flex">
@@ -376,7 +376,7 @@ const BotApiSettingsPage: React.FC = () => {
                         <div className="text-lg font-bold">
                           {t('bot.apiSettings.label.apiKeys')}
                         </div>
-                        <div className="text-sm text-aws-font-color/50">
+                        <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                           {t('bot.apiSettings.help.apiKeys')}
                         </div>
 
@@ -403,7 +403,7 @@ const BotApiSettingsPage: React.FC = () => {
                       <div className="text-lg font-bold">
                         {t('bot.apiSettings.label.usagePlan')}
                       </div>
-                      <div className="text-sm text-aws-font-color/50">
+                      <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                         {t('bot.apiSettings.help.usagePlan')}
                       </div>
 
@@ -491,7 +491,7 @@ const BotApiSettingsPage: React.FC = () => {
                         <div className="text-lg font-bold">
                           {t('bot.apiSettings.label.allowOrigins')}
                         </div>
-                        <div className="text-sm text-aws-font-color/50">
+                        <div className="text-sm text-aws-font-color-light/50 dark:text-aws-font-color-dark">
                           <div>{t('bot.apiSettings.help.allowOrigins')}</div>
                           <div>
                             {t('bot.apiSettings.help.allowOriginsExample')}
diff --git a/frontend/src/pages/BotExplorePage.tsx b/frontend/src/pages/BotExplorePage.tsx
index db2154cd6..b376e1b8d 100644
--- a/frontend/src/pages/BotExplorePage.tsx
+++ b/frontend/src/pages/BotExplorePage.tsx
@@ -149,10 +149,10 @@ const BotExplorePage: React.FC = () => {
             </div>
             <div className="mt-2 border-b border-gray"></div>
 
-            <div className="h-4/5 overflow-x-auto overflow-y-scroll border-b border-gray pr-1 scrollbar-thin scrollbar-thumb-aws-font-color/20">
+            <div className="h-4/5 overflow-x-auto overflow-y-scroll border-b border-gray pr-1 scrollbar-thin scrollbar-thumb-aws-font-color-light/20 dark:scrollbar-thumb-aws-font-color-dark/20">
               <div className="h-full min-w-[480px]">
                 {myBots?.length === 0 && (
-                  <div className="flex size-full items-center justify-center italic text-dark-gray">
+                  <div className="flex size-full items-center justify-center italic text-dark-gray dark:text-light-gray">
                     {t('bot.label.noBots')}
                   </div>
                 )}
@@ -259,10 +259,10 @@ const BotExplorePage: React.FC = () => {
               {t('bot.label.recentlyUsedBots')}
             </div>
             <div className="mt-2 border-b border-gray"></div>
-            <div className="h-4/5 overflow-x-auto overflow-y-scroll border-b border-gray pr-1 scrollbar-thin scrollbar-thumb-aws-font-color/20">
+            <div className="h-4/5 overflow-x-auto overflow-y-scroll border-b border-gray pr-1 scrollbar-thin scrollbar-thumb-aws-font-color-light/20 dark:scrollbar-thumb-aws-font-color-dark/20">
               <div className="h-full min-w-[480px]">
                 {recentlyUsedSharedBots?.length === 0 && (
-                  <div className="flex size-full items-center justify-center italic text-dark-gray">
+                  <div className="flex size-full items-center justify-center italic text-dark-gray dark:text-light-gray">
                     {t('bot.label.noBotsRecentlyUsed')}
                   </div>
                 )}
diff --git a/frontend/src/pages/ChatPage.tsx b/frontend/src/pages/ChatPage.tsx
index 85f4ed188..5521532ce 100644
--- a/frontend/src/pages/ChatPage.tsx
+++ b/frontend/src/pages/ChatPage.tsx
@@ -21,6 +21,7 @@ import {
   PiStarFill,
   PiWarningCircleFill,
 } from 'react-icons/pi';
+import { IoMoonSharp, IoSunnyOutline } from "react-icons/io5";
 import Button from '../components/Button';
 import { useTranslation } from 'react-i18next';
 import SwitchBedrockModel from '../components/SwitchBedrockModel';
@@ -54,6 +55,8 @@ import {
 } from '../@types/conversation.ts';
 import { AVAILABLE_MODEL_KEYS } from '../constants/index'
 import usePostMessageStreaming from '../hooks/usePostMessageStreaming.ts';
+import Toggle from '../components/Toggle.tsx';
+import useLocalStorage from '../hooks/useLocalStorage.ts';
 
 // Default model activation settings when no bot is selected
 const defaultActiveModels: ActiveModels = (() => {
@@ -67,6 +70,28 @@ const ChatPage: React.FC = () => {
   const navigate = useNavigate();
   const { open: openSnackbar } = useSnackbar();
   const { errorDetail } = usePostMessageStreaming();
+  const [theme, setTheme] = useLocalStorage(
+    'theme',
+    'light'
+  );
+  // If you want to add a theme, change the type from boolean to string and change the UI from toggle to pulldown.
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
+  useEffect(() => {
+    if (theme === 'dark') {
+      setIsDarkTheme(true);
+    }
+  }, [theme]);
+
+  const changeTheme = (isDarkTheme: boolean) => {
+    setIsDarkTheme(isDarkTheme);
+    if (isDarkTheme) {
+      document.documentElement.className = 'dark';
+      setTheme('dark');
+    } else {
+      document.documentElement.className = 'light';
+      setTheme('light');
+    }
+  };
 
   const {
     agentThinking,
@@ -438,19 +463,50 @@ const ChatPage: React.FC = () => {
       onDrop={endDnd}
       onDragEnd={endDnd}>
       <div className="flex-1 overflow-hidden">
-        <div className="sticky top-0 z-10 mb-1.5 flex h-14 w-full items-center justify-between border-b border-gray bg-aws-paper p-2">
+        <div className="sticky top-0 z-10 mb-1.5 flex h-14 w-full items-center justify-between border-b border-gray bg-aws-paper-light dark:bg-aws-paper-dark p-2">
           <div className="flex w-full justify-between">
             <div className="p-2">
               <div className="mr-10 font-bold">{pageTitle}</div>
-              <div className="text-xs font-thin text-dark-gray">
+              <div className="text-xs font-thin text-dark-gray dark:text-light-gray">
                 {description}
               </div>
             </div>
 
+            <div className="flex items-center gap-2">
+              {isDarkTheme ? (
+                <>
+                  <IoMoonSharp />
+                </>
+              ): (
+                <>
+                  <IoSunnyOutline />
+                </>
+              )}
+              <Toggle
+                value={isDarkTheme}
+                onChange={(isDarkTheme) => changeTheme(isDarkTheme)}
+              />
+            </div>
+
             {isAvailabilityBot && (
               <div className="absolute -top-1 right-0 flex h-full items-center">
-                <div className="h-full w-5 bg-gradient-to-r from-transparent to-aws-paper"></div>
-                <div className="flex items-center bg-aws-paper">
+                <div className="flex items-center gap-2">
+                  {isDarkTheme ? (
+                    <>
+                      <IoMoonSharp />
+                    </>
+                  ): (
+                    <>
+                      <IoSunnyOutline />
+                    </>
+                  )}
+                  <Toggle
+                    value={isDarkTheme}
+                    onChange={(isDarkTheme) => changeTheme(isDarkTheme)}
+                  />
+                </div>
+                <div className="h-full bg-gradient-to-r from-transparent to-aws-paper-light dark:to-aws-paper-dark"></div>
+                <div className="flex items-center bg-aws-paper-light dark:bg-aws-paper-dark">
                   {bot?.owned && (
                     <StatusSyncBot
                       syncStatus={bot.syncStatus}
@@ -491,7 +547,7 @@ const ChatPage: React.FC = () => {
             )}
           </div>
           {getPostedModel() && (
-            <div className="absolute right-2 top-10 text-xs text-dark-gray">
+            <div className="absolute right-2 top-10 text-xs text-dark-gray dark:text-light-gray">
               model: {getPostedModel()}
             </div>
           )}
@@ -518,7 +574,7 @@ const ChatPage: React.FC = () => {
                     <div
                       key={idx}
                       className={`${
-                        message.role === 'assistant' ? 'bg-aws-squid-ink/5' : ''
+                        message.role === 'assistant' ? 'bg-aws-squid-ink-light/5 dark:bg-aws-squid-ink-dark/35' : ''
                       }`}>
                       <ChatMessageWithRelatedDocuments
                         chatContent={message}
@@ -531,7 +587,7 @@ const ChatPage: React.FC = () => {
                           }
                         }}
                       />
-                      <div className="w-full border-b border-aws-squid-ink/10"></div>
+                      <div className="w-full border-b border-aws-squid-ink-light/10 dark:border-aws-squid-ink-dark/10"></div>
                     </div>
                   ))}
                 </>
@@ -577,7 +633,7 @@ const ChatPage: React.FC = () => {
             {bot?.conversationQuickStarters?.map((qs, idx) => (
               <div
                 key={idx}
-                className="w-[calc(33.333%-0.5rem)] cursor-pointer rounded-2xl border border-aws-squid-ink/20 bg-white p-2  text-sm text-dark-gray  hover:shadow-lg hover:shadow-gray"
+                className="w-[calc(33.333%-0.5rem)] cursor-pointer rounded-2xl border border-aws-squid-ink-light/20 dark:border-aws-squid-ink-dark/20 bg-white p-2  text-sm text-dark-gray dark:text-light-gray  hover:shadow-lg hover:shadow-gray"
                 onClick={() => {
                   onSend(qs.example);
                 }}>
diff --git a/frontend/src/pages/ErrorFallback.tsx b/frontend/src/pages/ErrorFallback.tsx
index 4210c0454..198dc1167 100644
--- a/frontend/src/pages/ErrorFallback.tsx
+++ b/frontend/src/pages/ErrorFallback.tsx
@@ -5,14 +5,14 @@ import { PiSmileyXEyesFill } from 'react-icons/pi';
 const ErrorFallback: React.FC = () => {
   const { t } = useTranslation();
   return (
-    <div className="flex h-dvh flex-col items-center justify-center bg-aws-paper">
-      <div className="flex text-5xl font-bold">
+    <div className="flex h-dvh flex-col items-center justify-center bg-aws-paper-light dark:bg-aws-paper-dark">
+      <div className="flex text-5xl font-bold dark:text-aws-font-color-dark">
         <PiSmileyXEyesFill />
         ERROR
       </div>
-      <div className="mt-4 text-lg">{t('error.unexpectedError.title')}</div>
+      <div className="mt-4 text-lg dark:text-aws-font-color-dark">{t('error.unexpectedError.title')}</div>
       <button
-        className="underline"
+        className="underline dark:text-aws-font-color-blue dark:hover:text-aws-sea-blue-hover-dark"
         onClick={() => (window.location.href = '/')}>
         {t('error.unexpectedError.restore')}
       </button>
diff --git a/frontend/src/providers/SnackbarProvider.tsx b/frontend/src/providers/SnackbarProvider.tsx
index 70ed3ab11..696171d6f 100644
--- a/frontend/src/providers/SnackbarProvider.tsx
+++ b/frontend/src/providers/SnackbarProvider.tsx
@@ -32,7 +32,7 @@ const SnackbarProvider: React.FC<Props> = ({ children }) => {
           leaveFrom="opacity-100 scale-100 "
           leaveTo="opacity-0 scale-95 ">
           <div className="">
-            <div className="mx-4 mt-4 flex justify-between rounded bg-red p-3  text-sm text-aws-font-color-white shadow-lg">
+            <div className="mx-4 mt-4 flex justify-between rounded bg-red p-3  text-sm text-aws-font-color-white-light shadow-lg">
               <div className="mr-3 text-3xl">
                 <PiWarningFill />
               </div>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 034352864..edcef28ef 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
   theme: {
     fontFamily: {
       body: ['M PLUS Rounded 1c'],
@@ -14,15 +15,38 @@ export default {
         fastPulse: 'pulse 0.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
       },
       colors: {
-        'aws-squid-ink': '#232F3E',
-        'aws-sea-blue': '#005276',
-        'aws-sea-blue-hover': '#003550',
+        'aws-squid-ink': {
+          light: '#232F3E',
+          dark: '#171717',
+        },
+        'aws-sea-blue': {
+          light: '#005276',
+          dark: '#757575',
+        },
+        'aws-sea-blue-hover': {
+          light: '#003550',
+          dark: '#225da5',
+        },
         'aws-aqua': '#007faa',
         'aws-lab': '#38ef7d',
         'aws-mist': '#9ffcea',
-        'aws-font-color': '#232F3E',
-        'aws-font-color-white': '#ffffff',
-        'aws-paper': '#f1f3f3',
+        'aws-font-color': {
+          light: '#232F3E',
+          dark: '#cacaca',
+          gray: '#909193',
+          blue: '#276cc6',
+        },
+        'aws-font-color-white': {
+          light: '#ffffff',
+          dark:'#ececec',
+        },
+        'aws-ui-color': {
+          dark: '#151515',
+        },
+        'aws-paper': {
+          light: '#f1f3f3',
+          dark: '#212121',
+        },
         red: '#dc2626',
         'light-red': '#fee2e2',
         yellow: '#f59e0b',

From 70487f2bf46c196330d0c8a8dc69d35879605710 Mon Sep 17 00:00:00 2001
From: marurunn <narurunne@gmail.com>
Date: Fri, 10 Jan 2025 03:36:38 +0900
Subject: [PATCH 2/3] Ladle Support and UI position adjustment

---
 frontend/.ladle/components.tsx                | 16 +++++-
 frontend/src/components/Button.tsx            |  4 +-
 frontend/src/components/ButtonFileChoose.tsx  |  2 +-
 frontend/src/components/ButtonIcon.tsx        |  1 +
 frontend/src/components/ButtonSend.tsx        |  4 +-
 frontend/src/components/ChatListDrawer.tsx    | 45 ++++++++++++++-
 .../src/components/ChatMessage.stories.tsx    |  6 +-
 frontend/src/components/DialogShareBot.tsx    |  4 +-
 frontend/src/components/InputText.tsx         |  5 +-
 frontend/src/components/ListItemBot.tsx       | 16 ++++--
 .../src/components/PopoverMenu.stories.tsx    |  2 +-
 frontend/src/components/Select.tsx            |  4 +-
 frontend/src/components/Slider.tsx            |  6 +-
 frontend/src/components/StatusSyncBot.tsx     |  2 +-
 frontend/src/components/Tooltip.tsx           |  2 +-
 .../agent/components/AvailableTools.tsx       |  2 +-
 .../features/agent/components/ToolCard.tsx    |  9 +--
 frontend/src/pages/ChatPage.tsx               | 56 -------------------
 frontend/tailwind.config.js                   |  2 +-
 19 files changed, 101 insertions(+), 87 deletions(-)

diff --git a/frontend/.ladle/components.tsx b/frontend/.ladle/components.tsx
index 39e3e879a..e7577eff8 100644
--- a/frontend/.ladle/components.tsx
+++ b/frontend/.ladle/components.tsx
@@ -1,7 +1,21 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import '../src/i18n';
 import { GlobalProvider } from '@ladle/react';
+import { useLadleContext } from '@ladle/react';
 import '../src/index.css';
+
 export const Provider: GlobalProvider = ({ children }) => {
+  const { globalState } = useLadleContext();
+
+  useEffect(() => {
+    const bodyClass = document.body.classList;
+
+    if (globalState.theme === 'dark') {
+      bodyClass.add('dark');
+    } else {
+      bodyClass.remove('dark');
+    }
+  }, [globalState.theme]);
+
   return <>{children}</>;
 };
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
index 1cb635ff3..5c84b62d1 100644
--- a/frontend/src/components/Button.tsx
+++ b/frontend/src/components/Button.tsx
@@ -20,11 +20,11 @@ const Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {
       ref={ref}
       className={twMerge(
         'flex items-center justify-center whitespace-nowrap rounded-lg border p-1 px-3',
-        props.text && 'border-0',
+        props.text && 'border-0 dark:text-aws-font-color-dark',
         props.outlined && 'border-aws-squid-ink-light/50 dark:border-aws-font-color-gray/50 hover:bg-white dark:hover:bg-aws-ui-color-dark dark:text-aws-font-color-dark',
         !props.text &&
           !props.outlined &&
-          'bg-aws-sea-blue-light dark:bg-aws-ui-color-dark dark:border-aws-font-color-dark/50 text-aws-font-color-white-light dark:text-aws-font-color-white-dark',
+          'bg-aws-sea-blue-light dark:bg-aws-ui-color-dark dark:border-aws-ui-color-dark text-aws-font-color-white-light dark:text-aws-font-color-white-dark',
         props.disabled || props.loading ? 'opacity-30' : 'hover:brightness-75',
         props.className
       )}
diff --git a/frontend/src/components/ButtonFileChoose.tsx b/frontend/src/components/ButtonFileChoose.tsx
index adf458102..00720e2e5 100644
--- a/frontend/src/components/ButtonFileChoose.tsx
+++ b/frontend/src/components/ButtonFileChoose.tsx
@@ -27,7 +27,7 @@ const ButtonFileChoose: React.FC<Props> = (props) => {
         'flex  items-center justify-center whitespace-nowrap rounded-lg  hover:shadow hover:brightness-75',
         props.icon
           ? 'rounded-full p-2 text-xl text-aws-sea-blue-light dark:text-aws-sea-blue-dark'
-          : 'border dark:border-aws-font-color-dark/50 bg-aws-sea-blue-light dark:bg-aws-ui-color-dark p-1 px-3 text-aws-font-color-white-light dark:text-aws-font-color-white-dark',
+          : 'border dark:border-aws-ui-color-dark bg-aws-sea-blue-light dark:bg-aws-ui-color-dark p-1 px-3 text-aws-font-color-white-light dark:text-aws-font-color-white-dark',
         props.disabled ? 'opacity-30 ' : 'cursor-pointer'
       )}>
       {props.children}
diff --git a/frontend/src/components/ButtonIcon.tsx b/frontend/src/components/ButtonIcon.tsx
index 1a819e71e..59d8daab4 100644
--- a/frontend/src/components/ButtonIcon.tsx
+++ b/frontend/src/components/ButtonIcon.tsx
@@ -13,6 +13,7 @@ const ButtonIcon: React.FC<Props> = (props) => {
     <button
       className={twMerge(
         'flex items-center justify-center rounded-full p-2 text-xl hover:shadow',
+        'dark:text-aws-font-color-dark dark:hover:shadow-aws-font-color-dark',
         props.disabled ? 'opacity-30' : 'hover:brightness-75',
         props.className
       )}
diff --git a/frontend/src/components/ButtonSend.tsx b/frontend/src/components/ButtonSend.tsx
index 89b4dab75..fae0becd0 100644
--- a/frontend/src/components/ButtonSend.tsx
+++ b/frontend/src/components/ButtonSend.tsx
@@ -13,7 +13,9 @@ const ButtonSend: React.FC<Props> = (props) => {
   return (
     <button
       className={twMerge(
-        'flex items-center justify-center rounded-xl bg-aws-sea-blue-light dark:bg-aws-sea-blue-dark p-2 text-xl  text-white hover:bg-aws-sea-blue-hover-light dark:hover:bg-aws-sea-blue-hover-dark',
+        'flex items-center justify-center rounded-xl p-2 text-xl',
+        'bg-aws-sea-blue-light text-white hover:bg-aws-sea-blue-hover-light',
+        'dark:bg-aws-sea-blue-dark dark:hover:bg-aws-sea-blue-hover-dark',
         props.disabled ? 'opacity-30' : '',
         props.className
       )}
diff --git a/frontend/src/components/ChatListDrawer.tsx b/frontend/src/components/ChatListDrawer.tsx
index 3bf41566b..f8d657b0e 100644
--- a/frontend/src/components/ChatListDrawer.tsx
+++ b/frontend/src/components/ChatListDrawer.tsx
@@ -8,6 +8,7 @@ import React, {
 } from 'react';
 import { BaseProps } from '../@types/common';
 import { useLocation, useParams } from 'react-router-dom';
+import { IoMoonSharp, IoSunnyOutline } from "react-icons/io5";
 import useDrawer from '../hooks/useDrawer';
 import ButtonIcon from './ButtonIcon';
 import {
@@ -28,11 +29,13 @@ import { ConversationMeta } from '../@types/conversation';
 import { BotListItem } from '../@types/bot';
 import { isMobile } from 'react-device-detect';
 import useChat from '../hooks/useChat';
+import useLocalStorage from '../hooks/useLocalStorage';
 import { useTranslation } from 'react-i18next';
 import Menu from './Menu';
 import DrawerItem from './DrawerItem';
 import ExpandableDrawerGroup from './ExpandableDrawerGroup';
 import { usePageLabel } from '../routes';
+import Toggle from '../components/Toggle.tsx';
 
 type Props = BaseProps & {
   isAdmin: boolean;
@@ -194,10 +197,17 @@ const ChatListDrawer: React.FC<Props> = (props) => {
   const [prevConversations, setPrevConversations] =
     useState<typeof conversations>();
   const [generateTitleIndex, setGenerateTitleIndex] = useState(-1);
+  // If you want to add a theme, change the type from boolean to string and change the UI from toggle to pulldown.
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
 
   const { newChat, conversationId } = useChat();
   const { botId } = useParams();
 
+  const [theme, setTheme] = useLocalStorage(
+    'theme',
+    'light'
+  );
+
   useEffect(() => {
     setPrevConversations(conversations);
   }, [conversations]);
@@ -217,6 +227,12 @@ const ChatListDrawer: React.FC<Props> = (props) => {
     }
   }, [conversations, prevConversations]);
 
+  useEffect(() => {
+    if (theme === 'dark') {
+      setIsDarkTheme(true);
+    }
+  }, [theme]);
+
   const onClickNewChat = useCallback(() => {
     newChat();
     closeSamllDrawer();
@@ -232,6 +248,17 @@ const ChatListDrawer: React.FC<Props> = (props) => {
     []
   );
 
+  const changeTheme = (isDarkTheme: boolean) => {
+    setIsDarkTheme(isDarkTheme);
+    if (isDarkTheme) {
+      document.documentElement.className = 'dark';
+      setTheme('dark');
+    } else {
+      document.documentElement.className = 'light';
+      setTheme('light');
+    }
+  };
+
   const smallDrawer = useRef<HTMLDivElement>(null);
 
   const closeSamllDrawer = useCallback(() => {
@@ -361,12 +388,28 @@ const ChatListDrawer: React.FC<Props> = (props) => {
           <div
             className={`${
               opened ? 'w-64' : 'w-0'
-            } fixed bottom-0 flex h-12 items-center justify-start border-t bg-aws-squid-ink-light dark:bg-aws-ui-color-dark transition-width lg:w-64`}>
+            } fixed bottom-0 flex h-12 items-center justify-between p-2 border-t bg-aws-squid-ink-light dark:bg-aws-ui-color-dark transition-width lg:w-64`}>
             <Menu
               onSignOut={props.onSignOut}
               onSelectLanguage={props.onSelectLanguage}
               onClearConversations={props.onClearConversations}
             />
+
+            <div className="flex items-center gap-2">
+              {isDarkTheme ? (
+                <>
+                  <IoMoonSharp />
+                </>
+              ): (
+                <>
+                  <IoSunnyOutline />
+                </>
+              )}
+              <Toggle
+                value={isDarkTheme}
+                onChange={(isDarkTheme) => changeTheme(isDarkTheme)}
+              />
+            </div>
           </div>
         </nav>
       </div>
diff --git a/frontend/src/components/ChatMessage.stories.tsx b/frontend/src/components/ChatMessage.stories.tsx
index 2c583d8cf..feeeee5d6 100644
--- a/frontend/src/components/ChatMessage.stories.tsx
+++ b/frontend/src/components/ChatMessage.stories.tsx
@@ -67,7 +67,7 @@ export const Conversation = () => {
         <div
           key={idx}
           className={`${
-            message.role === 'assistant' ? 'bg-aws-squid-ink-light/5 dark:bg-aws-squid-ink-dark/5' : ''
+            message.role === 'assistant' ? 'bg-aws-squid-ink-light/5 dark:bg-aws-squid-ink-dark/5' : 'dark:text-aws-font-color-dark'
           }`}>
           <ChatMessage
             chatContent={message}
@@ -123,7 +123,7 @@ export const ConversationThinking = () => {
         <div
           key={idx}
           className={`${
-            message.role === 'assistant' ? 'bg-aws-squid-ink-light/5 dark:bg-aws-squid-ink-dark/5' : ''
+            message.role === 'assistant' ? 'bg-aws-squid-ink-light/5 dark:bg-aws-squid-ink-dark/5' : 'dark:text-aws-font-color-dark'
           }`}>
           <ChatMessage
             chatContent={message}
@@ -272,7 +272,7 @@ export const ConversationWithAgnet = () => {
         <div
           key={idx}
           className={`${
-            message.role === 'assistant' ? 'bg-aws-squid-ink-light/5 dark:bg-aws-squid-ink-dark/5' : ''
+            message.role === 'assistant' ? 'bg-aws-squid-ink-light/5 dark:bg-aws-squid-ink-dark/5' : 'dark:text-aws-font-color-dark'
           }`}>
           <ChatMessage
             chatContent={message}
diff --git a/frontend/src/components/DialogShareBot.tsx b/frontend/src/components/DialogShareBot.tsx
index 61b7f17ee..b0808b33b 100644
--- a/frontend/src/components/DialogShareBot.tsx
+++ b/frontend/src/components/DialogShareBot.tsx
@@ -54,7 +54,7 @@ const DialogShareBot: React.FC<Props> = (props) => {
       </div>
 
       {isShared && (
-        <div className="mt-3 flex justify-between rounded border border-aws-squid-ink-light/50 dark:border-aws-squid-ink-dark/50 bg-aws-paper-light dark:bg-aws-paper-dark">
+        <div className="mt-3 flex justify-between rounded border border-aws-squid-ink-light/50 dark:border-aws-font-color-dark/50 bg-aws-paper-light dark:bg-aws-paper-dark">
           <input
             type="text"
             className="my-2 ml-2 w-full bg-aws-paper-light dark:bg-aws-paper-dark"
@@ -63,7 +63,7 @@ const DialogShareBot: React.FC<Props> = (props) => {
           />
           <Button
             outlined
-            className="rounded-none rounded-r border-0 border-l bg-white"
+            className="rounded-none rounded-r border-0 border-l"
             onClick={onClickCopy}>
             {labelCopy}
           </Button>
diff --git a/frontend/src/components/InputText.tsx b/frontend/src/components/InputText.tsx
index 61081e841..7595dfa4b 100644
--- a/frontend/src/components/InputText.tsx
+++ b/frontend/src/components/InputText.tsx
@@ -19,7 +19,8 @@ const InputText: React.FC<Props> = (props) => {
       <input
         type={props.type ?? 'text'}
         className={twMerge(
-          'peer h-9 rounded border p-1 dark:bg-aws-ui-color-dark dark:placeholder-aws-font-color-gray',
+          'peer h-9 rounded border p-1',
+          'dark:bg-aws-ui-color-dark dark:placeholder-aws-font-color-gray dark:text-aws-font-color-dark',
           props.errorMessage
             ? 'border-2 border-red'
             : 'border-aws-font-color-light/50 dark:border-aws-font-color-dark/50'
@@ -34,7 +35,7 @@ const InputText: React.FC<Props> = (props) => {
       {props.label && (
         <div
           className={twMerge(
-            'order-first text-sm peer-focus:font-semibold peer-focus:italic ',
+            'order-first text-sm peer-focus:font-semibold peer-focus:italic',
             props.errorMessage
               ? 'font-bold text-red'
               : 'text-dark-gray dark:text-light-gray peer-focus:text-aws-font-color-light dark:peer-focus:text-aws-font-color-dark'
diff --git a/frontend/src/components/ListItemBot.tsx b/frontend/src/components/ListItemBot.tsx
index 84911f0ed..63620934a 100644
--- a/frontend/src/components/ListItemBot.tsx
+++ b/frontend/src/components/ListItemBot.tsx
@@ -33,16 +33,24 @@ const ListItemBot: React.FC<Props> = (props) => {
           }
         }}>
         <div className="w-full overflow-hidden text-ellipsis text-sm font-semibold">
-          {props.bot.title}
+          <span
+            className={
+              props.bot.available
+                ? 'dark:text-aws-font-color-dark'
+                : 'dark:text-aws-font-color-gray'
+            }
+          >
+            {props.bot.title}
+          </span>
         </div>
         {props.bot.description ? (
-          <div className="mt-1 overflow-hidden text-ellipsis text-xs">
+          <div className="mt-1 overflow-hidden text-ellipsis text-xs dark:text-aws-font-color-dark">
             {props.bot.available
               ? props.bot.description
               : t('bot.label.notAvailable')}
           </div>
         ) : (
-          <div className="mt-1 overflow-hidden text-ellipsis text-xs italic text-gray">
+          <div className="mt-1 overflow-hidden text-ellipsis text-xs italic text-gray dark:text-aws-font-color-gray">
             {t('bot.label.noDescription')}
           </div>
         )}
@@ -50,7 +58,7 @@ const ListItemBot: React.FC<Props> = (props) => {
 
       <div className="absolute right-0 flex h-full justify-between">
         <div className="w-10 bg-gradient-to-r from-transparent to-aws-paper-light dark:to-aws-paper-dark"></div>
-        <div className="flex items-center gap-2 bg-aws-paper-light dark:bg-aws-paper-dark pl-2">
+        <div className="flex items-center gap-2 bg-aws-paper-light dark:bg-aws-paper-dark dark:text-aws-font-color-dark pl-2">
           {props.children}
         </div>
       </div>
diff --git a/frontend/src/components/PopoverMenu.stories.tsx b/frontend/src/components/PopoverMenu.stories.tsx
index f97faf56c..cb237a91b 100644
--- a/frontend/src/components/PopoverMenu.stories.tsx
+++ b/frontend/src/components/PopoverMenu.stories.tsx
@@ -27,7 +27,7 @@ export const ChatHeader = () => {
           <PiStar />
         )}
       </ButtonIcon>
-      <ButtonPopover className="mx-1" target="bottom-right">
+      <ButtonPopover className="mx-1 dark:text-aws-font-color-dark" target="bottom-right">
         <PopoverItem onClick={() => {}}>
           <PiPencilLine />
           {t('bot.titleSubmenu.edit')}
diff --git a/frontend/src/components/Select.tsx b/frontend/src/components/Select.tsx
index 1860ed39b..a37f3f6a2 100644
--- a/frontend/src/components/Select.tsx
+++ b/frontend/src/components/Select.tsx
@@ -41,7 +41,7 @@ const Select: React.FC<Props> = (props) => {
         <div className={twMerge('relative')}>
           <Listbox.Button
             className={twMerge(
-              'relative h-9 w-full cursor-default rounded border border-aws-font-color-light/50 dark:border-aws-font-color-dark/50 py-1 pl-3 pr-10 text-left focus:outline-none',
+              'relative h-9 w-full cursor-default rounded border border-aws-font-color-light/50 dark:border-aws-font-color-dark/50 py-1 pl-3 pr-10 text-left dark:text-aws-font-color-dark focus:outline-none',
               !props.disabled && 'bg-white dark:bg-aws-ui-color-dark'
             )}>
             <span className="block truncate">{selectedLabel}</span>
@@ -69,7 +69,7 @@ const Select: React.FC<Props> = (props) => {
                   className={({ active }) =>
                     `relative cursor-default select-none py-2 pl-10 pr-4 ${
                       active
-                        ? 'bg-aws-smile/10 text-aws-smile'
+                        ? 'bg-aws-smile/10 text-aws-smile dark:bg-aws-font-color-dark/10 dark:text-aws-font-color-dark'
                         : 'text-aws-font-color-light dark:text-aws-font-color-dark'
                     }`
                   }
diff --git a/frontend/src/components/Slider.tsx b/frontend/src/components/Slider.tsx
index 72fdef6ab..fa983b7c6 100644
--- a/frontend/src/components/Slider.tsx
+++ b/frontend/src/components/Slider.tsx
@@ -40,7 +40,7 @@ export const Slider: FC<Props> = (props) => {
       <label
         className={twMerge(
           'text-sm text-dark-gray dark:text-light-gray',
-          props.errorMessage && 'border-red text-red'
+          props.errorMessage && 'border-red dark:border-red text-red dark:text-red'
         )}>
         {props.label}
       </label>
@@ -62,8 +62,8 @@ export const Slider: FC<Props> = (props) => {
           className={twMerge(
             'peer h-9 w-16 rounded border p-1 text-center',
             props.errorMessage
-              ? 'border-2 border-red'
-              : 'dark:bg-aws-ui-color-dark border-aws-font-color-light/50 dark:border-aws-font-color-dark'
+              ? 'dark:bg-aws-ui-color-dark border-2 border-red dark:text-aws-font-color-dark'
+              : 'dark:bg-aws-ui-color-dark border-aws-font-color-light/50 dark:border-aws-font-color-dark dark:text-aws-font-color-dark'
           )}
           value={value}
           max={props.range.max}
diff --git a/frontend/src/components/StatusSyncBot.tsx b/frontend/src/components/StatusSyncBot.tsx
index 5680a4689..e98a11f63 100644
--- a/frontend/src/components/StatusSyncBot.tsx
+++ b/frontend/src/components/StatusSyncBot.tsx
@@ -22,7 +22,7 @@ const StatusSyncBot: React.FC<Props> = (props) => {
       <div>
         {(props.syncStatus === SyncStatus.QUEUED ||
           props.syncStatus === SyncStatus.RUNNING) && (
-          <PiSpinnerBold className="animate-spin text-aws-squid-ink-light dark:text-aws-squid-ink-dark" />
+          <PiSpinnerBold className="animate-spin text-aws-squid-ink-light dark:text-white" />
         )}
         {props.syncStatus === SyncStatus.SUCCEEDED && (
           <PiCheckCircleBold className="text-aws-aqua" />
diff --git a/frontend/src/components/Tooltip.tsx b/frontend/src/components/Tooltip.tsx
index 77b157851..5d0ba1e16 100644
--- a/frontend/src/components/Tooltip.tsx
+++ b/frontend/src/components/Tooltip.tsx
@@ -10,7 +10,7 @@ type Props = BaseProps & {
 
 const Tooltip: React.FC<Props> = (props) => {
   return (
-    <div className={`${props.className ?? ''} group relative`}>
+    <div className={`${props.className ?? ''} group relative dark:text-aws-font-color-dark`}>
       <div
         className={`${
           props.direction === TooltipDirection.LEFT ? 'right-0' : ''
diff --git a/frontend/src/features/agent/components/AvailableTools.tsx b/frontend/src/features/agent/components/AvailableTools.tsx
index 47604c896..c3ce56c90 100644
--- a/frontend/src/features/agent/components/AvailableTools.tsx
+++ b/frontend/src/features/agent/components/AvailableTools.tsx
@@ -28,7 +28,7 @@ export const AvailableTools = ({ availableTools, tools, setTools }: Props) => {
   return (
     <>
       <div className="flex items-center gap-1">
-        <div className="text-lg font-bold">{t('agent.label')}</div>
+        <div className="text-lg font-bold dark:text-aws-font-color-dark">{t('agent.label')}</div>
         <Help direction={TooltipDirection.RIGHT} message={t('agent.hint')} />
       </div>
 
diff --git a/frontend/src/features/agent/components/ToolCard.tsx b/frontend/src/features/agent/components/ToolCard.tsx
index 34af8b94e..27f503d22 100644
--- a/frontend/src/features/agent/components/ToolCard.tsx
+++ b/frontend/src/features/agent/components/ToolCard.tsx
@@ -175,7 +175,7 @@ const ToolCard: React.FC<ToolCardProps> = ({
           </span>
         )}
         {'text' in document.content && (
-          <div className="break-all line-clamp-2">
+          <div className="break-all line-clamp-2 dark:text-aws-font-color-dark">
             {document.content.text}
           </div>
         )}
@@ -209,7 +209,7 @@ const ToolCard: React.FC<ToolCardProps> = ({
   return (
     <div className={twMerge('relative', className)}>
       <div
-        className="flex cursor-pointer items-center justify-between p-2 hover:bg-light-gray"
+        className="flex cursor-pointer items-center justify-between p-2 dark:text-aws-font-color-dark hover:bg-light-gray dark:hover:bg-aws-ui-color-dark"
         onClick={handleToggleExpand}>
         <div className="flex items-center text-base">
           {status === 'running' && (
@@ -240,7 +240,7 @@ const ToolCard: React.FC<ToolCardProps> = ({
             <div
               className="mt-2 flex cursor-pointer items-center text-sm"
               onClick={handleToggleInputExpand}>
-              <p className="font-bold">{t('agent.progressCard.toolInput')}</p>
+              <p className="font-bold dark:text-aws-font-color-dark">{t('agent.progressCard.toolInput')}</p>
               {isInputExpanded ? (
                 <PiCaretDown className="ml-2" />
               ) : (
@@ -251,6 +251,7 @@ const ToolCard: React.FC<ToolCardProps> = ({
             <div
               className={twMerge(
                 `overflow-hidden transition-all duration-300 ease-in-out`,
+                'dark:text-aws-font-color-dark',
                 isInputExpanded ? 'max-h-full ' : 'max-h-0'
               )}>
               <div className="ml-4 mt-2 text-sm">
@@ -271,7 +272,7 @@ const ToolCard: React.FC<ToolCardProps> = ({
             <div
               className="mt-2 flex cursor-pointer items-center text-sm"
               onClick={handleToggleContentExpand}>
-              <p className="font-bold">{t('agent.progressCard.toolOutput')}</p>
+              <p className="font-bold dark:text-aws-font-color-dark">{t('agent.progressCard.toolOutput')}</p>
               {isContentExpanded ? (
                 <PiCaretDown className="ml-2" />
               ) : (
diff --git a/frontend/src/pages/ChatPage.tsx b/frontend/src/pages/ChatPage.tsx
index 5521532ce..76aad1806 100644
--- a/frontend/src/pages/ChatPage.tsx
+++ b/frontend/src/pages/ChatPage.tsx
@@ -21,7 +21,6 @@ import {
   PiStarFill,
   PiWarningCircleFill,
 } from 'react-icons/pi';
-import { IoMoonSharp, IoSunnyOutline } from "react-icons/io5";
 import Button from '../components/Button';
 import { useTranslation } from 'react-i18next';
 import SwitchBedrockModel from '../components/SwitchBedrockModel';
@@ -55,8 +54,6 @@ import {
 } from '../@types/conversation.ts';
 import { AVAILABLE_MODEL_KEYS } from '../constants/index'
 import usePostMessageStreaming from '../hooks/usePostMessageStreaming.ts';
-import Toggle from '../components/Toggle.tsx';
-import useLocalStorage from '../hooks/useLocalStorage.ts';
 
 // Default model activation settings when no bot is selected
 const defaultActiveModels: ActiveModels = (() => {
@@ -70,28 +67,6 @@ const ChatPage: React.FC = () => {
   const navigate = useNavigate();
   const { open: openSnackbar } = useSnackbar();
   const { errorDetail } = usePostMessageStreaming();
-  const [theme, setTheme] = useLocalStorage(
-    'theme',
-    'light'
-  );
-  // If you want to add a theme, change the type from boolean to string and change the UI from toggle to pulldown.
-  const [isDarkTheme, setIsDarkTheme] = useState(false);
-  useEffect(() => {
-    if (theme === 'dark') {
-      setIsDarkTheme(true);
-    }
-  }, [theme]);
-
-  const changeTheme = (isDarkTheme: boolean) => {
-    setIsDarkTheme(isDarkTheme);
-    if (isDarkTheme) {
-      document.documentElement.className = 'dark';
-      setTheme('dark');
-    } else {
-      document.documentElement.className = 'light';
-      setTheme('light');
-    }
-  };
 
   const {
     agentThinking,
@@ -472,39 +447,8 @@ const ChatPage: React.FC = () => {
               </div>
             </div>
 
-            <div className="flex items-center gap-2">
-              {isDarkTheme ? (
-                <>
-                  <IoMoonSharp />
-                </>
-              ): (
-                <>
-                  <IoSunnyOutline />
-                </>
-              )}
-              <Toggle
-                value={isDarkTheme}
-                onChange={(isDarkTheme) => changeTheme(isDarkTheme)}
-              />
-            </div>
-
             {isAvailabilityBot && (
               <div className="absolute -top-1 right-0 flex h-full items-center">
-                <div className="flex items-center gap-2">
-                  {isDarkTheme ? (
-                    <>
-                      <IoMoonSharp />
-                    </>
-                  ): (
-                    <>
-                      <IoSunnyOutline />
-                    </>
-                  )}
-                  <Toggle
-                    value={isDarkTheme}
-                    onChange={(isDarkTheme) => changeTheme(isDarkTheme)}
-                  />
-                </div>
                 <div className="h-full bg-gradient-to-r from-transparent to-aws-paper-light dark:to-aws-paper-dark"></div>
                 <div className="flex items-center bg-aws-paper-light dark:bg-aws-paper-dark">
                   {bot?.owned && (
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index edcef28ef..f953f0400 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -25,7 +25,7 @@ export default {
         },
         'aws-sea-blue-hover': {
           light: '#003550',
-          dark: '#225da5',
+          dark: '#303030',
         },
         'aws-aqua': '#007faa',
         'aws-lab': '#38ef7d',

From 34628512919e5fcb93b28fad26ba27de4f29d1f4 Mon Sep 17 00:00:00 2001
From: nagineko <marurunnmakesgames@gmail.com>
Date: Mon, 13 Jan 2025 19:40:37 +0900
Subject: [PATCH 3/3] Ladle and app design matched

---
 frontend/src/components/InputText.tsx               | 2 +-
 frontend/src/components/RadioButton.tsx             | 4 ++--
 frontend/src/components/Select.tsx                  | 2 +-
 frontend/src/features/agent/components/ToolCard.tsx | 2 +-
 frontend/tailwind.config.js                         | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/InputText.tsx b/frontend/src/components/InputText.tsx
index 7595dfa4b..21a2acb89 100644
--- a/frontend/src/components/InputText.tsx
+++ b/frontend/src/components/InputText.tsx
@@ -19,7 +19,7 @@ const InputText: React.FC<Props> = (props) => {
       <input
         type={props.type ?? 'text'}
         className={twMerge(
-          'peer h-9 rounded border p-1',
+          'peer h-9 rounded border p-1 dark:[color-scheme:dark]',
           'dark:bg-aws-ui-color-dark dark:placeholder-aws-font-color-gray dark:text-aws-font-color-dark',
           props.errorMessage
             ? 'border-2 border-red'
diff --git a/frontend/src/components/RadioButton.tsx b/frontend/src/components/RadioButton.tsx
index 76958d187..bac86aacb 100644
--- a/frontend/src/components/RadioButton.tsx
+++ b/frontend/src/components/RadioButton.tsx
@@ -17,7 +17,7 @@ type Props = BaseProps & {
 
 const variantStyles: Record<RadioButtonVariant, string> = {
   default: 'border-aws-font-color-light/50 dark:border-aws-font-color-dark/50 after:bg-aws-sea-blue-light dark:after:bg-aws-sea-blue-dark',
-  outlined: 'border-gray-300 after:bg-aws-sea-blue-light dark:after:bg-aws-sea-blue-dark',
+  outlined: 'border-gray-300 dark:border-aws-font-color-dark after:bg-aws-sea-blue-light dark:after:bg-aws-sea-blue-dark',
   colored: 'border-aws-sea-blue-light dark:border-aws-sea-blue-dark after:bg-aws-sea-blue-light dark:after:bg-aws-sea-blue-dark',
 };
 
@@ -70,7 +70,7 @@ const RadioButton: React.FC<Props> = ({
         </div>
         {label && (
           <div className="grow">
-            <div className="text-sm">{label}</div>
+            <div className="text-sm dark:text-aws-font-color-dark">{label}</div>
           </div>
         )}
       </label>
diff --git a/frontend/src/components/Select.tsx b/frontend/src/components/Select.tsx
index a37f3f6a2..c836aa158 100644
--- a/frontend/src/components/Select.tsx
+++ b/frontend/src/components/Select.tsx
@@ -31,7 +31,7 @@ const Select: React.FC<Props> = (props) => {
     <div className={props.className}>
       {props.label && (
         <div>
-          <span className="text-sm">{props.label}</span>
+          <span className="text-sm dark:text-aws-font-color-dark">{props.label}</span>
         </div>
       )}
       <Listbox
diff --git a/frontend/src/features/agent/components/ToolCard.tsx b/frontend/src/features/agent/components/ToolCard.tsx
index 27f503d22..c2f203fa6 100644
--- a/frontend/src/features/agent/components/ToolCard.tsx
+++ b/frontend/src/features/agent/components/ToolCard.tsx
@@ -209,7 +209,7 @@ const ToolCard: React.FC<ToolCardProps> = ({
   return (
     <div className={twMerge('relative', className)}>
       <div
-        className="flex cursor-pointer items-center justify-between p-2 dark:text-aws-font-color-dark hover:bg-light-gray dark:hover:bg-aws-ui-color-dark"
+        className="flex cursor-pointer items-center justify-between p-2 dark:text-aws-font-color-dark hover:bg-light-gray dark:hover:bg-aws-font-color-dark/10"
         onClick={handleToggleExpand}>
         <div className="flex items-center text-base">
           {status === 'running' && (
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index f953f0400..7fb998a1b 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -25,7 +25,7 @@ export default {
         },
         'aws-sea-blue-hover': {
           light: '#003550',
-          dark: '#303030',
+          dark: '#5b5b5b',
         },
         'aws-aqua': '#007faa',
         'aws-lab': '#38ef7d',