inputs and table styles

theme/components/Input.ts

@@ -22,8 +22,8 @@ const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
   return {
     field: {
       border: '2px solid',
-      borderColor: 'inherit',
       bg: 'inherit',
+      borderColor: mode('gray.100', 'whiteAlpha.200')(props),
       _hover: {
         borderColor: mode('gray.300', 'whiteAlpha.400')(props),
       },
@@ -47,8 +47,8 @@ const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
     },
     addon: {
       border: '2px solid',
-      borderColor: mode('inherit', 'whiteAlpha.50')(props),
-      bg: mode('gray.100', 'whiteAlpha.300')(props),
+      borderColor: mode('gray.100', 'whiteAlpha.200')(props),
+      bg: mode('gray.100', 'whiteAlpha.200')(props),
     },
   }
 }

theme/components/Table.ts

+import type { tableAnatomy as parts } from '@chakra-ui/anatomy';
 import type { ComponentMultiStyleConfig } from '@chakra-ui/theme';
+import { mode } from '@chakra-ui/theme-tools';
+import type { PartsStyleFunction } from '@chakra-ui/theme-tools';
+
+const variantSimple: PartsStyleFunction<typeof parts> = (props) => {
+  return {
+    th: {
+      border: 0,
+      color: mode('gray.500', 'gray.50')(props),
+    },
+    thead: {
+      backgroundColor: mode('gray.50', 'whiteAlpha.100')(props),
+    },
+    td: {
+      borderColor: mode('gray.200', 'whiteAlpha.200')(props),
+    },
+  }
+}
 
 const Table: ComponentMultiStyleConfig = {
-  parts: [ 'th', 'td', 'table' ],
+  parts: [ 'th', 'td', 'table', 'thead' ],
   baseStyle: {
     thead: {
       backgroundColor: 'gray.50',
@@ -38,14 +56,7 @@ const Table: ComponentMultiStyleConfig = {
     },
   },
   variants: {
-    simple: {
-      th: {
-        border: 0,
-      },
-      td: {
-        borderColor: 'gray.200',
-      },
-    },
+    simple: variantSimple,
   },
 }
 

ui/header/Header.tsx

 import React from 'react';
-import { HStack, InputGroup, Input, InputLeftAddon, InputLeftElement, Center, Switch, useColorMode } from '@chakra-ui/react';
+import { HStack, InputGroup, Input, InputLeftAddon, InputLeftElement, Center, Switch, useColorMode, useColorModeValue } from '@chakra-ui/react';
 import { SearchIcon } from '@chakra-ui/icons'
 import Identicon from 'react-identicons';
 
@@ -26,7 +26,7 @@ const Header = () => {
         <Input paddingInlineStart="50px" placeholder="Search by addresses / transactions /block/ token ... "/>
       </InputGroup>
       <Switch size="lg" onChange={ toggleColorMode }/>
-      <Center minWidth="50px" width="50px" height="50px" bg="blackAlpha.100" borderRadius="50%" overflow="hidden">
+      <Center minWidth="50px" width="50px" height="50px" bg={ useColorModeValue('blackAlpha.100', 'white') } borderRadius="50%" overflow="hidden">
         { /* the displayed size is 40px, but we need to generate x2 for retina displays */ }
         <Identicon className={ styles.identicon } string="randomness" size={ 80 }/>
       </Center>