feat: implement dark mode for API KEY page

Author: steveninhle

ui/dashboard/src/components/ai-chat/chat-popover.tsx

@@ -78,25 +78,25 @@ const ChatPopover = memo(
     const isEmpty = messages.length === 0;
 
     return (
-      <div className="flex h-[500px] w-[380px] flex-col rounded-xl border border-gray-200 bg-white shadow-lg">
+      <div className="flex h-[500px] w-[380px] flex-col rounded-xl border border-gray-200 dark:border-dark-black-700 bg-white dark:bg-dark-black-800 shadow-lg dark:shadow-dark-card">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
-          <h3 className="typo-para-medium font-semibold text-gray-800">
+        <div className="flex items-center justify-between border-b border-gray-200 dark:border-dark-black-700 px-4 py-3">
+          <h3 className="typo-para-medium font-semibold text-gray-800 dark:text-dark-gray-400">
             {t('ai-chat:title')}
           </h3>
           <div className="flex items-center gap-2">
             {messages.length > 0 && (
               <button
                 type="button"
-                className="rounded typo-para-tiny text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-300"
+                className="rounded typo-para-tiny text-gray-400 dark:text-dark-gray-200 hover:text-gray-600 dark:hover:text-dark-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-300"
                 onClick={onClear}
               >
                 {t('ai-chat:clear')}
               </button>
             )}
             <button
               type="button"
-              className="rounded text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-300"
+              className="rounded text-gray-400 dark:text-dark-gray-200 hover:text-gray-600 dark:hover:text-dark-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-300"
               onClick={onClose}
               aria-label={t('ai-chat:close')}
             >
@@ -107,7 +107,7 @@ const ChatPopover = memo(
 
         {/* Flag Selector */}
         {showFlagSelector && onSelectFlag && (
-          <div className="border-b border-gray-200 px-4 py-2">
+          <div className="border-b border-gray-200 dark:border-dark-black-700 px-4 py-2">
             <FlagSelector
               selectedFlagId={selectedFlagId}
               onSelectFlag={onSelectFlag}
@@ -119,12 +119,12 @@ const ChatPopover = memo(
         <ScrollArea className="flex-1 px-4 py-3">
           {isEmpty ? (
             <div className="flex flex-col gap-4">
-              <p className="typo-para-small text-gray-500">
+              <p className="typo-para-small text-gray-500 dark:text-dark-gray-200">
                 {t('ai-chat:welcome')}
               </p>
               {suggestions.length > 0 && (
                 <div className="flex flex-col gap-2">
-                  <p className="typo-para-tiny font-medium text-gray-600">
+                  <p className="typo-para-tiny font-medium text-gray-600 dark:text-dark-gray-200">
                     {t('ai-chat:suggestions-title')}
                   </p>
                   {suggestions.map(s => (
@@ -152,15 +152,15 @@ const ChatPopover = memo(
                     'max-w-[90%] rounded-lg px-3 py-2',
                     msg.role === 'user'
                       ? 'ml-auto bg-primary-500 text-white'
-                      : 'mr-auto bg-gray-100 text-gray-700'
+                      : 'mr-auto bg-gray-100 dark:bg-dark-black-700 text-gray-700 dark:text-dark-gray-300'
                   )}
                 >
                   {msg.role === 'user' ? (
                     <p className="typo-para-small whitespace-pre-wrap">
                       {msg.content}
                     </p>
                   ) : msg.content ? (
-                    <div className="typo-para-small prose-sm prose-gray max-w-none [&_a]:text-primary-500 [&_a]:underline [&_ol]:list-decimal [&_ol]:pl-4 [&_ul]:list-disc [&_ul]:pl-4 [&_p]:my-1 [&_li]:my-0.5 [&_h1]:text-base [&_h1]:font-bold [&_h1]:my-2 [&_h2]:text-sm [&_h2]:font-bold [&_h2]:my-1.5 [&_h3]:text-sm [&_h3]:font-semibold [&_h3]:my-1 [&_code]:rounded [&_code]:bg-gray-200 [&_code]:px-1 [&_code]:text-xs [&_pre]:rounded [&_pre]:bg-gray-200 [&_pre]:p-2 [&_pre]:text-xs [&_pre]:overflow-x-auto [&_blockquote]:border-l-2 [&_blockquote]:border-gray-300 [&_blockquote]:pl-2 [&_blockquote]:italic">
+                    <div className="typo-para-small prose-sm prose-gray max-w-none [&_a]:text-primary-500 [&_a]:underline [&_ol]:list-decimal [&_ol]:pl-4 [&_ul]:list-disc [&_ul]:pl-4 [&_p]:my-1 [&_li]:my-0.5 [&_h1]:text-base [&_h1]:font-bold [&_h1]:my-2 [&_h2]:text-sm [&_h2]:font-bold [&_h2]:my-1.5 [&_h3]:text-sm [&_h3]:font-semibold [&_h3]:my-1 [&_code]:rounded [&_code]:bg-gray-200 dark:[&_code]:bg-dark-black-900 [&_code]:px-1 [&_code]:text-xs [&_pre]:rounded [&_pre]:bg-gray-200 dark:[&_pre]:bg-dark-black-900 [&_pre]:p-2 [&_pre]:text-xs [&_pre]:overflow-x-auto [&_blockquote]:border-l-2 [&_blockquote]:border-gray-300 dark:[&_blockquote]:border-dark-black-700 [&_blockquote]:pl-2 [&_blockquote]:italic">
                       <Markdown>{msg.content}</Markdown>
                     </div>
                   ) : (
@@ -180,7 +180,7 @@ const ChatPopover = memo(
           )}
           {errorKey && (
             <div
-              className="mt-2 rounded-lg bg-accent-red-50 px-3 py-2"
+              className="mt-2 rounded-lg bg-accent-red-50 dark:bg-accent-red-900/30 px-3 py-2"
               role="alert"
             >
               <p className="typo-para-tiny text-accent-red-500">
@@ -198,7 +198,7 @@ const ChatPopover = memo(
         {/* Input */}
         <form
           onSubmit={handleSubmit}
-          className="flex items-center gap-2 border-t border-gray-200 px-4 py-3"
+          className="flex items-center gap-2 border-t border-gray-200 dark:border-dark-black-700 px-4 py-3"
         >
           <input
             type="text"
@@ -210,10 +210,10 @@ const ChatPopover = memo(
             disabled={isStreaming}
             maxLength={MAX_INPUT_LENGTH}
             className={cn(
-              'flex-1 rounded-lg border border-gray-200 px-3 py-2',
-              'typo-para-small text-gray-700 placeholder:text-gray-400',
+              'flex-1 rounded-lg border border-gray-200 dark:border-dark-black-700 dark:bg-dark-black-900 px-3 py-2',
+              'typo-para-small text-gray-700 dark:text-dark-gray-300 placeholder:text-gray-400 dark:placeholder:text-dark-gray-200',
               'focus:border-primary-300 focus:outline-none focus:ring-1 focus:ring-primary-300',
-              'disabled:cursor-not-allowed disabled:bg-gray-50'
+              'disabled:cursor-not-allowed disabled:bg-gray-50 dark:disabled:bg-dark-black-700'
             )}
           />
           <Button

ui/dashboard/src/components/ai-chat/preset-questions.tsx

@@ -25,9 +25,9 @@ const PresetQuestions = memo(({ onSelect }: PresetQuestionsProps) => {
             key={key}
             type="button"
             className={cn(
-              'rounded-lg border border-gray-200 px-3 py-2 text-left',
-              'typo-para-tiny text-gray-600',
-              'transition-colors duration-200 hover:border-primary-300 hover:bg-primary-50',
+              'rounded-lg border border-gray-200 dark:border-dark-black-700 px-3 py-2 text-left',
+              'typo-para-tiny text-gray-600 dark:text-dark-gray-200',
+              'transition-colors duration-200 hover:border-primary-300 hover:bg-primary-50 dark:hover:bg-dark-purple-100',
               'motion-reduce:transition-none',
               'focus:outline-none focus:ring-2 focus:ring-primary-300 focus:ring-offset-2'
             )}

ui/dashboard/src/components/ai-chat/suggestion-card.tsx

@@ -21,15 +21,19 @@ const SuggestionCard = memo(({ suggestion, onClick }: SuggestionCardProps) => {
     <button
       type="button"
       className={cn(
-        'w-full rounded-lg border border-gray-200 p-3 text-left',
-        'transition-colors duration-200 hover:border-primary-300 hover:bg-primary-50',
+        'w-full rounded-lg border border-gray-200 dark:border-dark-black-700 p-3 text-left',
+        'transition-colors duration-200 hover:border-primary-300 hover:bg-primary-50 dark:hover:bg-dark-purple-100',
         'motion-reduce:transition-none',
         'focus:outline-none focus:ring-2 focus:ring-primary-300 focus:ring-offset-2'
       )}
       onClick={() => onClick(title)}
     >
-      <p className="typo-para-small font-medium text-gray-700">{title}</p>
-      <p className="typo-para-tiny mt-1 text-gray-500">{description}</p>
+      <p className="typo-para-small font-medium text-gray-700 dark:text-dark-gray-300">
+        {title}
+      </p>
+      <p className="typo-para-tiny mt-1 text-gray-500 dark:text-dark-gray-200">
+        {description}
+      </p>
     </button>
   );
 });

ui/dashboard/src/components/autocomplete-input/index.tsx

@@ -91,15 +91,15 @@ const AutocompleteInput = ({
         onChange={handleChange}
         onFocus={handleFocus}
         onBlur={handleBlur}
-        className="border border-gray-400 p-2 typo-para-medium w-full px-4 py-[11px] text-gray-700"
+        className="border border-gray-400 dark:border-dark-purple-100 dark:bg-dark-black-900 p-2 typo-para-medium w-full px-4 py-[11px] text-gray-700 dark:text-dark-gray-300"
       />
       {showSuggestions && suggestions.length > 0 && (
-        <ul className="absolute p-1 max-h-[252px] bg-white border rounded-lg w-full shadow-dropdown overflow-x-hidden overflow-y-auto small-scroll mt-1 z-10">
+        <ul className="absolute p-1 max-h-[252px] bg-white dark:bg-dark-black-800 border dark:border-dark-black-700 rounded-lg w-full shadow-dropdown dark:shadow-dark-card overflow-x-hidden overflow-y-auto small-scroll mt-1 z-10">
           {suggestions.map((suggestion, index) => (
             <li
               key={index}
               onMouseDown={() => handleSelect(suggestion)}
-              className="p-2 hover:bg-gray-100 cursor-pointer rounded-md typo-para-medium text-gray-700"
+              className="p-2 hover:bg-gray-100 dark:hover:bg-dark-black-700 cursor-pointer rounded-md typo-para-medium text-gray-700 dark:text-dark-gray-300"
             >
               {suggestion}
             </li>

ui/dashboard/src/components/badge/index.tsx

@@ -9,8 +9,10 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        primary: 'text-primary-500 bg-primary-100',
-        secondary: 'text-gray-500 bg-gray-200'
+        primary:
+          'text-primary-500 bg-primary-100 dark:text-dark-purple-500 dark:bg-dark-purple-100',
+        secondary:
+          'text-gray-500 bg-gray-200 dark:text-dark-gray-200 dark:bg-dark-black-700'
       }
     },
     defaultVariants: {

ui/dashboard/src/components/button/index.tsx

@@ -13,13 +13,13 @@ const buttonVariants = cva(
           'bg-primary-500 text-gray-50',
           'rounded-lg px-6 py-2',
           'hover:bg-primary-700',
-          'disabled:bg-primary-200 disabled:text-primary-50'
+          'disabled:bg-primary-200 disabled:text-primary-50 dark:disabled:bg-dark-black-700 dark:disabled:text-dark-gray-200'
         ],
         secondary: [
           'text-primary-500 dark:text-dark-purple-500 shadow-border-primary-500 dark:shadow-border-primary-glow',
           'rounded-lg px-6 py-2',
           'hover:text-primary-700 dark:hover:text-dark-purple-600 hover:shadow-border-primary-700 dark:hover:shadow-border-primary-glow',
-          'disabled:text-gray-500 dark:disabled:text-dark-gray-200 disabled:shadow-border-gray-500'
+          'disabled:text-gray-500 dark:disabled:text-dark-gray-200 disabled:shadow-border-gray-500 dark:disabled:shadow-border-dark-black-700'
         ],
         'secondary-2': [
           'text-gray-700 dark:text-dark-gray-300 shadow-border-gray-300 dark:shadow-border-gray-500',
@@ -31,7 +31,7 @@ const buttonVariants = cva(
           'bg-accent-red-500 text-gray-50 shadow-border-accent-red-500',
           'rounded-lg px-6 py-2',
           'hover:bg-accent-red-600 hover:shadow-border-accent-red-600',
-          'disabled:bg-accent-red-50 disabled:shadow-border-gray-400 disabled:text-gray-500'
+          'disabled:bg-accent-red-50 disabled:shadow-border-gray-400 disabled:text-gray-500 dark:disabled:bg-dark-black-700 dark:disabled:shadow-border-dark-black-700 dark:disabled:text-dark-gray-200'
         ],
         text: [
           'text-primary-500 dark:text-dark-purple-500 px-2',

ui/dashboard/src/components/checkbox/index.tsx

@@ -37,7 +37,7 @@ const Checkbox = forwardRef(
         <div className="flex-center size-5 mt-0.5">
           <CheckboxPrimitive.Root
             className={cn(
-              'flex-center size-5 rounded border border-gray-500 transition-colors duration-200',
+              'flex-center size-5 rounded border border-gray-500 dark:border-dark-purple-100 transition-colors duration-200',
               {
                 'border-primary-500 bg-primary-500': checked
               }
@@ -60,7 +60,9 @@ const Checkbox = forwardRef(
         </div>
         {title && (
           <label className="flex flex-col gap-y-2 text-left" htmlFor={inputId}>
-            <span className="typo-para-medium text-gray-700">{title}</span>
+            <span className="typo-para-medium text-gray-700 dark:text-dark-gray-300">
+              {title}
+            </span>
             {description && (
               <span className="typo-para-small text-additional-gray-500">
                 {description}

ui/dashboard/src/components/dropdown/index.tsx

@@ -327,17 +327,19 @@ const DropdownMenuSearch = forwardRef(
     ref: Ref<HTMLInputElement>
   ) => {
     return (
-      <div className="sticky top-0 left-0 right-0 flex items-center w-full px-3 py-[11.5px] gap-x-2 border-b border-gray-200 dark:border-dark-black-700 bg-white dark:bg-dark-black-800 z-50">
-        <div className="flex-center size-5">
-          <Icon icon={IconSearch} size={'xs'} color="gray-500" />
+      <div className="sticky top-0 left-0 right-0 w-full px-3 py-[11.5px] bg-white dark:bg-dark-black-800 z-50">
+        <div className="flex items-center w-full gap-x-2 px-3 py-2 rounded-lg border border-gray-200 dark:border-dark-purple-100 bg-white dark:bg-dark-black-700 hover:border-gray-400 focus-within:border-primary-500 dark:hover:border-dark-purple-300 dark:focus-within:border-dark-purple-300">
+          <div className="flex-center size-5">
+            <Icon icon={IconSearch} size={'xs'} color="gray-500" />
+          </div>
+          <Input
+            {...props}
+            ref={ref}
+            value={value}
+            onChange={onChange}
+            className="p-0 border-none rounded-none bg-white dark:bg-dark-black-700 hover:shadow-none focus:shadow-none dark:hover:shadow-none dark:focus:shadow-none focus:ring-0 focus:border-none"
+          />
         </div>
-        <Input
-          {...props}
-          ref={ref}
-          value={value}
-          onChange={onChange}
-          className="p-0 border-none rounded-none"
-        />
       </div>
     );
   }

ui/dashboard/src/components/list/list-item.tsx

@@ -29,8 +29,8 @@ const ListItem = ({
       id={value || urlCode}
       className={cn(
         'flex items-center justify-between cursor-default',
-        'rounded-lg px-3 py-2 text-gray-700 dark:text-dark-gray-400 hover:bg-gray-100 dark:hover:bg-dark-black-700',
-        selected && 'bg-gray-100 dark:bg-dark-black-700',
+        'rounded-lg px-3 py-2 text-gray-700 dark:text-dark-gray-400 hover:bg-gray-100 dark:hover:bg-dark-purple-100',
+        selected && 'bg-gray-100 dark:bg-dark-purple-200/20',
         className
       )}
       onClick={() => onSelect?.(value)}

ui/dashboard/src/components/list/list-title.tsx

@@ -7,7 +7,12 @@ export type ListTitleProps = {
 
 const ListTitle = ({ children, className }: ListTitleProps) => {
   return (
-    <h3 className={cn('typo-head-bold-medium text-gray-700', className)}>
+    <h3
+      className={cn(
+        'typo-head-bold-medium text-gray-700 dark:text-dark-gray-300',
+        className
+      )}
+    >
       {children}
     </h3>
   );