address tokens dark mode

ui/address/AddressTokens.pw.tsx

@@ -22,7 +22,7 @@ const nextPageParams = {
   value: 1,
 };
 
-test('erc20 +@mobile', async({ mount, page }) => {
+test('erc20 +@mobile +@dark-mode', async({ mount, page }) => {
   const hooksConfig = {
     router: {
       query: { id: ADDRESS_HASH, tab: 'tokens_erc20' },
@@ -59,7 +59,7 @@ test('erc20 +@mobile', async({ mount, page }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('erc721 +@mobile', async({ mount, page }) => {
+test('erc721 +@mobile +@dark-mode', async({ mount, page }) => {
   const hooksConfig = {
     router: {
       query: { id: ADDRESS_HASH, tab: 'tokens_erc721' },
@@ -96,7 +96,7 @@ test('erc721 +@mobile', async({ mount, page }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('erc1155 +@mobile', async({ mount, page }) => {
+test('erc1155 +@mobile +@dark-mode', async({ mount, page }) => {
   const hooksConfig = {
     router: {
       query: { id: ADDRESS_HASH, tab: 'tokens_erc1155' },

ui/address/tokens/NFTItem.tsx

-import { Box, Center, Flex, Icon, Link, Text } from '@chakra-ui/react';
+import { Box, Center, Flex, Icon, Link, Text, useColorModeValue } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -24,7 +24,7 @@ const NFTItem = ({ token, token_id: tokenId }: Props) => {
       w="210px"
       h="272px"
       border="1px solid"
-      borderColor="blackAlpha.100"
+      borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
       borderRadius="12px"
       p="10px"
       _hover={{ boxShadow: 'md' }}
@@ -34,8 +34,8 @@ const NFTItem = ({ token, token_id: tokenId }: Props) => {
       onClick={ onItemClick }
       cursor="pointer"
     >
-      <Center w="182px" h="182px" bg="blackAlpha.50" mb="18px" borderRadius="12px">
-        <Icon as={ NFTIcon } boxSize="112px" color="blackAlpha.500"/>
+      <Center w="182px" h="182px" bg={ useColorModeValue('blackAlpha.50', 'whiteAlpha.50') } mb="18px" borderRadius="12px">
+        <Icon as={ NFTIcon } boxSize="112px" color={ useColorModeValue('blackAlpha.500', 'whiteAlpha.500') }/>
       </Center>
       { tokenId && (
         <Flex mb={ 2 } ml={ 1 }>