From 968d11d764d69dffc43152c8d677d189cb9111a8 Mon Sep 17 00:00:00 2001
From: Juan Patricio Marroquin <juan.marroquin1@unmsm.edu.pe>
Date: Fri, 20 Oct 2023 09:52:47 -0500
Subject: [PATCH 01/14] feat: dark mode for my wallet table

---
 resources/js/Components/Table/Table.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Components/Table/Table.tsx b/resources/js/Components/Table/Table.tsx
index b8d8705d8..5bc51dbcb 100644
--- a/resources/js/Components/Table/Table.tsx
+++ b/resources/js/Components/Table/Table.tsx
@@ -68,7 +68,7 @@ export const Table = <RowDataType extends Record<never, unknown>>({
     return (
         <div
             className={cn({
-                "rounded-xl border border-theme-secondary-300": variant === "default",
+                "rounded-xl border border-theme-secondary-300 dark:border-theme-dark-700": variant === "default",
                 "border-none": variant === "borderless",
             })}
         >

From 5e7c8b935cd335e1467c025944838cf62c498072 Mon Sep 17 00:00:00 2001
From: Juan Patricio Marroquin <juan.marroquin1@unmsm.edu.pe>
Date: Fri, 20 Oct 2023 09:53:17 -0500
Subject: [PATCH 02/14] feat: dark mode for table cell

---
 resources/js/Components/Table/TableCell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Components/Table/TableCell.tsx b/resources/js/Components/Table/TableCell.tsx
index 9afc20643..1a7bd6b59 100644
--- a/resources/js/Components/Table/TableCell.tsx
+++ b/resources/js/Components/Table/TableCell.tsx
@@ -22,7 +22,7 @@ const variantClass = (variant: TableCellVariant): string | undefined => {
 
 export const TableCell = ({
     innerClassName = "py-2.5",
-    hoverClassName = "group-hover:bg-theme-secondary-50",
+    hoverClassName = "group-hover:bg-theme-secondary-50 dark:group-hover:bg-theme-dark-800",
     className,
     paddingClassName = "px-5",
     variant = "middle",

From e7cf569d9cdda3956d8c80ce794afa4efe578c7d Mon Sep 17 00:00:00 2001
From: Juan Patricio Marroquin <juan.marroquin1@unmsm.edu.pe>
Date: Fri, 20 Oct 2023 09:53:23 -0500
Subject: [PATCH 03/14] feat: dark mode for table row

---
 resources/js/Components/Table/TableRow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Components/Table/TableRow.tsx b/resources/js/Components/Table/TableRow.tsx
index 3734cafa2..61e5f4c20 100644
--- a/resources/js/Components/Table/TableRow.tsx
+++ b/resources/js/Components/Table/TableRow.tsx
@@ -6,7 +6,7 @@ export const TableRow = forwardRef<HTMLTableRowElement, TableRowProperties>(
     (
         {
             className,
-            borderClass = "group border-b last:border-b-0 border-theme-secondary-300 border-dashed",
+            borderClass = "group border-b last:border-b-0 border-theme-secondary-300 border-dashed dark:border-theme-dark-700",
             onClick,
             ...properties
         }: TableRowProperties,

From 0aac182b444f3399446dfda71654e82914882fb4 Mon Sep 17 00:00:00 2001
From: Juan Patricio Marroquin <juan.marroquin1@unmsm.edu.pe>
Date: Fri, 20 Oct 2023 09:53:27 -0500
Subject: [PATCH 04/14] feat: dark mode for table header

---
 resources/js/Components/Table/TableHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Components/Table/TableHeader.tsx b/resources/js/Components/Table/TableHeader.tsx
index 069ad2f89..83a763c85 100644
--- a/resources/js/Components/Table/TableHeader.tsx
+++ b/resources/js/Components/Table/TableHeader.tsx
@@ -98,7 +98,7 @@ export const TableHeader = <RowDataType extends Record<never, unknown>>({
         <thead>
             {headerGroups.map((headerGroup, index) => (
                 <tr
-                    className="border-b border-theme-secondary-300"
+                    className="border-b border-theme-secondary-300 dark:border-theme-dark-700"
                     {...headerGroup.getHeaderGroupProps()}
                     key={index}
                 >

From b3d0c7ef5575d714d67227b68a6523311f696017 Mon Sep 17 00:00:00 2001
From: Juan Patricio Marroquin <juan.marroquin1@unmsm.edu.pe>
Date: Fri, 20 Oct 2023 09:53:40 -0500
Subject: [PATCH 05/14] feat: dark mode for wallet token table

---
 .../WalletTokens/WalletTokensTable.blocks.tsx  | 18 +++++++++---------
 .../WalletTokens/WalletTokensTable.tsx         |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/resources/js/Components/WalletTokens/WalletTokensTable.blocks.tsx b/resources/js/Components/WalletTokens/WalletTokensTable.blocks.tsx
index 4094a562f..23756a023 100644
--- a/resources/js/Components/WalletTokens/WalletTokensTable.blocks.tsx
+++ b/resources/js/Components/WalletTokens/WalletTokensTable.blocks.tsx
@@ -27,13 +27,13 @@ export const Action = ({ asset, onClick }: Omit<Properties, "currency">): JSX.El
         <>
             <Button
                 data-testid="WalletTokensTable__action_details"
-                className="hidden overflow-hidden group-hover:bg-theme-secondary-200 md:inline"
+                className="hidden overflow-hidden group-hover:bg-theme-secondary-200 dark:bg-theme-dark-800 dark:group-hover:bg-theme-dark-700 md:inline"
                 onClick={() => {
                     onClick(asset);
                 }}
                 variant="secondary"
             >
-                <div className="transition-default -mx-5 -my-2 px-5 py-2 hover:bg-theme-secondary-300">
+                <div className="transition-default -mx-5 -my-2 px-5 py-2 hover:bg-theme-secondary-300 dark:hover:bg-theme-dark-700 ">
                     {t("common.details")}
                 </div>
             </Button>
@@ -93,13 +93,13 @@ export const Token = memo(
                 <div className="flex flex-col items-start space-y-0.5 whitespace-nowrap font-medium">
                     <span
                         data-testid="WalletTokensTable__token_symbol"
-                        className="text-sm leading-5.5 text-theme-secondary-900 group-hover/token:text-theme-primary-700 sm:text-base sm:leading-6"
+                        className="text-sm leading-5.5 text-theme-secondary-900 group-hover/token:text-theme-primary-700 dark:text-theme-dark-50 dark:group-hover:text-theme-primary-400 sm:text-base sm:leading-6"
                     >
                         {asset.symbol}
                     </span>
                     <span
                         data-testid="WalletTokensTable__token_name"
-                        className="text-xs leading-4.5 text-theme-secondary-500 sm:text-sm sm:leading-5.5"
+                        className="text-xs leading-4.5 text-theme-secondary-500 dark:text-theme-dark-300 sm:text-sm sm:leading-5.5"
                     >
                         {asset.name}
                     </span>
@@ -144,7 +144,7 @@ export const Balance = ({ asset, currency }: Omit<Properties, "onClick">): JSX.E
                         <div
                             ref={fiatReference}
                             data-testid="WalletTokensTable__balance_fiat"
-                            className="truncate text-right text-sm leading-5.5 text-theme-secondary-900 sm:text-base sm:leading-6"
+                            className="truncate text-right text-sm leading-5.5 text-theme-secondary-900 dark:text-theme-dark-50 sm:text-base sm:leading-6"
                         >
                             <FormatFiat
                                 value={asset.fiat_balance ?? "0"}
@@ -172,7 +172,7 @@ export const Balance = ({ asset, currency }: Omit<Properties, "onClick">): JSX.E
                         >
                             <div
                                 ref={reference}
-                                className="truncate text-xs leading-4.5 text-theme-secondary-500 sm:text-sm sm:leading-5.5"
+                                className="truncate text-xs leading-4.5 text-theme-secondary-500 dark:text-theme-dark-300 sm:text-sm sm:leading-5.5"
                             >
                                 <FormatCrypto
                                     token={token}
@@ -199,7 +199,7 @@ export const Price = ({ asset, currency }: Omit<Properties, "onClick">): JSX.Ele
     >
         <span
             data-testid="WalletTokensTable__price_fiat"
-            className="text-base leading-6 text-theme-secondary-700"
+            className="text-base leading-6 text-theme-secondary-700 dark:text-theme-dark-200"
         >
             <FormatFiat
                 value={asset.token_price?.toString() ?? "0"}
@@ -223,7 +223,7 @@ export const Price = ({ asset, currency }: Omit<Properties, "onClick">): JSX.Ele
 export const MarketCap = ({ asset, currency }: Omit<Properties, "onClick">): JSX.Element => (
     <span
         data-testid="WalletTokensTable__market-cap"
-        className="font-medium text-theme-secondary-700"
+        className="font-medium text-theme-secondary-700 dark:text-theme-dark-200"
     >
         <FormatFiatShort
             value={asset.total_market_cap?.toString() ?? "0"}
@@ -235,7 +235,7 @@ export const MarketCap = ({ asset, currency }: Omit<Properties, "onClick">): JSX
 export const Volume = ({ asset, currency }: Omit<Properties, "onClick">): JSX.Element => (
     <span
         data-testid="WalletTokensTable__volume"
-        className="font-medium text-theme-secondary-700"
+        className="font-medium text-theme-secondary-700 dark:text-theme-dark-200"
     >
         <FormatFiatShort
             value={asset.total_volume?.toString() ?? "0"}
diff --git a/resources/js/Components/WalletTokens/WalletTokensTable.tsx b/resources/js/Components/WalletTokens/WalletTokensTable.tsx
index 7d013d4e8..45d5559b5 100644
--- a/resources/js/Components/WalletTokens/WalletTokensTable.tsx
+++ b/resources/js/Components/WalletTokens/WalletTokensTable.tsx
@@ -118,7 +118,7 @@ const WalletTokensTableItem = ({
     return (
         <button
             type="button"
-            className="flex items-center justify-between rounded-xl border border-theme-secondary-300 px-4 py-5 outline-none outline-3 outline-offset-0 transition-all hover:outline-theme-primary-300 focus-visible:outline-theme-primary-300"
+            className="flex items-center justify-between rounded-xl border border-theme-secondary-300 px-4 py-5 outline-none outline-3 outline-offset-0 transition-all hover:outline-theme-primary-300 focus-visible:outline-theme-primary-300 dark:border-theme-dark-700"
             onClick={() => {
                 onDetailsClick(asset);
             }}

From 1fc7e17af59d4998b5d47f3c61f0d0154c0115a1 Mon Sep 17 00:00:00 2001
From: Juan Patricio Marroquin <juan.marroquin1@unmsm.edu.pe>
Date: Fri, 20 Oct 2023 09:53:55 -0500
Subject: [PATCH 06/14] feat: dark mode for price change

---
 resources/js/Components/PriceChange/PriceChange.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/Components/PriceChange/PriceChange.tsx b/resources/js/Components/PriceChange/PriceChange.tsx
index b33c3c39e..b4422f7f4 100644
--- a/resources/js/Components/PriceChange/PriceChange.tsx
+++ b/resources/js/Components/PriceChange/PriceChange.tsx
@@ -11,9 +11,9 @@ export const PriceChange = ({ change }: PriceChangeProperties): JSX.Element => {
             <div
                 data-testid="PriceChange__wrapper"
                 className={cn("font-medium", {
-                    "text-theme-success-600": type === "positive",
+                    "text-theme-success-600 dark:text-theme-success-500": type === "positive",
                     "text-theme-danger-400": type === "negative",
-                    "text-theme-secondary-700": type === "neutral",
+                    "text-theme-secondary-700 dark:text-theme-secondary-500": type === "neutral",
                 })}
             >
                 {formatPriceChange(change)}

From 8bf0d56bfa22478c4100f7346b5f0b3fdf482d48 Mon Sep 17 00:00:00 2001
From: Juan Patricio Marroquin <juan.marroquin1@unmsm.edu.pe>
Date: Fri, 20 Oct 2023 09:54:29 -0500
Subject: [PATCH 07/14] fix: collection activity table

---
 .../CollectionActivityTable/CollectionActivityTable.blocks.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Components/Collections/CollectionActivityTable/CollectionActivityTable.blocks.tsx b/resources/js/Components/Collections/CollectionActivityTable/CollectionActivityTable.blocks.tsx
index 1d7ebafdb..ed2583506 100644
--- a/resources/js/Components/Collections/CollectionActivityTable/CollectionActivityTable.blocks.tsx
+++ b/resources/js/Components/Collections/CollectionActivityTable/CollectionActivityTable.blocks.tsx
@@ -713,7 +713,7 @@ export const CollectionActivityTableItem = ({
         <TableRow
             data-testid="ActivityTable__Row"
             borderClass={cn(
-                "group border-b border-theme-secondary-300 border-dashed",
+                "group border-b border-theme-secondary-300 border-dashed dark:border-theme-dark-700",
                 hasBorderBottom ? "last:border-b-[5px] last:border-solid" : "last:border-b-0",
             )}
         >

From 0b9892bbcd821d77ea052a88e18a237fe32431fb Mon Sep 17 00:00:00 2001
From: Juan Patricio Marroquin <juan.marroquin1@unmsm.edu.pe>
Date: Fri, 20 Oct 2023 09:54:43 -0500
Subject: [PATCH 08/14] feat: dark mode for balance header skeleton

---
 .../BalanceHeader/BalanceHeader.skeleton.tsx  | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/resources/js/Components/BalanceHeader/BalanceHeader.skeleton.tsx b/resources/js/Components/BalanceHeader/BalanceHeader.skeleton.tsx
index 5d32f687a..47c25a116 100644
--- a/resources/js/Components/BalanceHeader/BalanceHeader.skeleton.tsx
+++ b/resources/js/Components/BalanceHeader/BalanceHeader.skeleton.tsx
@@ -11,12 +11,14 @@ export const BalanceHeaderSkeleton = ({ animated }: { animated: boolean }): JSX.
         <>
             <div
                 data-testid="BalanceHeaderSkeleton"
-                className="hidden items-center justify-between whitespace-nowrap rounded-xl border border-theme-secondary-300 px-6 py-4 sm:block xl:flex"
+                className="hidden items-center justify-between whitespace-nowrap rounded-xl border border-theme-secondary-300 px-6 py-4 dark:border-theme-dark-700 sm:block xl:flex"
             >
-                <div className="flex w-auto justify-between pb-3 xl:justify-start xl:divide-x  xl:divide-theme-secondary-300 xl:pb-0">
-                    <div className="flex divide-x divide-theme-secondary-300 font-medium">
+                <div className="flex w-auto justify-between pb-3 xl:justify-start xl:divide-x xl:divide-theme-secondary-300 xl:pb-0 dark:xl:divide-theme-dark-700">
+                    <div className="flex divide-x divide-theme-secondary-300 font-medium dark:xl:divide-theme-dark-700">
                         <div className="pr-4">
-                            <div className="text-sm text-theme-secondary-500">{t("common.my_balance")}</div>
+                            <div className="text-sm text-theme-secondary-500 dark:text-theme-dark-300">
+                                {t("common.my_balance")}
+                            </div>
                             <Skeleton
                                 className="mt-1 h-6"
                                 width={91}
@@ -25,7 +27,9 @@ export const BalanceHeaderSkeleton = ({ animated }: { animated: boolean }): JSX.
                         </div>
 
                         <div className="px-4">
-                            <div className="text-sm text-theme-secondary-500">{t("common.tokens")}</div>
+                            <div className="text-sm text-theme-secondary-500 dark:text-theme-dark-300">
+                                {t("common.tokens")}
+                            </div>
                             <Skeleton
                                 className="mt-1 h-6"
                                 width={30}
@@ -35,7 +39,7 @@ export const BalanceHeaderSkeleton = ({ animated }: { animated: boolean }): JSX.
                     </div>
 
                     <div className="pl-4 font-medium">
-                        <div className="text-right text-sm text-theme-secondary-500 xl:text-left">
+                        <div className="text-right text-sm text-theme-secondary-500 dark:text-theme-dark-300 xl:text-left">
                             {t("common.my_address")}
                         </div>
 
@@ -159,13 +163,14 @@ export const BalanceHeaderSkeleton = ({ animated }: { animated: boolean }): JSX.
                             </div>
                         </div>
 
-                        <div className="ml-4 flex pl-4 text-sm xl:border-l xl:border-theme-secondary-300">
+                        <div className="ml-4 flex pl-4 text-sm xl:border-l xl:border-theme-secondary-300 dark:xl:border-theme-dark-700">
                             <LinkButton
                                 data-testid="BalanceHeader__more-details"
                                 className={cn(
                                     "transition-default rounded-full text-sm font-medium leading-5.5 text-theme-primary-600 underline decoration-transparent underline-offset-2 outline-none",
                                     "hover:text-theme-primary-700 hover:decoration-theme-primary-700",
                                     "outline-offset-4 focus-visible:outline-3 focus-visible:outline-theme-primary-300",
+                                    "dark:text-theme-primary-400 dark:hover:text-theme-primary-500 dark:hover:decoration-theme-primary-500",
                                 )}
                             >
                                 {t("common.more_details")}

From e7505c04a266dee22ee7da2d9942c07e86f1461c Mon Sep 17 00:00:00 2001
From: Juan Patricio Marroquin <juan.marroquin1@unmsm.edu.pe>
Date: Fri, 20 Oct 2023 09:54:52 -0500
Subject: [PATCH 09/14] feat: dark mode for balance header

---
 .../BalanceHeader/BalanceHeader.tsx           | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/resources/js/Components/BalanceHeader/BalanceHeader.tsx b/resources/js/Components/BalanceHeader/BalanceHeader.tsx
index ef26522f5..4a73d6f07 100644
--- a/resources/js/Components/BalanceHeader/BalanceHeader.tsx
+++ b/resources/js/Components/BalanceHeader/BalanceHeader.tsx
@@ -49,13 +49,15 @@ export const BalanceHeader = ({
         <>
             <div
                 data-testid="BalanceHeader"
-                className="hidden items-center justify-between whitespace-nowrap rounded-xl border border-theme-secondary-300 px-6 py-4 sm:block xl:flex"
+                className="hidden items-center justify-between whitespace-nowrap rounded-xl border border-theme-secondary-300 px-6 py-4 dark:border-theme-dark-700 sm:block xl:flex"
             >
-                <div className="flex w-auto justify-between xl:justify-start xl:divide-x xl:divide-theme-secondary-300">
-                    <div className="flex divide-x divide-theme-secondary-300 font-medium">
+                <div className="flex w-auto justify-between xl:justify-start xl:divide-x xl:divide-theme-secondary-300 dark:xl:divide-theme-dark-700">
+                    <div className="flex divide-x divide-theme-secondary-300 font-medium dark:divide-theme-dark-700">
                         <div className="pr-4">
-                            <div className="text-sm text-theme-secondary-500">{t("common.my_balance")}</div>
-                            <div className="text-lg text-theme-secondary-900">
+                            <div className="text-sm text-theme-secondary-500 dark:text-theme-dark-300">
+                                {t("common.my_balance")}
+                            </div>
+                            <div className="text-lg text-theme-secondary-900 dark:text-theme-dark-50">
                                 <DynamicBalance
                                     balance={balance}
                                     currency={currency}
@@ -64,17 +66,19 @@ export const BalanceHeader = ({
                         </div>
 
                         <div className="px-4">
-                            <div className="text-sm text-theme-secondary-500">{t("common.tokens")}</div>
-                            <div className="text-lg text-theme-secondary-900">{tokens}</div>
+                            <div className="text-sm text-theme-secondary-500 dark:text-theme-dark-300">
+                                {t("common.tokens")}
+                            </div>
+                            <div className="text-lg text-theme-secondary-900 dark:text-theme-dark-50">{tokens}</div>
                         </div>
                     </div>
 
                     <div className="pl-4 font-medium">
-                        <div className="text-right text-sm text-theme-secondary-500 xl:text-left">
+                        <div className="text-right text-sm text-theme-secondary-500 dark:text-theme-dark-300 xl:text-left">
                             {t("common.my_address")}
                         </div>
 
-                        <div className="flex items-center text-right text-lg text-theme-secondary-900 xl:text-left">
+                        <div className="flex items-center text-right text-lg text-theme-secondary-900 dark:text-theme-dark-50  xl:text-left">
                             <TruncateMiddle
                                 length={16}
                                 text={address}
@@ -106,7 +110,7 @@ export const BalanceHeader = ({
                             />
                         </div>
 
-                        <div className="ml-4 flex pl-4 text-sm xl:border-l xl:border-theme-secondary-300">
+                        <div className="ml-4 flex pl-4 text-sm xl:border-l xl:border-theme-secondary-300 dark:xl:border-theme-dark-700">
                             <LinkButton
                                 data-testid="BalanceHeader__more-details"
                                 onClick={() => {
@@ -118,6 +122,7 @@ export const BalanceHeader = ({
                                     "outline-none outline-3 outline-offset-4",
                                     "hover:text-theme-primary-700 hover:decoration-theme-primary-700",
                                     "focus-visible:outline-theme-primary-300",
+                                    "dark:text-theme-primary-400 dark:hover:text-theme-primary-500 dark:hover:decoration-theme-primary-500",
                                 )}
                             >
                                 {t("common.more_details")}

From 6a0d9f7fb0610732cbc7cf9308ff0f8bd4cd216c Mon Sep 17 00:00:00 2001
From: Juan Patricio Marroquin <juan.marroquin1@unmsm.edu.pe>
Date: Fri, 20 Oct 2023 09:54:58 -0500
Subject: [PATCH 10/14] feat: dark mode for balance header mobile skeleton

---
 .../BalanceHeader/BalanceHeaderMobile.skeleton.tsx  | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/resources/js/Components/BalanceHeader/BalanceHeaderMobile.skeleton.tsx b/resources/js/Components/BalanceHeader/BalanceHeaderMobile.skeleton.tsx
index 70c60c913..c7b2fbc7f 100644
--- a/resources/js/Components/BalanceHeader/BalanceHeaderMobile.skeleton.tsx
+++ b/resources/js/Components/BalanceHeader/BalanceHeaderMobile.skeleton.tsx
@@ -9,10 +9,12 @@ export const BalanceHeaderMobileSkeleton = ({ animated }: { animated: boolean })
 
     return (
         <div data-testid="BalanceHeaderMobileSkeleton">
-            <div className="-mx-6 -mt-6 mb-6 flex bg-theme-secondary-50 px-6 py-2.5">
+            <div className="-mx-6 -mt-6 mb-6 flex bg-theme-secondary-50 px-6 py-2.5 dark:bg-theme-dark-950">
                 <div className="flex w-full items-center justify-between">
                     <div className="flex text-sm font-medium">
-                        <span className="mr-1 text-theme-secondary-700">{t("common.my_address")}:</span>
+                        <span className="mr-1 text-theme-secondary-700 dark:text-theme-dark-200">
+                            {t("common.my_address")}:
+                        </span>
                         <Skeleton
                             height={15}
                             width={100}
@@ -30,7 +32,9 @@ export const BalanceHeaderMobileSkeleton = ({ animated }: { animated: boolean })
 
             <div className="flex flex-col items-center space-y-4 text-center">
                 <div>
-                    <div className="text-sm font-medium text-theme-secondary-500">{t("common.my_balance")}</div>
+                    <div className="text-sm font-medium text-theme-secondary-500 dark:text-theme-dark-300">
+                        {t("common.my_balance")}
+                    </div>
                     <div className="text-2xl font-medium text-theme-secondary-900">
                         <Skeleton
                             height={32}
@@ -69,7 +73,7 @@ export const BalanceHeaderMobileSkeleton = ({ animated }: { animated: boolean })
 
                 <div className="mt-2 flex items-center justify-between">
                     <div className="flex space-x-2">
-                        <p className="text-sm font-medium leading-5.5 text-theme-secondary-700">
+                        <p className="text-sm font-medium leading-5.5 text-theme-secondary-700 dark:text-theme-dark-200">
                             {t("common.tokens")}:
                         </p>
 
@@ -86,6 +90,7 @@ export const BalanceHeaderMobileSkeleton = ({ animated }: { animated: boolean })
                             "transition-default rounded-sm border-b border-transparent text-sm font-medium leading-none text-theme-primary-600 outline-none ",
                             "hover:border-theme-primary-700 hover:text-theme-primary-700",
                             "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-theme-primary-300 focus-visible:ring-offset-2",
+                            "dark:text-theme-primary-400 dark:hover:text-theme-primary-500 dark:hover:decoration-theme-primary-500",
                         )}
                     >
                         {t("common.more_details")}

From 432a332e23ea86f2ec9409c916a530f0c3050c34 Mon Sep 17 00:00:00 2001
From: Juan Patricio Marroquin <juan.marroquin1@unmsm.edu.pe>
Date: Fri, 20 Oct 2023 09:55:06 -0500
Subject: [PATCH 11/14] feat: dark mode for balance header mobile

---
 .../BalanceHeader/BalanceHeaderMobile.tsx     | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/resources/js/Components/BalanceHeader/BalanceHeaderMobile.tsx b/resources/js/Components/BalanceHeader/BalanceHeaderMobile.tsx
index 9216586f9..3acc9bcaa 100644
--- a/resources/js/Components/BalanceHeader/BalanceHeaderMobile.tsx
+++ b/resources/js/Components/BalanceHeader/BalanceHeaderMobile.tsx
@@ -30,11 +30,13 @@ export const BalanceHeaderMobile = ({
 
     return (
         <div data-testid="BalanceHeaderMobile">
-            <div className="-mx-6 -mt-6 mb-6 flex bg-theme-secondary-50 px-6 py-2.5">
+            <div className="-mx-6 -mt-6 mb-6 flex bg-theme-secondary-50 px-6 py-2.5 dark:bg-theme-dark-950">
                 <div className="flex w-full items-center justify-between">
                     <div className="text-sm font-medium">
-                        <span className="mr-1 text-theme-secondary-700">{t("common.my_address")}:</span>
-                        <span>
+                        <span className="mr-1 text-theme-secondary-700 dark:text-theme-dark-200">
+                            {t("common.my_address")}:
+                        </span>
+                        <span className="dark:text-theme-dark-50">
                             <TruncateMiddle
                                 length={10}
                                 text={address}
@@ -45,7 +47,7 @@ export const BalanceHeaderMobile = ({
                     <Clipboard text={address}>
                         <button type="button">
                             <Icon
-                                className="text-theme-primary-600"
+                                className="text-theme-primary-600 dark:text-theme-primary-400"
                                 name="Copy"
                                 size="md"
                             />
@@ -56,8 +58,10 @@ export const BalanceHeaderMobile = ({
 
             <div className="flex flex-col items-center space-y-4">
                 <div className="space-y-0.5 text-center font-medium">
-                    <p className="text-sm leading-5.5 text-theme-secondary-500">{t("common.my_balance")}</p>
-                    <p className="text-2xl text-theme-secondary-900">
+                    <p className="text-sm leading-5.5 text-theme-secondary-500 dark:text-theme-dark-300">
+                        {t("common.my_balance")}
+                    </p>
+                    <p className="text-2xl text-theme-secondary-900 dark:text-theme-dark-50">
                         <FormatFiat
                             value={balance}
                             currency={currency}
@@ -76,8 +80,9 @@ export const BalanceHeaderMobile = ({
                 <PortfolioBreakdownLine assets={assets} />
 
                 <div className="mt-2 flex items-center justify-between">
-                    <p className="text-sm font-medium leading-5.5 text-theme-secondary-700">
-                        {t("common.tokens")}: <span className="text-theme-secondary-900">{assets.length}</span>
+                    <p className="text-sm font-medium leading-5.5 text-theme-secondary-700 dark:text-theme-dark-200">
+                        {t("common.tokens")}:{" "}
+                        <span className="text-theme-secondary-900 dark:text-theme-dark-50">{assets.length}</span>
                     </p>
 
                     <LinkButton
@@ -89,6 +94,7 @@ export const BalanceHeaderMobile = ({
                             "transition-default rounded-sm border-b border-transparent text-sm font-medium leading-none text-theme-primary-600 outline-none ",
                             "hover:border-theme-primary-700 hover:text-theme-primary-700",
                             "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-theme-primary-300 focus-visible:ring-offset-2",
+                            "dark:text-theme-primary-400 dark:hover:text-theme-primary-500 dark:hover:decoration-theme-primary-500",
                         )}
                     >
                         {t("common.more_details")}

From 5c5553ac98d69aec83b762d9bf339e841a8f8bba Mon Sep 17 00:00:00 2001
From: Juan Patricio Marroquin <juan.marroquin1@unmsm.edu.pe>
Date: Fri, 20 Oct 2023 09:55:24 -0500
Subject: [PATCH 12/14] feat: dark mode for donut chart

---
 resources/js/Components/PortfolioBreakdown/DonutChart.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/resources/js/Components/PortfolioBreakdown/DonutChart.tsx b/resources/js/Components/PortfolioBreakdown/DonutChart.tsx
index 5282156f2..505592e25 100644
--- a/resources/js/Components/PortfolioBreakdown/DonutChart.tsx
+++ b/resources/js/Components/PortfolioBreakdown/DonutChart.tsx
@@ -103,13 +103,15 @@ export const DonutChart = ({ assets, currency, size = 276 }: DonutChartPropertie
             >
                 <Icon
                     name="Wallet"
-                    className="bg-theme-primary-50 text-theme-primary-600"
+                    className="bg-theme-primary-50 text-theme-primary-600 dark:bg-theme-dark-950 dark:text-theme-primary-400"
                     size="lg"
                 />
 
-                <div className="mt-2 text-sm font-medium text-theme-secondary-700">{t("common.my_balance")}</div>
+                <div className="mt-2 text-sm font-medium text-theme-secondary-700 dark:text-theme-dark-200">
+                    {t("common.my_balance")}
+                </div>
 
-                <div className="text-lg font-medium">
+                <div className="text-lg font-medium dark:text-theme-dark-50">
                     <FormatFiat
                         value={totalValue.toString()}
                         currency={currency}

From 803a67f2751788857f92fa6f2d8c47dc880464d7 Mon Sep 17 00:00:00 2001
From: Juan Patricio Marroquin <juan.marroquin1@unmsm.edu.pe>
Date: Fri, 20 Oct 2023 09:55:32 -0500
Subject: [PATCH 13/14] feat: dark mode for donut graph

---
 resources/js/Components/Graphs/DonutGraph/DonutGraph.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/Components/Graphs/DonutGraph/DonutGraph.tsx b/resources/js/Components/Graphs/DonutGraph/DonutGraph.tsx
index f4dd24cd8..9cb3e171b 100644
--- a/resources/js/Components/Graphs/DonutGraph/DonutGraph.tsx
+++ b/resources/js/Components/Graphs/DonutGraph/DonutGraph.tsx
@@ -24,7 +24,7 @@ export const DonutGraph = ({ data, size, renderTooltip, children }: DonutGraphPr
                     {...circleProperties}
                     id={`circleTrackLine__${index}`}
                     data-testid="DonutGraph__item-track-line"
-                    className="stroke-theme-secondary-300"
+                    className="stroke-theme-secondary-300 dark:stroke-theme-dark-700"
                     strokeWidth={2}
                     pointerEvents="none"
                 />
@@ -63,7 +63,7 @@ export const DonutGraph = ({ data, size, renderTooltip, children }: DonutGraphPr
                 width={size}
                 height={size}
                 data-testid="DonutGraph__svg"
-                className="fill-theme-secondary-100"
+                className="fill-theme-secondary-100 dark:fill-theme-dark-950"
             >
                 <>
                     <circle {...backgroundCircle} />

From b84948bb39c9f577e6bbe2851c85a05dcd3c4aad Mon Sep 17 00:00:00 2001
From: Juan Patricio Marroquin <juan.marroquin1@unmsm.edu.pe>
Date: Fri, 20 Oct 2023 09:55:44 -0500
Subject: [PATCH 14/14] feat: dark mode for portfolio breakdown table

---
 .../PortfolioBreakdown/PortfolioBreakdownTable.tsx   | 12 ++++++------
 .../PortfolioBreakdown/PortfolioBreakdownText.tsx    |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/resources/js/Components/PortfolioBreakdown/PortfolioBreakdownTable.tsx b/resources/js/Components/PortfolioBreakdown/PortfolioBreakdownTable.tsx
index 4f67bcd62..48fb5e847 100644
--- a/resources/js/Components/PortfolioBreakdown/PortfolioBreakdownTable.tsx
+++ b/resources/js/Components/PortfolioBreakdown/PortfolioBreakdownTable.tsx
@@ -31,15 +31,15 @@ const PortfolioBreakdownTableItem = ({
             >
                 <div className={`h-8 w-1 ${color}`} />
                 <div className="flex flex-col">
-                    <span className="font-medium">
+                    <span className="font-medium dark:text-theme-dark-50">
                         {asset.symbol}{" "}
-                        <span className="text-theme-secondary-500 sm:hidden">
+                        <span className="text-theme-secondary-500 dark:text-theme-dark-200 sm:hidden">
                             &nbsp;
                             <FormatPercentage value={Number(asset.percentage)} />
                         </span>
                     </span>
                     <span
-                        className="max-w-[8rem] truncate text-sm font-medium text-theme-secondary-500"
+                        className="max-w-[8rem] truncate text-sm font-medium text-theme-secondary-500 dark:text-theme-dark-300"
                         data-testid="PortfolioBreakdownItemAsset"
                     >
                         {asset.name}
@@ -49,7 +49,7 @@ const PortfolioBreakdownTableItem = ({
 
             <TableCell innerClassName="py-2.5 justify-end">
                 <div className="flex flex-col items-end">
-                    <span className="font-medium">
+                    <span className="font-medium dark:text-theme-dark-50">
                         <FormatFiat
                             value={asset.fiat_balance}
                             currency={currency}
@@ -57,7 +57,7 @@ const PortfolioBreakdownTableItem = ({
                     </span>
 
                     {!isOtherGroup(asset) && (
-                        <span className="whitespace-nowrap text-sm font-medium text-theme-secondary-500">
+                        <span className="whitespace-nowrap text-sm font-medium text-theme-secondary-500 dark:text-theme-dark-300">
                             <FormatCrypto
                                 token={{
                                     name: asset.name,
@@ -76,7 +76,7 @@ const PortfolioBreakdownTableItem = ({
                 className="hidden sm:table-cell"
                 innerClassName="justify-end"
             >
-                <span className="font-medium text-theme-secondary-700">
+                <span className="font-medium text-theme-secondary-700 dark:text-theme-dark-200">
                     <FormatPercentage value={Number(asset.percentage)} />
                 </span>
             </TableCell>
diff --git a/resources/js/Components/PortfolioBreakdown/PortfolioBreakdownText.tsx b/resources/js/Components/PortfolioBreakdown/PortfolioBreakdownText.tsx
index 4132cc82e..588298908 100644
--- a/resources/js/Components/PortfolioBreakdown/PortfolioBreakdownText.tsx
+++ b/resources/js/Components/PortfolioBreakdown/PortfolioBreakdownText.tsx
@@ -25,8 +25,8 @@ const PortfolioBreakdownTextItem = ({
         >
             <span className={cn("h-3 w-1", color)} />
 
-            <span className="text-theme-secondary-700">{asset.symbol}</span>
-            <span className="text-theme-secondary-500">
+            <span className="text-theme-secondary-700 dark:text-theme-dark-200">{asset.symbol}</span>
+            <span className="text-theme-secondary-500 dark:text-theme-dark-100">
                 <FormatPercentage value={Number(asset.percentage)} />
             </span>
         </span>