dark mode +

src/components/button/PrimaryButton.tsx

@@ -16,7 +16,7 @@ function Button({ children, className, disabled, pending, ...rest }: Props) {
         disabled={disabled}
         className={clsx(
           className,
-          disabled ? 'bg-disabled text-disabled-text' : 'bg-primary text-white dark:text-foreground hover:bg-primary/90 active:brightness-110',
+          disabled ? 'bg-disabled text-disabled-text' : 'bg-primary text-white dark:text-white hover:bg-primary/90 active:brightness-110',
           pending && 'bg-transparent! text-transparent! cursor-auto!',
           'relative transition-all duration-200 cursor-pointer w-full rounded-normal p-3 font-normal text-sm overflow-clip'
         )}

src/components/combobox/Combobox.tsx

@@ -65,7 +65,8 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
     const selectedOption = options.find((x) => x.id === selectedId);
     const activeIcon = selectedOption?.icon && React.createElement(selectedOption.icon, {
         size: 16,
-        className: "inline-block mr-1 stroke-primary"
+        color: "currentColor",
+        className: "inline-block mr-1 text-primary dark:text-foreground"
     });
     const activeImage = selectedOption?.imagePath && (
         <Image
@@ -73,7 +74,7 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
             alt=""
             width={20}
             height={20}
-            className="inline-block mr-1"
+            className="inline-block mr-1 dark:brightness-0 dark:invert"
         />
     );
 
@@ -133,7 +134,7 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
                         ) : activeIcon ? (
                             activeIcon
                         ) : (
-                            Icon && <Icon size={16} className="inline-block mr-1 stroke-primary" />
+                            Icon && <Icon size={16} color="currentColor" className="inline-block mr-1 text-primary dark:text-foreground" />
                         )
                     }
                     <span className={clsx(
@@ -190,11 +191,12 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
                                             alt=""
                                             width={16}
                                             height={16}
-                                            className="inline-block mr-1"
+                                            className="inline-block mr-1 dark:brightness-0 dark:invert"
                                         />
                                     ) : v?.icon && React.createElement(v.icon, {
                                         size: 16,
-                                        className: "inline-block mr-1 stroke-primary"
+                                        color: "currentColor",
+                                        className: "inline-block mr-1 text-primary dark:text-foreground"
                                     })
                                 }
                                 <span className="text-sm2 tracking-[0.13px] leading-5 w-full mt-1">{v.title}</span>

src/components/input/InputField.tsx

@@ -20,7 +20,7 @@ const InputField = React.forwardRef<HTMLInputElement, Props>(
                 spellCheck={false}
                 className={`${className} ${valid ? 'border-border' : 'border-invalid'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border`}>
                 <label
-                    className='absolute start-2 -top-2.5 px-2 text-[12px] text-foreground bg-white'
+                    className='absolute start-2 -top-2.5 px-2 text-[12px] text-foreground bg-container'
                     htmlFor={htmlFor}>
                     {labelText}
                 </label>

src/components/input/PasswordField.tsx

@@ -23,7 +23,7 @@ function PasswordField({ onChange, htmlFor, labelText, children, valid = true, c
             spellCheck={false}
             className={`${className} ${valid ? 'border-border' : 'border-invalid'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border`}>
             <label
-                className='absolute start-2 bg-white -top-2.5 px-2 text-[12px] text-foreground'
+                className='absolute start-2 bg-container -top-2.5 px-2 text-[12px] text-foreground'
                 htmlFor={htmlFor}>
                 {labelText}
             </label>

src/components/navigation/BottomNavBar.tsx

@@ -99,7 +99,7 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
                 icon={
                   <HomeIcon
                     className={clsx(
-                      'transition-all duration-200 stroke-primary dark:stroke-white dark:text-white'
+                      'transition-all duration-200 stroke-primary dark:stroke-black! dark:text-white'
                     )}
                     fill="white"
                     stroke="currentColor"