feat(wallet): update pending styles to complete darkmode support

apps/core/src/components/coin/CoinIcon.tsx

@@ -18,7 +18,7 @@ interface NonIotaCoinProps {
 function NonIotaCoin({ coinType, size = ImageIconSize.Full, rounded }: NonIotaCoinProps) {
     const { data: coinMeta } = useCoinMetadata(coinType);
     return (
-        <div className="flex h-full w-full items-center justify-center rounded-full bg-neutral-96 dark:bg-neutral-92">
+        <div className="flex h-full w-full items-center justify-center rounded-full bg-neutral-96 dark:bg-neutral-12">
             <ImageIcon
                 src={coinMeta?.iconUrl}
                 label={coinMeta?.name || coinType}
@@ -47,7 +47,7 @@ export function CoinIcon({
 
     return coinType === IOTA_TYPE_ARG ? (
         <Component {...coinWrapperProps}>
-            <div className={cx(size, 'text-neutral-10')}>
+            <div className={cx(size, 'text-neutral-10 dark:text-neutral-92')}>
                 <IotaLogoMark className="h-full w-full" />
             </div>
         </Component>

apps/core/src/components/coin/CoinItem.tsx

@@ -39,13 +39,8 @@ export function CoinItem({
     return (
         <Card type={CardType.Default} onClick={onClick}>
             <CardImage type={ImageType.BgTransparent}>
-                <div className="flex h-10 w-10 items-center justify-center rounded-full">
-                    <CoinIcon
-                        coinType={coinType}
-                        rounded
-                        size={ImageIconSize.Small}
-                        hasCoinWrapper
-                    />
+                <div className="flex h-10 w-10 items-center justify-center rounded-full border border-shader-neutral-light-8 text-neutral-10 dark:text-neutral-92">
+                    <CoinIcon coinType={coinType} rounded size={ImageIconSize.Small} />
                 </div>
             </CardImage>
             <CardBody

apps/core/src/components/coin/CoinSelector.tsx

@@ -66,7 +66,7 @@ function CoinSelectOption({
                         hasCoinWrapper={hasCoinWrapper}
                     />
                 </div>
-                <span className="text-body-lg text-neutral-10">
+                <span className="text-body-lg text-neutral-10 dark:text-neutral-92">
                     {isIota ? (coinMeta?.name || '').toUpperCase() : coinMeta?.name || symbol}
                 </span>
             </div>

apps/core/src/components/icon/ImageIcon.tsx

@@ -42,9 +42,8 @@ function FallBackAvatar({ str, rounded, size = ImageIconSize.Large }: FallBackAv
     return (
         <div
             className={cn(
-                'flex items-center justify-center bg-neutral-96 bg-gradient-to-r capitalize text-neutral-10 dark:bg-neutral-92 dark:text-primary-100',
-                { 'rounded-full': rounded, 'rounded-lg': !rounded },
-                size,
+                'flex h-full w-full items-center justify-center bg-neutral-96 bg-gradient-to-r capitalize text-neutral-10 dark:bg-neutral-12 dark:text-neutral-92',
+                { 'rounded-full': rounded },
                 generateTextSize(size),
             )}
         >

apps/wallet/src/ui/app/components/DAppPermissionList.tsx

@@ -20,7 +20,7 @@ export function DAppPermissionList({ permissions }: DAppPermissionListProps) {
             {permissions.map((permissionKey) => (
                 <SummaryListItem
                     key={permissionKey}
-                    icon={<Checkmark className="h-5 w-5 text-neutral-10" />}
+                    icon={<Checkmark className="h-5 w-5 text-neutral-10 dark:text-neutral-92" />}
                     text={PERMISSION_TYPE_TO_TEXT[permissionKey]}
                 />
             ))}

apps/wallet/src/ui/app/components/NoData.tsx

@@ -1,15 +1,19 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { Theme, useTheme } from '@iota/core';
 import NoDataImage from '_assets/images/no_data.svg';
+import NoDataDarkImage from '_assets/images/no_data_darkmode.svg';
 interface NoDataProps {
     message: string;
 }
 
 export function NoData({ message }: NoDataProps) {
+    const { theme } = useTheme();
+
     return (
         <div className="flex h-full flex-col items-center justify-center gap-md text-center">
-            <NoDataImage />
+            {theme === Theme.Dark ? <NoDataDarkImage /> : <NoDataImage />}
             <span className="text-label-lg text-neutral-60">{message}</span>
         </div>
     );

apps/wallet/src/ui/app/components/Overlay.tsx

@@ -15,7 +15,7 @@ interface OverlayProps {
     closeOverlay?: () => void;
     closeIcon?: ReactNode | null;
     setShowModal?: (showModal: boolean) => void;
-    background?: 'bg-neutral-100';
+    background?: 'bg-neutral-100 dark:bg-neutral-6';
     titleCentered?: boolean;
     showBackButton?: boolean;
     onBack?: () => void;
@@ -58,7 +58,7 @@ export function Overlay({
                         testId="overlay-title"
                     />
                 )}
-                <div className="flex w-full flex-1 flex-col overflow-hidden bg-neutral-100 p-md">
+                <div className="flex w-full flex-1 flex-col overflow-hidden bg-neutral-100 p-md dark:bg-neutral-6">
                     {children}
                 </div>
             </div>

apps/wallet/src/ui/app/components/PageTemplate.tsx

@@ -33,7 +33,7 @@ export function PageTemplate({
                     onClose={onClose}
                 />
             )}
-            <div className="w-full flex-1 overflow-y-auto overflow-x-hidden bg-neutral-100 p-md">
+            <div className="w-full flex-1 overflow-y-auto overflow-x-hidden bg-neutral-100 p-md dark:bg-neutral-6">
                 {children}
             </div>
         </div>

apps/wallet/src/ui/app/components/PasswordInputDialog.tsx

@@ -68,7 +68,7 @@ export function PasswordInputDialog({
             {({ isSubmitting, isValid, errors }) => (
                 <Form
                     className={classNames('flex flex-1 flex-col flex-nowrap items-center gap-7.5', {
-                        'bg-white': background,
+                        'bg-neutral-100 dark:bg-neutral-6': background,
                         'px-5 pt-10': spacing,
                     })}
                 >

apps/wallet/src/ui/app/components/SummaryCard.tsx

@@ -13,7 +13,7 @@ export interface SummaryCardProps {
 
 export function SummaryCard({ body, header, footer }: SummaryCardProps) {
     return (
-        <div className="flex w-full flex-col flex-nowrap gap-xs rounded-xl bg-neutral-96 pb-md">
+        <div className="flex w-full flex-col flex-nowrap gap-xs rounded-xl bg-neutral-96 pb-md dark:bg-neutral-12">
             {header ? (
                 <div className="flex h-[56px] items-center">
                     <Title title={header} size={TitleSize.Small} />

apps/wallet/src/ui/app/components/SummaryPanel.tsx

@@ -11,7 +11,7 @@ interface SummaryPanelProps {
 
 export function SummaryPanel({ title, body }: SummaryPanelProps) {
     return (
-        <div className="flex flex-col rounded-xl bg-neutral-96 pb-md">
+        <div className="flex flex-col rounded-xl bg-neutral-96 pb-md dark:bg-neutral-12">
             <div className="flex flex-col gap-y-xs">
                 <div className="py-2.5">
                     <Title size={TitleSize.Small} title={title} />

apps/wallet/src/ui/app/components/accounts/AccountItem.tsx

@@ -67,7 +67,7 @@ function AccountAvatar({ isLocked, icon }: { isLocked?: boolean; icon?: ReactNod
             className={cn(
                 'flex h-10 w-10 items-center justify-center rounded-full [&_svg]:h-5 [&_svg]:w-5 ',
                 isLocked
-                    ? 'bg-neutral-96 [&_svg]:text-neutral-10'
+                    ? 'bg-neutral-96 dark:bg-neutral-12 [&_svg]:text-neutral-10 [&_svg]:dark:text-neutral-92'
                     : 'bg-primary-30 [&_svg]:text-white',
             )}
         >

apps/wallet/src/ui/app/components/accounts/ImportRecoveryPhraseForm.tsx

@@ -124,7 +124,7 @@ export function ImportRecoveryPhraseForm({
                 })}
             </div>
 
-            <div className="sticky bottom-0 left-0 flex flex-col gap-2.5 bg-neutral-100 pt-sm">
+            <div className="sticky bottom-0 left-0 flex flex-col gap-2.5 bg-neutral-100 pt-sm dark:bg-neutral-6">
                 {touchedFields.recoveryPhrase && errors.recoveryPhrase && (
                     <InfoBox
                         type={InfoBoxType.Default}

apps/wallet/src/ui/app/components/error-boundary/index.tsx

@@ -11,7 +11,7 @@ import { useLocation } from 'react-router-dom';
 
 function Fallback({ error }: FallbackProps) {
     return (
-        <div className="flex h-full w-full items-center justify-center p-2">
+        <div className="flex h-full w-full items-center justify-center p-2 [&_div]:w-full">
             <InfoBox
                 title="Something went wrong"
                 supportingText={error?.message ?? 'An error occurred'}

apps/wallet/src/ui/app/components/iota-apps/DisconnectApp.tsx

@@ -103,7 +103,9 @@ function DisconnectApp({
                                 />
                             ) : (
                                 <SummaryListItem
-                                    icon={<CircleEmitter className="h-5 w-5 text-neutral-10" />}
+                                    icon={
+                                        <CircleEmitter className="h-5 w-5 text-neutral-10 dark:text-neutral-92" />
+                                    }
                                     text={
                                         connectedAccounts[0]
                                             ? formatAddress(connectedAccounts[0])

apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx

@@ -54,10 +54,10 @@ interface ListViewProps {
 
 function ListView({ name, icon, description, tags }: ListViewProps) {
     return (
-        <div className="item-center box-border flex gap-sm rounded-2xl bg-neutral-100 p-sm hover:bg-shader-primary-dark-12">
+        <div className="item-center box-border flex gap-sm rounded-2xl bg-neutral-100 p-sm hover:bg-shader-primary-dark-12 dark:bg-neutral-6">
             <ImageIcon src={icon || null} label={name} fallback={name} />
             <div className="flex flex-col justify-center gap-sm">
-                <span className="text-label-md text-neutral-10">{name}</span>
+                <span className="text-label-md text-neutral-10 dark:text-neutral-92">{name}</span>
                 <span className="text-body-sm text-neutral-40">{description}</span>
                 {tags?.length && (
                     <div className="flex flex-wrap gap-xxs">

apps/wallet/src/ui/app/components/iota-apps/IotaAppEmpty.tsx

@@ -9,7 +9,7 @@ const appEmptyStyle = cva(['flex gap-3 p-lg h-28'], {
     variants: {
         displayType: {
             full: 'w-full',
-            card: 'bg-neutral-100 flex flex-col p-lg w-full rounded-2xl h-32 box-border w-full rounded-2xl border border-solid border-shader-primary-dark',
+            card: 'bg-neutral-100 dark:bg-neutral-6 flex flex-col p-lg w-full rounded-2xl h-32 box-border w-full rounded-2xl border border-solid border-shader-primary-dark',
         },
     },
     defaultVariants: {

apps/wallet/src/ui/app/components/ledger/ConnectLedgerModal.tsx

@@ -55,7 +55,7 @@ export function ConnectLedgerModal({ onClose, onConfirm, onError }: ConnectLedge
                             <Link
                                 to="https://support.ledger.com/article/360011633353-zd"
                                 onClick={() => ampli.viewedLedgerTutorial()}
-                                className="text-body-lg text-primary-30 no-underline"
+                                className="text-body-lg text-primary-30 no-underline dark:text-primary-80"
                                 target="_blank"
                                 rel="noreferrer"
                             >
@@ -91,10 +91,11 @@ function LedgerLogo() {
             height="82"
             viewBox="0 0 244 82"
             fill="none"
+            className="text-neutral-10 dark:text-neutral-92"
         >
             <path
                 d="M208.725 76.3995V81.4987H244V58.5003H238.86V76.3995H208.725ZM208.725 0.5V5.59948H238.86V23.4997H244V0.5H208.725ZM190.534 39.9502V28.1006H198.597C202.528 28.1006 203.939 29.4003 203.939 32.9508V35.0504C203.939 38.7002 202.578 39.9502 198.597 39.9502H190.534ZM203.333 42.0498C207.012 41.0999 209.581 37.6994 209.581 33.6503C209.581 31.1005 208.574 28.8001 206.659 26.9498C204.24 24.6493 201.014 23.4997 196.833 23.4997H185.494V58.4991H190.534V44.5499H198.093C201.973 44.5499 203.536 46.1497 203.536 50.1504V58.5003H208.675V50.9503C208.675 45.4503 207.365 43.3507 203.333 42.7505V42.0498ZM160.904 43.1994H176.425V38.5997H160.904V28.0994H177.936V23.4997H155.763V58.4991H178.692V53.8994H160.904V43.1994ZM144.021 45.0497V47.4494C144.021 52.4993 142.157 54.1498 137.471 54.1498H136.363C131.675 54.1498 129.408 52.6493 129.408 45.6995V36.2993C129.408 29.2999 131.776 27.849 136.463 27.849H137.47C142.055 27.849 143.517 29.5491 143.567 34.2493H149.11C148.607 27.3492 143.971 23 137.016 23C133.64 23 130.818 24.0503 128.702 26.0495C125.527 28.9998 123.763 34 123.763 40.9994C123.763 47.7495 125.276 52.7497 128.399 55.8489C130.515 57.8989 133.439 58.9988 136.311 58.9988C139.335 58.9988 142.107 57.7984 143.517 55.1991H144.222V58.4991H148.858V40.45H135.201V45.0497H144.021ZM99.5765 28.0994H105.07C110.261 28.0994 113.083 29.3991 113.083 36.3997V45.5991C113.083 52.5985 110.261 53.8994 105.07 53.8994H99.5765V28.0994ZM105.522 58.5003C115.148 58.5003 118.725 51.2504 118.725 41.0006C118.725 30.6007 114.895 23.5009 105.421 23.5009H94.536V58.5003H105.522ZM70.1978 43.1994H85.7189V38.5997H70.1978V28.0994H87.23V23.4997H65.0566V58.4991H87.9862V53.8994H70.1978V43.1994ZM40.4664 23.4997H35.3268V58.4991H58.5074V53.8994H40.4664V23.4997ZM0.000976562 58.5003V81.5H35.2756V76.3995H5.14057V58.5003H0.000976562ZM0.000976562 0.5V23.4997H5.14057V5.59948H35.2756V0.5H0.000976562Z"
-                fill="#171D26"
+                fill="currentColor"
             />
         </svg>
     );

apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx

@@ -121,7 +121,7 @@ function MenuList() {
                     {MENU_ITEMS.map((item, index) => (
                         <Card key={index} type={CardType.Default} onClick={item.onClick}>
                             <CardImage type={ImageType.BgSolid}>
-                                <div className="flex h-10 w-10 items-center justify-center rounded-full  text-neutral-10 [&_svg]:h-5 [&_svg]:w-5">
+                                <div className="flex h-10 w-10 items-center justify-center rounded-full  text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5">
                                     <span className="text-2xl">{item.icon}</span>
                                 </div>
                             </CardImage>

apps/wallet/src/ui/app/components/menu/content/index.tsx

@@ -42,7 +42,7 @@ function MenuContent() {
     }
 
     return (
-        <div className="absolute inset-0 z-50 flex flex-col justify-items-stretch overflow-y-auto rounded-t-xl bg-white px-2.5 pb-8">
+        <div className="absolute inset-0 z-50 flex flex-col justify-items-stretch overflow-y-auto rounded-t-xl bg-neutral-100 px-2.5 pb-8 dark:bg-neutral-6">
             <ErrorBoundary>
                 <MainLocationContext.Provider value={mainLocation}>
                     <Routes location={menuUrl || ''}>

apps/wallet/src/ui/app/components/navigation/index.tsx

@@ -48,7 +48,7 @@ export function Navigation() {
     }
 
     return (
-        <div className="sticky bottom-0 w-full shrink-0 border-b-0 bg-white">
+        <div className="sticky bottom-0 w-full shrink-0 border-b-0 bg-neutral-100 dark:bg-neutral-6">
             <Navbar items={NAVBAR_ITEMS} activeId={activeId} onClickItem={handleItemClick} />
         </div>
     );

apps/wallet/src/ui/app/components/nft-display/index.tsx

@@ -65,7 +65,11 @@ export function NFTDisplayCard({
                             onIconClick={onIconClick}
                         />
                     )}
-                    {wideView && <span className="text-title-lg text-neutral-10">{nftName}</span>}
+                    {wideView && (
+                        <span className="text-title-lg text-neutral-10 dark:text-neutral-92">
+                            {nftName}
+                        </span>
+                    )}
                 </div>
             </Loading>
         </div>

apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx

@@ -28,7 +28,7 @@ export function TxnAmount({ amount, coinType, subtitle, approximation }: TxnAmou
     return Number(amount) !== 0 ? (
         <Card type={CardType.Filled}>
             <CardImage type={ImageType.BgSolid}>
-                <div className="h-10 w-10 items-center justify-center rounded-full border border-shader-neutral-light-8 text-neutral-10">
+                <div className="h-10 w-10 items-center justify-center rounded-full border border-shader-neutral-light-8 text-neutral-10 dark:text-neutral-92">
                     <CoinIcon coinType={coinType} size={ImageIconSize.Full} rounded />
                 </div>
             </CardImage>

apps/wallet/src/ui/app/components/user-approve-container/index.tsx

@@ -71,7 +71,7 @@ export function UserApproveContainer({
             </div>
             <div className="sticky bottom-0 z-10">
                 <div
-                    className={cn('flex items-center bg-white p-md pt-sm', {
+                    className={cn('flex items-center bg-neutral-100 p-md pt-sm dark:bg-neutral-6', {
                         'flex-row-reverse': isWarning,
                     })}
                 >

apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx

@@ -48,7 +48,7 @@ export function BackupMnemonicPage() {
             <Loading loading={isPending}>
                 <div className="flex h-full flex-col items-center justify-between">
                     <div className="flex flex-col gap-md">
-                        <h3 className="text-center text-headline-lg text-neutral-10">
+                        <h3 className="text-center text-headline-lg text-neutral-10 dark:text-neutral-92">
                             Wallet Created Successfully!
                         </h3>
                         <InfoBox

apps/wallet/src/ui/app/pages/accounts/ImportLedgerAccountsPage.tsx

@@ -142,7 +142,9 @@ function LedgerViewLoading() {
     return (
         <div className="flex h-full w-full flex-row items-center justify-center gap-x-sm">
             <LoadingIndicator />
-            <span className="text-title-lg text-neutral-10">Looking for Accounts...</span>
+            <span className="text-title-lg text-neutral-10 dark:text-neutral-92">
+                Looking for Accounts...
+            </span>
         </div>
     );
 }
@@ -151,7 +153,9 @@ function LedgerViewAllAccountsImported() {
     return (
         <div className="flex h-full w-full flex-row items-center justify-center gap-x-sm [&_svg]:h-6 [&_svg]:w-6">
             <CheckmarkFilled className="text-primary-30" />
-            <span className="text-title-lg text-neutral-10">Imported all Ledger Accounts</span>
+            <span className="text-title-lg text-neutral-10 dark:text-neutral-92">
+                Imported all Ledger Accounts
+            </span>
         </div>
     );
 }

apps/wallet/src/ui/app/pages/accounts/ImportPassphrasePage.tsx

@@ -36,7 +36,7 @@ export function ImportPassphrasePage() {
         );
     }
 
-    const BUTTON_ICON_CLASSES = 'w-5 h-5 text-neutral-10';
+    const BUTTON_ICON_CLASSES = 'w-5 h-5 text-neutral-10 dark:text-neutral-92';
     return (
         <PageTemplate title="Import Mnemonic" isTitleCentered showBackButton>
             <div className="flex h-full flex-col gap-md">

apps/wallet/src/ui/app/pages/accounts/WelcomePage.tsx

@@ -22,12 +22,14 @@ export function WelcomePage() {
 
     return (
         <Loading loading={isInitializedLoading || isFullscreenGuardLoading}>
-            <div className="flex h-full w-full flex-col items-center justify-between bg-white px-md py-2xl shadow-wallet-content">
+            <div className="flex h-full w-full flex-col items-center justify-between bg-neutral-100 px-md py-2xl shadow-wallet-content dark:bg-neutral-6">
                 <IotaLogoWeb width={130} height={32} />
                 <div className="flex flex-col items-center gap-8 text-center">
                     <div className="flex flex-col items-center gap-4">
                         <span className="text-headline-sm text-neutral-40">Welcome to</span>
-                        <h1 className="text-display-lg text-neutral-10">IOTA Wallet</h1>
+                        <h1 className="text-display-lg text-neutral-10 dark:text-neutral-92">
+                            IOTA Wallet
+                        </h1>
                         <span className="text-title-lg text-neutral-40">
                             Your Gateway to the IOTA Ecosystem
                         </span>

apps/wallet/src/ui/app/pages/accounts/forgot-password/RecoverManyPage.tsx

@@ -125,7 +125,7 @@ export function RecoverManyPage() {
                         }
                         setRecoverInfo(null);
                     }}
-                    background="bg-neutral-100"
+                    background="bg-neutral-100 dark:bg-neutral-6"
                 >
                     <div className="flex h-full w-full flex-col flex-nowrap gap-4 text-center">
                         {recoverInfo?.type === AccountSourceType.Mnemonic ? (