feat: add dark theme to contract pages

Author: marslavish

templates/chain-template/components/common/Drawer.tsx

@@ -75,7 +75,7 @@ export const Drawer = ({
         left={direction === 'right' ? 'auto' : '0'}
         right={direction === 'left' ? 'auto' : '0'}
         ref={contentRef}
-        bg="white"
+        bg="$background"
         overflowY="auto"
         overflowX="hidden"
         transform={getTransform()}

templates/chain-template/components/common/Radio/Radio.module.css

@@ -26,3 +26,15 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+.radioDark {
+  border: 1px solid #343c44;
+}
+
+.radioDark:checked {
+  border: 1px solid #ab6fff;
+}
+
+.radioDark:checked::before {
+  background: #ab6fff;
+}

templates/chain-template/components/common/Radio/Radio.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@interchain-ui/react';
+import { Box, useTheme } from '@interchain-ui/react';
 import styles from './Radio.module.css';
 
 type RadioProps = {
@@ -16,6 +16,8 @@ export const Radio = ({
   name,
   onChange,
 }: RadioProps) => {
+  const { theme } = useTheme();
+
   return (
     <Box
       as="label"
@@ -34,7 +36,9 @@ export const Radio = ({
         value={value}
         checked={checked}
         onChange={onChange}
-        className={styles.radio}
+        className={`${styles.radio} ${
+          theme === 'dark' ? styles.radioDark : ''
+        }`}
       />
       {children}
     </Box>

templates/chain-template/components/common/Table.tsx

@@ -1,4 +1,4 @@
-import { Box, BoxProps } from '@interchain-ui/react';
+import { Box, BoxProps, useColorModeValue } from '@interchain-ui/react';
 
 const Table = (props: BoxProps) => {
   return <Box as="table" rawCSS={{ borderSpacing: '0 20px' }} {...props} />;
@@ -16,14 +16,16 @@ const TableRow = ({
   hasHover = false,
   ...props
 }: BoxProps & { hasHover?: boolean }) => {
+  const bgHoverColor = useColorModeValue('$blackAlpha100', '$whiteAlpha100');
+
   return (
     <Box
       as="tr"
       height="38px"
       cursor={hasHover ? 'pointer' : undefined}
       backgroundColor={{
-        base: '$background',
-        hover: hasHover ? '$blackAlpha100' : '$background',
+        base: 'transparent',
+        hover: hasHover ? bgHoverColor : 'transparent',
       }}
       {...props}
     />

templates/chain-template/components/contract/FileUpload.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { Box, Text } from '@interchain-ui/react';
+import { Box, Text, useColorModeValue } from '@interchain-ui/react';
 import { HiOutlineTrash, HiOutlineUpload } from 'react-icons/hi';
 import { useDropzone } from 'react-dropzone';
 
@@ -28,6 +28,8 @@ export const FileUpload = ({ file, setFile }: FileUploadProps) => {
     maxSize: MAX_FILE_SIZE,
   });
 
+  const textColor = useColorModeValue('$purple600', '$purple400');
+
   if (file) {
     return (
       <Box
@@ -92,7 +94,7 @@ export const FileUpload = ({ file, setFile }: FileUploadProps) => {
           >
             <Text
               as="span"
-              color="$purple600"
+              color={textColor}
               fontSize="16px"
               fontWeight="600"
               attributes={{
@@ -127,7 +129,7 @@ export const UploadIcon = () => (
     height="40px"
     borderRadius="$full"
     bg="$purple100"
-    color="$purple600"
+    color={useColorModeValue('$purple600', '$purple400')}
   >
     <HiOutlineUpload size="20px" />
   </Box>

templates/chain-template/components/contract/MyContractsTab.tsx

@@ -33,7 +33,7 @@ export const MyContractsTab = ({ show, switchTab }: MyContractsTabProps) => {
         {!address ? (
           <EmptyState text="Connect wallet to see your previously instantiated contracts." />
         ) : isLoading ? (
-          <Spinner size="$6xl" />
+          <Spinner size="$6xl" color="$blackAlpha600" />
         ) : myContracts.length === 0 ? (
           <EmptyState text="No contracts found" />
         ) : (

templates/chain-template/components/contract/PermissionTag.tsx

@@ -1,4 +1,4 @@
-import { Box, Text } from '@interchain-ui/react';
+import { Box, Text, useColorModeValue } from '@interchain-ui/react';
 import { AccessType } from 'interchain-query/cosmwasm/wasm/v1/types';
 
 type PermissionTagProps = {
@@ -29,7 +29,11 @@ export const PermissionTag = ({ permission }: PermissionTagProps) => {
       bg="$purple200"
       width="$fit"
     >
-      <Text color="$purple600" fontSize="12px" fontWeight="500">
+      <Text
+        color={useColorModeValue('$purple600', '$purple300')}
+        fontSize="12px"
+        fontWeight="500"
+      >
         {renderText()}
       </Text>
     </Box>

templates/chain-template/components/contract/SelectCodeField.tsx

@@ -228,7 +228,9 @@ const FillCodeId = ({
           />
           {codeId.length > 0 && (
             <Box position="absolute" top="10px" right="10px">
-              {status.state === 'loading' && <Spinner size="$xl" />}
+              {status.state === 'loading' && (
+                <Spinner size="$xl" color="$blackAlpha600" />
+              )}
               {status.state === 'success' && (
                 <Icon name="checkboxCircle" color="$green600" size="$xl" />
               )}

templates/chain-template/components/contract/SelectCodeModal.tsx

@@ -97,7 +97,7 @@ export const SelectCodeModal = ({
             {!address ? (
               <EmptyState text="Connect wallet to see your previously stored codes." />
             ) : isLoading ? (
-              <Spinner size="$6xl" />
+              <Spinner size="$6xl" color="$blackAlpha600" />
             ) : storedCodes.length === 0 ? (
               <EmptyState text="No codes found" />
             ) : filteredCodes.length === 0 ? (

templates/chain-template/components/contract/StoredCodesFilter.tsx

@@ -7,6 +7,8 @@ import {
   SelectButton,
   Text,
   TextField,
+  useColorModeValue,
+  useTheme,
 } from '@interchain-ui/react';
 
 import { useDetectBreakpoints } from '@/hooks';
@@ -49,6 +51,7 @@ export const StoredCodesFilter = ({
   const [elemRef, setElemRef] = useState<HTMLDivElement>();
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
+  const { theme } = useTheme();
   const { isMobile } = useDetectBreakpoints();
 
   const permissionOption = permissionOptions.find(
@@ -95,9 +98,11 @@ export const StoredCodesFilter = ({
               flexDirection="column"
               width={`${elemRef?.offsetWidth}px`}
               py="10px"
-              bg="$white"
+              bg="$background"
               borderRadius="4px"
-              boxShadow="0px 4px 20px 0px rgba(0, 0, 0, 0.1)"
+              boxShadow={`0px 4px 20px 0px rgba(${
+                theme === 'light' ? '0,0,0' : '128,128,128'
+              }, 0.1)`}
               maxHeight="220px"
               overflowY="auto"
             >
@@ -136,8 +141,8 @@ const CustomOption = ({
       px="20px"
       cursor="pointer"
       bg={{
-        hover: '$blackAlpha100',
-        base: '$white',
+        hover: useColorModeValue('$blackAlpha100', '$whiteAlpha100'),
+        base: '$background',
       }}
       attributes={{ onClick }}
     >