From 3402cc6f140caf4f4c0d44665b49b52ad48ba99c Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sat, 27 Dec 2025 12:06:43 +0330
Subject: [PATCH] dark mode +

---
 .../(Dialogs)/cart/components/CartSummary.tsx |  6 +-
 src/app/[name]/(Dialogs)/cart/page.tsx        |  2 +-
 src/app/[name]/(Dialogs)/game/page.tsx        | 36 ++++++------
 .../[id]/components/SummarySection.tsx        |  2 +-
 .../(Dialogs)/order/track/[id]/page.tsx       |  3 +-
 .../transactions/discount/club/page.tsx       | 56 +++++++++----------
 .../(Main)/transactions/discount/page.tsx     |  2 +-
 src/components/button/PrimaryButton.tsx       |  2 +-
 src/components/combobox/Combobox.tsx          | 12 ++--
 src/components/input/InputField.tsx           |  2 +-
 src/components/input/PasswordField.tsx        |  2 +-
 src/components/navigation/BottomNavBar.tsx    |  2 +-
 src/features/auth/components/StepOtp.tsx      |  2 +-
 13 files changed, 66 insertions(+), 63 deletions(-)

diff --git a/src/app/[name]/(Dialogs)/cart/components/CartSummary.tsx b/src/app/[name]/(Dialogs)/cart/components/CartSummary.tsx
index da46ad5..79c1986 100644
--- a/src/app/[name]/(Dialogs)/cart/components/CartSummary.tsx
+++ b/src/app/[name]/(Dialogs)/cart/components/CartSummary.tsx
@@ -83,11 +83,11 @@ const CartSummary = ({ isPremium }: CartSummaryProps) => {
             </div>
           )}
 
-          <div className='fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-border p-4 w-full'>
+          <div className='fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-container border-t border-border p-4 w-full'>
             <div className='flex justify-between items-center gap-4'>
               <div className='flex flex-col'>
-                <div className='text-xs text-gray-400'>{t('PayableAmountLabel')}</div>
-                <div className='text-sm mt-2 font-semibold'>{formatPrice(totalPrice)} تومان</div>
+                <div className='text-xs text-gray-400 dark:text-disabled-text'>{t('PayableAmountLabel')}</div>
+                <div className='text-sm mt-2 font-semibold dark:text-foreground'>{formatPrice(totalPrice)} تومان</div>
               </div>
 
               {isPremium && (
diff --git a/src/app/[name]/(Dialogs)/cart/page.tsx b/src/app/[name]/(Dialogs)/cart/page.tsx
index ca36cef..fefa8ba 100644
--- a/src/app/[name]/(Dialogs)/cart/page.tsx
+++ b/src/app/[name]/(Dialogs)/cart/page.tsx
@@ -107,7 +107,7 @@ const CartIndex = () => {
               <div className='mb-4 bg-container rounded-container p-4 border border-border shadow-sm'>
                 <div className='flex items-start gap-3 mb-4'>
                   <div className='shrink-0 mt-0.5'>
-                    <NotificationBellIcon width={24} height={24} className="text-primary" />
+                    <NotificationBellIcon width={24} height={24} className="currentColor" />
                   </div>
                   <div className='flex-1'>
                     <p className='text-sm font-medium text-foreground mb-1'>
diff --git a/src/app/[name]/(Dialogs)/game/page.tsx b/src/app/[name]/(Dialogs)/game/page.tsx
index 54a72b4..4e5a192 100644
--- a/src/app/[name]/(Dialogs)/game/page.tsx
+++ b/src/app/[name]/(Dialogs)/game/page.tsx
@@ -13,16 +13,16 @@ const GamePage: FC = () => {
         <div>
             <div className='grid grid-cols-3 items-center py-4'>
                 <div className='w-6'></div>
-                <h1 className='text-sm2 place-self-center font-medium'>بازی و سرگرمی</h1>
+                <h1 className='text-sm2 place-self-center font-medium dark:text-foreground'>بازی و سرگرمی</h1>
                 <ArrowLeft
-                    className='cursor-pointer place-self-end'
+                    className='cursor-pointer place-self-end dark:text-foreground'
                     size='24'
                     color='currentColor'
                     onClick={() => router.back()}
                 />
             </div>
 
-            <div className='mt-11 relative bg-primary text-white h-[120px] rounded-[10px] p-4'>
+            <div className='mt-11 relative bg-primary text-white dark:bg-primary dark:text-primary-foreground h-[120px] rounded-[10px] p-4'>
                 <div className='max-w-[99px]'>
                     <div className='font-bold'>My Games</div>
                     <div className='mt-1'>
@@ -46,7 +46,7 @@ const GamePage: FC = () => {
             <div className='mt-8 flex flex-col gap-4'>
                 <div
                     style={{ direction: 'ltr' }}
-                    className='bg-white shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer'
+                    className='bg-white dark:bg-container shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer border border-transparent dark:border-border/50'
                     onClick={() => {
                         const currentPath = window.location.pathname
                         const basePath = currentPath.split('/game')[0]
@@ -62,21 +62,21 @@ const GamePage: FC = () => {
                             className='size-[80px] object-cover'
                         />
 
-                        <div className='text-sm font-bold max-w-[92px]'>
+                        <div className='text-sm font-bold max-w-[92px] dark:text-foreground'>
                             2048
                         </div>
                     </div>
 
-                    <div className='h-8 bg-[#F2F2F2] rounded-lg px-3 flex gap-1 items-center justify-center'>
-                        <div className='text-xs'>اجرا کنید</div>
-                        <Play size='20' color='currentColor' />
+                    <div className='h-8 bg-[#F2F2F2] dark:bg-disabled rounded-lg px-3 flex gap-1 items-center justify-center'>
+                        <div className='text-xs dark:text-foreground'>اجرا کنید</div>
+                        <Play size='20' color='currentColor' className='dark:text-foreground' />
                     </div>
 
                 </div>
 
                 <div
                     style={{ direction: 'ltr' }}
-                    className='bg-white shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer'
+                    className='bg-white dark:bg-container shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer border border-transparent dark:border-border/50'
                     onClick={() => {
                         const currentPath = window.location.pathname
                         const basePath = currentPath.split('/game')[0]
@@ -92,21 +92,21 @@ const GamePage: FC = () => {
                             className='size-[80px] object-cover'
                         />
 
-                        <div className='text-sm font-bold max-w-[92px]'>
+                        <div className='text-sm font-bold max-w-[92px] dark:text-foreground'>
                             Tower Builder
                         </div>
                     </div>
 
-                    <div className='h-8 bg-[#F2F2F2] rounded-lg px-3 flex gap-1 items-center justify-center'>
-                        <div className='text-xs'>اجرا کنید</div>
-                        <Play size='20' color='currentColor' />
+                    <div className='h-8 bg-[#F2F2F2] dark:bg-disabled rounded-lg px-3 flex gap-1 items-center justify-center'>
+                        <div className='text-xs dark:text-foreground'>اجرا کنید</div>
+                        <Play size='20' color='currentColor' className='dark:text-foreground' />
                     </div>
 
                 </div>
 
                 <div
                     style={{ direction: 'ltr' }}
-                    className='bg-white shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer'
+                    className='bg-white dark:bg-container shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer border border-transparent dark:border-border/50'
                     onClick={() => {
                         const currentPath = window.location.pathname
                         const basePath = currentPath.split('/game')[0]
@@ -122,14 +122,14 @@ const GamePage: FC = () => {
                             className='size-[80px] object-cover'
                         />
 
-                        <div className='text-sm font-bold max-w-[92px]'>
+                        <div className='text-sm font-bold max-w-[92px] dark:text-foreground'>
                             The Cube
                         </div>
                     </div>
 
-                    <div className='h-8 bg-[#F2F2F2] rounded-lg px-3 flex gap-1 items-center justify-center'>
-                        <div className='text-xs'>اجرا کنید</div>
-                        <Play size='20' color='currentColor' />
+                    <div className='h-8 bg-[#F2F2F2] dark:bg-disabled rounded-lg px-3 flex gap-1 items-center justify-center'>
+                        <div className='text-xs dark:text-foreground'>اجرا کنید</div>
+                        <Play size='20' color='currentColor' className='dark:text-foreground' />
                     </div>
 
                 </div>
diff --git a/src/app/[name]/(Dialogs)/order/checkout/[id]/components/SummarySection.tsx b/src/app/[name]/(Dialogs)/order/checkout/[id]/components/SummarySection.tsx
index 72fb134..7e57f6b 100644
--- a/src/app/[name]/(Dialogs)/order/checkout/[id]/components/SummarySection.tsx
+++ b/src/app/[name]/(Dialogs)/order/checkout/[id]/components/SummarySection.tsx
@@ -190,7 +190,7 @@ export const SummarySection = ({ cartModal, onToggleCartModal, deliveryType }: S
                             <div className='text-xs text-gray-400 dark:text-gray-500'>{t("PayableAmountLabel")}</div>
                             <div className='text-sm mt-2 font-semibold'>{formatPrice(total)} تومان</div>
                         </div>
-                        <Button pending={isCreateOrderPending || isSaveAllMethodPending} onClick={handleSubmit} className='px-10 w-fit'>
+                        <Button pending={isCreateOrderPending || isSaveAllMethodPending} onClick={handleSubmit} className='px-10 w-fit dark:bg-white dark:text-black! dark:hover:bg-gray-100'>
                             {t("ButtonSubmit")}
                         </Button>
                     </div>
diff --git a/src/app/[name]/(Dialogs)/order/track/[id]/page.tsx b/src/app/[name]/(Dialogs)/order/track/[id]/page.tsx
index 5e8b8e1..7ef6b1f 100644
--- a/src/app/[name]/(Dialogs)/order/track/[id]/page.tsx
+++ b/src/app/[name]/(Dialogs)/order/track/[id]/page.tsx
@@ -165,7 +165,7 @@ function OrderTrackingPage() {
 
                                 <div className='flex justify-between items-center py-4 border-t border-border'>
                                     <span className='text-sm font-medium'>مجموع سفارش</span>
-                                    <span className='text-sm font-bold text-primary'>
+                                    <span className='text-sm font-bold '>
                                         {orderDetail.data.total.toLocaleString('fa-IR')} تومان
                                     </span>
                                 </div>
@@ -182,6 +182,7 @@ function OrderTrackingPage() {
             <div className='p-4 border-t border-border bg-container'>
                 <div className='max-w-2xl mx-auto grid grid-cols-2 gap-4'>
                     <Button
+                        className='dark:bg-white dark:text-black! dark:hover:bg-gray-100'
                         onClick={() => router.push(`/${name}`)}
                         type='button'>
                         بازگشت به منو
diff --git a/src/app/[name]/(Main)/transactions/discount/club/page.tsx b/src/app/[name]/(Main)/transactions/discount/club/page.tsx
index 4628ac6..7aa9e3b 100644
--- a/src/app/[name]/(Main)/transactions/discount/club/page.tsx
+++ b/src/app/[name]/(Main)/transactions/discount/club/page.tsx
@@ -31,31 +31,31 @@ function TransactionsIndex() {
     };
 
     return (
-        <section className='pt-6'>
-            <h1 className='font-medium'>باشگاه مشتریان</h1>
+        <section className='pt-6 pb-10'>
+            <h1 className='font-medium dark:text-foreground'>باشگاه مشتریان</h1>
 
             <section
                 aria-label="درباره باشگاه مشتریان"
-                className='mt-3 bg-container rounded-normal grid grid-cols-4 items-center'
+                className='mt-3 bg-container dark:bg-container rounded-normal grid grid-cols-4 items-center border border-transparent dark:border-border/50'
             >
                 <div className='col-span-3 py-5 pe-7 ps-5 relative h-36.5'>
-                    <div className='w-full h-full absolute top-0 left-0 overflow-clip'>
+                    <div className='w-full h-full absolute top-0 left-0 overflow-clip text-muted-foreground/30 dark:text-foreground/20'>
                         <svg width="301" height="146" viewBox="0 0 301 146" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <g opacity="0.15">
-                                <path d="M262.479 152.795C202.8 122.128 120.111 132.267 77.763 175.315C35.4154 218.362 49.3247 278.14 109.004 308.807C168.683 339.474 251.373 329.335 293.721 286.287C336.069 243.24 322.159 183.462 262.479 152.795Z" stroke="#AFAFAF" />
-                                <path d="M298.808 115.866C239.129 85.1988 156.44 95.3379 114.092 138.385C71.7445 181.433 85.6538 241.21 145.333 271.877C205.012 302.544 287.702 292.405 330.05 249.358C372.398 206.31 358.488 146.533 298.808 115.866Z" stroke="#AFAFAF" />
-                                <path d="M347.543 66.3263C287.863 35.6595 205.174 45.7986 162.826 88.8461C120.479 131.894 134.388 191.671 194.067 222.338C253.747 253.005 336.437 242.866 378.784 199.819C421.132 156.771 407.222 96.9933 347.543 66.3263Z" stroke="#AFAFAF" />
-                                <path d="M416.657 -3.92933C356.977 -34.5961 274.288 -24.457 231.941 18.5905C189.593 61.638 203.502 121.415 263.182 152.082C322.861 182.749 405.551 172.61 447.899 129.563C490.246 86.5153 476.336 26.7377 416.657 -3.92933Z" stroke="#AFAFAF" />
+                                <path d="M262.479 152.795C202.8 122.128 120.111 132.267 77.763 175.315C35.4154 218.362 49.3247 278.14 109.004 308.807C168.683 339.474 251.373 329.335 293.721 286.287C336.069 243.24 322.159 183.462 262.479 152.795Z" stroke="currentColor" />
+                                <path d="M298.808 115.866C239.129 85.1988 156.44 95.3379 114.092 138.385C71.7445 181.433 85.6538 241.21 145.333 271.877C205.012 302.544 287.702 292.405 330.05 249.358C372.398 206.31 358.488 146.533 298.808 115.866Z" stroke="currentColor" />
+                                <path d="M347.543 66.3263C287.863 35.6595 205.174 45.7986 162.826 88.8461C120.479 131.894 134.388 191.671 194.067 222.338C253.747 253.005 336.437 242.866 378.784 199.819C421.132 156.771 407.222 96.9933 347.543 66.3263Z" stroke="currentColor" />
+                                <path d="M416.657 -3.92933C356.977 -34.5961 274.288 -24.457 231.941 18.5905C189.593 61.638 203.502 121.415 263.182 152.082C322.861 182.749 405.551 172.61 447.899 129.563C490.246 86.5153 476.336 26.7377 416.657 -3.92933Z" stroke="currentColor" />
                             </g>
                         </svg>
                     </div>
-                    <div className='flex flex-col justify-between h-full'>
+                    <div className='flex flex-col justify-between h-full relative z-10'>
                         <div>
-                            <h2 className='font-bold text-base'>در باشگاه مشتریان</h2>
-                            <p className='text-xs mt-[7px]'>با امتیازی که داری سفارش بده!</p>
+                            <h2 className='font-bold text-base dark:text-foreground'>در باشگاه مشتریان</h2>
+                            <p className='text-xs mt-[7px] dark:text-disabled-text'>با امتیازی که داری سفارش بده!</p>
                         </div>
 
-                        <p className='text-xs font-medium'>مجموع امتیازات شما: {ef(userWallet?.data?.points?.toString() ?? '0')}</p>
+                        <p className='text-xs font-medium dark:text-foreground'>مجموع امتیازات شما: {ef(userWallet?.data?.points?.toString() ?? '0')}</p>
                     </div>
                 </div>
 
@@ -77,46 +77,46 @@ function TransactionsIndex() {
             </section>
 
             {/* بخش نمایش اعتبار کاربر */}
-            <section className='mt-6 bg-container rounded-normal p-5'>
+            <section className='mt-6 bg-container dark:bg-container rounded-normal p-5 border border-transparent dark:border-border/50'>
                 <div className='flex items-center gap-2 mb-4'>
-                    <MoneyRecive color='currentColor' size={24} className='text-primary' variant='Bold' />
-                    <h2 className='font-bold text-base'>اعتبار شما</h2>
+                    <MoneyRecive color='currentColor' size={24} className='text-primary dark:text-foreground' variant='Bold' />
+                    <h2 className='font-bold text-base dark:text-foreground'>اعتبار شما</h2>
                 </div>
-                <div className='bg-linear-to-l from-primary/10 to-primary/5 rounded-md p-4'>
+                <div className='bg-linear-to-l from-primary/10 to-primary/5 dark:from-primary/20 dark:to-primary/10 rounded-md p-4'>
                     <div className='flex justify-between items-center'>
-                        <span className='text-sm text-muted-foreground'>موجودی کیف پول:</span>
-                        <span className='font-bold text-lg text-primary'>{ef(userWalletAmount.toLocaleString())} تومان</span>
+                        <span className='text-sm text-muted-foreground dark:text-disabled-text'>موجودی کیف پول:</span>
+                        <span className='font-bold text-lg text-primary dark:text-foreground'>{ef(userWalletAmount.toLocaleString())} تومان</span>
                     </div>
                 </div>
             </section>
 
             {/* بخش تبدیل امتیاز به اعتبار */}
-            <section className='mt-6 bg-container rounded-normal p-5'>
+            <section className='mt-6 bg-container dark:bg-container rounded-normal p-5 border border-transparent dark:border-border/50'>
                 <div className='flex items-center gap-2 mb-4'>
-                    <MoneyRecive color='currentColor' size={24} className='text-primary' variant='Bold' />
-                    <h2 className='font-bold text-base'>تبدیل امتیاز به اعتبار</h2>
+                    <MoneyRecive color='currentColor' size={24} className='text-primary dark:text-foreground' variant='Bold' />
+                    <h2 className='font-bold text-base dark:text-foreground'>تبدیل امتیاز به اعتبار</h2>
                 </div>
 
-                <p className='text-sm text-muted-foreground mb-4'>
+                <p className='text-sm text-muted-foreground dark:text-disabled-text mb-4'>
                     هر {ef(aboutData?.data?.score?.purchaseScore?.toString() ?? '0')} امتیاز معادل {ef(aboutData?.data?.score?.purchaseAmount?.toString() ?? '0')} تومان اعتبار است
                 </p>
 
                 <div className='space-y-4'>
-                    <div className='bg-accent/50 rounded-md p-4 space-y-2'>
+                    <div className='bg-accent/50 dark:bg-disabled/30 rounded-md p-4 space-y-2 border border-border/50 dark:border-border'>
                         <div className='flex justify-between items-center'>
-                            <span className='text-sm text-muted-foreground'>امتیاز شما:</span>
-                            <span className='font-bold text-lg'>{ef(userPoints.toString())}</span>
+                            <span className='text-sm text-muted-foreground dark:text-disabled-text'>امتیاز شما:</span>
+                            <span className='font-bold text-lg dark:text-foreground'>{ef(userPoints.toString())}</span>
                         </div>
                         <div className='flex justify-between items-center'>
-                            <span className='text-sm text-muted-foreground'>دریافت می‌کنید:</span>
-                            <span className='font-bold text-lg text-primary'>{ef(calculatedAmount.toString())} تومان</span>
+                            <span className='text-sm text-muted-foreground dark:text-disabled-text'>دریافت می‌کنید:</span>
+                            <span className='font-bold text-lg text-primary dark:text-foreground'>{ef(calculatedAmount.toString())} تومان</span>
                         </div>
                     </div>
 
                     <Button
                         onClick={handleConvert}
                         disabled={userPoints <= 0 || isConverting}
-                        className='w-full'
+                        className='w-full text-xs dark:bg-white dark:text-gray-900 dark:hover:bg-white/90'
                     >
                         {isConverting ? 'در حال تبدیل...' : 'تبدیل تمام امتیازات'}
                     </Button>
diff --git a/src/app/[name]/(Main)/transactions/discount/page.tsx b/src/app/[name]/(Main)/transactions/discount/page.tsx
index 731559e..11fa18a 100644
--- a/src/app/[name]/(Main)/transactions/discount/page.tsx
+++ b/src/app/[name]/(Main)/transactions/discount/page.tsx
@@ -100,7 +100,7 @@ function TransactionsIndex() {
                                 <h3 className='font-bold text-sm2'>مبلغ تخفیف: {formatDiscount(coupon)}</h3>
                                 <p className='text-xs mt-[7px]'>{coupon.description || 'قابل استفاده برای همه‌ی منوها و محصولات'}</p>
                                 <Button
-                                    className='w-fit text-white font-bold px-10 py-1.5 mt-4 text-xs rounded-lg '
+                                    className='w-fit text-white font-bold px-10 py-1.5 mt-4 text-xs rounded-lg dark:bg-white dark:text-black dark:hover:bg-gray-100'
                                     aria-label="کپی کد تخفیف"
                                     onClick={() => handleCopyCode(coupon.code)}
                                 >
diff --git a/src/components/button/PrimaryButton.tsx b/src/components/button/PrimaryButton.tsx
index d6bf423..1524203 100644
--- a/src/components/button/PrimaryButton.tsx
+++ b/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'
         )}
diff --git a/src/components/combobox/Combobox.tsx b/src/components/combobox/Combobox.tsx
index dbe899e..62a158d 100644
--- a/src/components/combobox/Combobox.tsx
+++ b/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>
diff --git a/src/components/input/InputField.tsx b/src/components/input/InputField.tsx
index b76dbb8..cede8bb 100644
--- a/src/components/input/InputField.tsx
+++ b/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>
diff --git a/src/components/input/PasswordField.tsx b/src/components/input/PasswordField.tsx
index efc5740..3e2ae5e 100644
--- a/src/components/input/PasswordField.tsx
+++ b/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>
diff --git a/src/components/navigation/BottomNavBar.tsx b/src/components/navigation/BottomNavBar.tsx
index b4063ac..be51a7b 100644
--- a/src/components/navigation/BottomNavBar.tsx
+++ b/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"
diff --git a/src/features/auth/components/StepOtp.tsx b/src/features/auth/components/StepOtp.tsx
index ecad3dc..5e4c3d3 100644
--- a/src/features/auth/components/StepOtp.tsx
+++ b/src/features/auth/components/StepOtp.tsx
@@ -104,7 +104,7 @@ const StepOtp = ({ phone, slug, code }: Props) => {
                         type='tel'
                         autoComplete="one-time-code"
                         inputMode="numeric"
-                        className='w-full h-[45px] sm:h-[50px] flex-1 mx-1 sm:mx-2 bg-white border border-gray-300 outline-0 rounded-[10px] text-center text-sm' />
+                        className='w-full h-[45px] sm:h-[50px] flex-1 mx-1 sm:mx-2 bg-container border border-border text-foreground outline-0 rounded-[10px] text-center text-sm' />
                 }
             />