Merge pull request #44 from blockscout/dark-theme-2

dark mode: part 2

theme/components/Table.ts

@@ -10,7 +10,7 @@ const variantSimple: PartsStyleFunction<typeof parts> = (props) => {
       color: mode('gray.500', 'gray.50')(props),
     },
     thead: {
-      backgroundColor: mode('gray.50', 'whiteAlpha.100')(props),
+      backgroundColor: mode('gray.50', 'whiteAlpha.200')(props),
     },
     td: {
       borderColor: mode('gray.200', 'whiteAlpha.200')(props),

theme/components/Tag.ts

+import type { tagAnatomy as parts } from '@chakra-ui/anatomy';
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { mode } from '@chakra-ui/theme-tools';
+import type { PartsStyleFunction } from '@chakra-ui/theme-tools';
+
+const variantGray: PartsStyleFunction<typeof parts> = (props) => {
+  return {
+    container: {
+      bg: mode('gray.200', 'gray.600')(props),
+      color: mode('gray.600', 'gray.50')(props),
+    },
+  }
+}
+
+const variants = {
+  gray: variantGray,
+}
 
 const Tag: ComponentStyleConfig = {
   baseStyle: {
@@ -9,14 +25,7 @@ const Tag: ComponentStyleConfig = {
       borderRadius: 'md',
     },
   },
-  variants: {
-    gray: {
-      container: {
-        bg: 'gray.200',
-        color: 'gray.600',
-      },
-    },
-  },
+  variants,
 }
 
 export default Tag;

ui/header/ColorModeToggler.module.css

+.root {
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    line-height: 0;
+}
+
+.track {
+    width: 72px;
+    height: 32px;
+    background-color: rgba(16, 17, 18, 0.06);
+    border-radius: 16px;
+    display: inline-flex;
+    flex-shrink: 0;
+    justify-content: space-between;
+    box-sizing: content-box;
+    cursor: pointer;
+}
+
+.input {
+    border: 0px;
+    clip: rect(0px, 0px, 0px, 0px);
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    padding: 0px;
+    overflow: hidden;
+    white-space: nowrap;
+    position: absolute;
+}
+
+.thumb {
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    width: 24px;
+    height: 24px;
+    border-radius: 12px;
+    position: absolute;
+    transform: translate(44px, 4px);
+}
+
+.thumb[data-checked] {
+    transform: translate(4px, 4px);
+}
+
+.nightIcon {
+    margin: 8px;
+    z-index: 5;
+}
+
+.dayIcon {
+    margin: 8px;
+    z-index: 5;
+}
\ No newline at end of file

ui/header/ColorModeToggler.tsx

+import type { UseCheckboxProps } from '@chakra-ui/checkbox';
+import { useCheckbox } from '@chakra-ui/checkbox'
+import type {
+  SystemStyleObject,
+  ThemingProps,
+  HTMLChakraProps,
+} from '@chakra-ui/system';
+import {
+  chakra,
+  forwardRef,
+  omitThemingProps,
+} from '@chakra-ui/system'
+import { dataAttr, __DEV__ } from '@chakra-ui/utils'
+import * as React from 'react'
+import { SunIcon, MoonIcon } from '@chakra-ui/icons'
+import { useColorMode, useColorModeValue } from '@chakra-ui/react';
+
+import styles from './ColorModeToggler.module.css';
+
+export interface ColorModeTogglerProps
+  extends Omit<UseCheckboxProps, 'isIndeterminate'>,
+  Omit<HTMLChakraProps<'label'>, keyof UseCheckboxProps>,
+  ThemingProps<'Switch'> {
+}
+
+export const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref) => {
+  const ownProps = omitThemingProps(props);
+  const { toggleColorMode } = useColorMode();
+
+  const {
+    state,
+    getInputProps,
+    getCheckboxProps,
+    getRootProps,
+  } = useCheckbox(ownProps);
+
+  const trackStyles: SystemStyleObject = {
+    bg: useColorModeValue('blackAlpha.100', 'whiteAlpha.200'),
+  }
+
+  const thumbStyles: SystemStyleObject = {
+    bg: useColorModeValue('white', 'black'),
+  }
+
+  return (
+    <chakra.label
+      { ...getRootProps({ onChange: toggleColorMode }) }
+      className={ styles.root }
+    >
+      <input className={ styles.input } { ...getInputProps({}, ref) }/>
+      <chakra.div
+        { ...getCheckboxProps() }
+        className={ styles.track }
+        __css={ trackStyles }
+      >
+        <MoonIcon className={ styles.nightIcon } boxSize={ 4 } color={ useColorModeValue('blue.600', 'white') }/>
+        <chakra.div
+          className={ styles.thumb }
+          data-checked={ dataAttr(state.isChecked) }
+          data-hover={ dataAttr(state.isHovered) }
+          __css={ thumbStyles }
+        />
+        <SunIcon className={ styles.dayIcon } boxSize={ 4 } color={ useColorModeValue('gray.500', 'blue.600') }/>
+      </chakra.div>
+    </chakra.label>
+  )
+})
+
+if (__DEV__) {
+  ColorModeToggler.displayName = 'ColorModeToggler'
+}

ui/header/Header.tsx

 import React from 'react';
-import { HStack, InputGroup, Input, InputLeftAddon, InputLeftElement, Center, Switch, useColorMode, useColorModeValue } from '@chakra-ui/react';
+import { HStack, InputGroup, Input, InputLeftAddon, InputLeftElement, Center, useColorModeValue } from '@chakra-ui/react';
 import { SearchIcon } from '@chakra-ui/icons'
 import Identicon from 'react-identicons';
+import { ColorModeToggler } from './ColorModeToggler';
 
 import styles from './Header.module.css';
 
 const Header = () => {
-  const { toggleColorMode } = useColorMode();
-
   return (
     <HStack
       as="header"
@@ -25,7 +24,7 @@ const Header = () => {
         </InputLeftElement>
         <Input paddingInlineStart="50px" placeholder="Search by addresses / transactions /block/ token ... "/>
       </InputGroup>
-      <Switch size="lg" onChange={ toggleColorMode }/>
+      <ColorModeToggler/>
       <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 }/>

ui/navigation/useColors.ts

@@ -5,11 +5,11 @@ export default function useColors() {
     text: {
       'default': useColorModeValue('gray.600', 'gray.300'),
       active: useColorModeValue('blue.700', 'gray.300'),
-      hover: useColorModeValue('blue.400', 'gray.100'),
+      hover: 'blue.400',
     },
     bg: {
       'default': 'transparent',
-      active: useColorModeValue('blue.50', 'gray.900'),
+      active: useColorModeValue('blue.50', 'whiteAlpha.200'),
     },
   }
 }