feat: add dark theme styles

hyperweb-io · Sep 22, 2024 · 56bd0cb · 56bd0cb
1 parent 40df1d9
commit 56bd0cb
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 17 deletions.
diff --git a/examples/chain-template/components/common/Radio/Radio.module.css b/examples/chain-template/components/common/Radio/Radio.module.css
@@ -16,7 +16,7 @@
 }
 
 .radioDark {
-  border-color: #323a42;
+  border-color: #6d7987;
 }
 
 .radioDark:checked {

diff --git a/examples/chain-template/components/common/Radio/Radio.tsx b/examples/chain-template/components/common/Radio/Radio.tsx
@@ -19,7 +19,10 @@ export const Radio = ({
   onChange,
 }: RadioProps) => {
   const { theme } = useTheme();
-  const color = checked ? '$purple600' : '$blackAlpha600';
+
+  const checkedColor = theme === 'light' ? '$purple600' : '$purple400';
+  const textColor = checked ? checkedColor : '$blackAlpha600';
+  const borderColor = checked ? checkedColor : '$blackAlpha200';
 
   return (
     <Box
@@ -37,7 +40,7 @@ export const Radio = ({
       borderRadius="4px"
       borderWidth="1px"
       borderStyle="solid"
-      borderColor={checked ? '$purple600' : '$blackAlpha200'}
+      borderColor={borderColor}
       padding="10px"
     >
       <input
@@ -55,14 +58,14 @@ export const Radio = ({
           right: '6px',
         }}
       />
-      <Box color={color}>
+      <Box color={textColor}>
         {typeof icon === 'string' ? (
-          <Icon name={icon as IconName} color={color} size="$lg" />
+          <Icon name={icon as IconName} color={textColor} size="$lg" />
         ) : (
           icon
         )}
       </Box>
-      <Text color={color} fontSize="14px" fontWeight="500">
+      <Text color={textColor} fontSize="14px" fontWeight="500">
         {children}
       </Text>
     </Box>

diff --git a/examples/chain-template/components/contract/BackButton.tsx b/examples/chain-template/components/contract/BackButton.tsx
@@ -10,6 +10,7 @@ export const BackButton = ({ onClick }: { onClick: () => void }) => {
       attributes={{ onClick }}
     >
       <Icon
+        color="$text"
         name="arrowRightLine"
         attributes={{ transform: 'rotate(180deg)' }}
       />

diff --git a/examples/chain-template/components/contract/InstantiateContract.tsx b/examples/chain-template/components/contract/InstantiateContract.tsx
@@ -114,6 +114,8 @@ export const InstantiateContract = ({
     !canInstantiate ||
     !!adminInputErr;
 
+  const { isMobile } = useDetectBreakpoints();
+
   if (txResult) {
     const infoItems: TxInfoItem[] = [
       {
@@ -174,8 +176,6 @@ export const InstantiateContract = ({
     );
   }
 
-  const { isMobile } = useDetectBreakpoints();
-
   return (
     <Box
       display={show ? 'flex' : 'none'}

diff --git a/examples/chain-template/components/contract/WasmFileUploader.tsx b/examples/chain-template/components/contract/WasmFileUploader.tsx
@@ -1,30 +1,38 @@
 import Image from 'next/image';
 import { useCallback, useMemo } from 'react';
-import { Box, Text } from '@interchain-ui/react';
+import {
+  Box,
+  Text,
+  useTheme,
+  useColorModeValue,
+  ThemeVariant,
+} from '@interchain-ui/react';
 import { HiOutlineTrash } from 'react-icons/hi';
 import { useDropzone } from 'react-dropzone';
 
 import { bytesToKb } from '@/utils';
 
 const MAX_FILE_SIZE = 800_000;
 
-const defaultFileInfo = {
+const getDefaultFileInfo = (theme: ThemeVariant) => ({
   image: {
-    src: '/images/upload.svg',
+    src: theme === 'light' ? '/images/upload.svg' : '/images/upload-dark.svg',
     alt: 'upload',
     width: 80,
     height: 48,
   },
   title: 'Upload or drag .wasm file here',
   description: `Max file size: ${bytesToKb(MAX_FILE_SIZE)}KB`,
-};
+});
 
 type WasmFileUploaderProps = {
   file: File | null;
   setFile: (file: File | null) => void;
 };
 
 export const WasmFileUploader = ({ file, setFile }: WasmFileUploaderProps) => {
+  const { theme } = useTheme();
+
   const onDrop = useCallback(
     (files: File[]) => {
       setFile(files[0]);
@@ -33,19 +41,22 @@ export const WasmFileUploader = ({ file, setFile }: WasmFileUploaderProps) => {
   );
 
   const fileInfo = useMemo(() => {
-    if (!file) return defaultFileInfo;
+    if (!file) return getDefaultFileInfo(theme);
 
     return {
       image: {
-        src: '/images/contract-file.svg',
+        src:
+          theme === 'light'
+            ? '/images/contract-file.svg'
+            : '/images/contract-file-dark.svg',
         alt: 'contract-file',
         width: 40,
         height: 54,
       },
       title: file.name,
       description: `File size: ${bytesToKb(file.size)}KB`,
     };
-  }, [file]);
+  }, [file, theme]);
 
   const { getRootProps, getInputProps } = useDropzone({
     onDrop,
@@ -63,8 +74,8 @@ export const WasmFileUploader = ({ file, setFile }: WasmFileUploaderProps) => {
         borderRadius="8px"
         borderWidth="1px"
         borderStyle={file ? 'none' : 'dashed'}
-        borderColor="$purple600"
-        bg="$purple50"
+        borderColor={useColorModeValue('$purple600', '$purple400')}
+        bg={useColorModeValue('$purple50', '$purple900')}
         cursor={file ? 'auto' : 'pointer'}
         height="206px"
         position="relative"

diff --git a/examples/chain-template/config/theme.ts b/examples/chain-template/config/theme.ts
@@ -6,6 +6,7 @@ export const CustomTheme: Record<ThemeVariant, string> = {
 };
 
 export const lightColors: ThemeDef['vars']['colors'] = {
+  purple900: '#322F3C',
   purple600: '#7310FF',
   purple400: '#AB6FFF',
   purple200: '#E5D4FB',
@@ -42,6 +43,7 @@ export const lightColors: ThemeDef['vars']['colors'] = {
 };
 
 export const darkColors: ThemeDef['vars']['colors'] = {
+  purple900: '#322F3C',
   purple600: '#9042FE',
   purple400: '#AB6FFF',
   purple200: '#4D198F',

diff --git a/examples/chain-template/public/images/contract-file-dark.svg b/examples/chain-template/public/images/contract-file-dark.svg
diff --git a/examples/chain-template/public/images/upload-dark.svg b/examples/chain-template/public/images/upload-dark.svg