smooth transition for Header and NavBar

theme/components/Input.ts

@@ -3,6 +3,7 @@ import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import type { PartsStyleFunction, SystemStyleObject } from '@chakra-ui/theme-tools';
 import { getColor, mode } from '@chakra-ui/theme-tools';
 import getDefaultFormColors from '../utils/getDefaultFormColors';
+import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
 
 const sizes: Record<string, SystemStyleObject> = {
   md: {
@@ -17,13 +18,15 @@ const sizes: Record<string, SystemStyleObject> = {
 
 const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
   const { theme } = props
-  const { focusColor: fc, errorColor: ec } = getDefaultFormColors(props)
+  const { focusColor: fc, errorColor: ec } = getDefaultFormColors(props);
+  const transitionProps = getDefaultTransitionProps();
 
   return {
     field: {
       border: '2px solid',
       bg: 'inherit',
       borderColor: mode('gray.100', 'whiteAlpha.200')(props),
+      ...transitionProps,
       _hover: {
         borderColor: mode('gray.300', 'whiteAlpha.400')(props),
       },
@@ -51,6 +54,7 @@ const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
       border: '2px solid',
       borderColor: mode('gray.100', 'whiteAlpha.200')(props),
       bg: mode('gray.100', 'whiteAlpha.200')(props),
+      ...transitionProps,
     },
   }
 }

theme/components/Link.ts

 import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import { mode } from '@chakra-ui/theme-tools';
-import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
+import type { SystemStyleFunction, SystemStyleInterpolation } from '@chakra-ui/theme-tools';
+import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
+
+const baseStyle: SystemStyleInterpolation = {
+  ...getDefaultTransitionProps(),
+}
 
 const variantPrimary: SystemStyleFunction = (props) => {
   return {
@@ -32,6 +37,7 @@ const defaultProps = {
 const Link: ComponentStyleConfig = {
   variants,
   defaultProps,
+  baseStyle,
 }
 
 export default Link;

theme/config.ts

@@ -3,6 +3,7 @@ import { type ThemeConfig } from '@chakra-ui/react';
 const config: ThemeConfig = {
   initialColorMode: 'system',
   useSystemColorMode: false,
+  disableTransitionOnChange: false,
 }
 
 export default config;

theme/global.ts

 import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
 import { mode } from '@chakra-ui/theme-tools';
+import getDefaultTransitionProps from './utils/getDefaultTransitionProps';
 
 const global = (props: StyleFunctionProps) => ({
   body: {
     bg: mode('white', 'black')(props),
+    ...getDefaultTransitionProps(),
   },
 })
 

theme/utils/getDefaultTransitionProps.ts

+export default function getDefaultTransitionProps() {
+  return {
+    transitionProperty: 'background-color, color, border-color',
+    transitionDuration: 'normal',
+    transitionTimingFunction: 'ease',
+  }
+}

ui/header/ColorModeToggler.tsx

@@ -27,8 +27,7 @@ export interface ColorModeTogglerProps
 
 export const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref) => {
   const ownProps = omitThemingProps(props);
-  const { toggleColorMode, colorMode } = useColorMode();
-  const [ isOn, setMode ] = React.useState(colorMode === 'light');
+  const { toggleColorMode } = useColorMode();
 
   const {
     state,
@@ -50,16 +49,9 @@ export const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((prop
     transitionDuration: `${ TRANSITION_DURATION }ms`,
   }), [ thumbBg ])
 
-  const handleInputChange = React.useCallback(() => {
-    // was not able to make transition while consuming flag value from chakra's useColorMode hook
-    // that's why there is a local state for toggler and this fancy window.setTimeout
-    setMode((isOn) => !isOn);
-    window.setTimeout(toggleColorMode, TRANSITION_DURATION);
-  }, [ toggleColorMode ]);
-
   return (
     <chakra.label
-      { ...getRootProps({ onChange: handleInputChange }) }
+      { ...getRootProps({ onChange: toggleColorMode }) }
       className={ styles.root }
     >
       <input className={ styles.input } { ...getInputProps({}, ref) }/>
@@ -71,7 +63,7 @@ export const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((prop
         <MoonIcon className={ styles.nightIcon } boxSize={ 4 } color={ useColorModeValue('blue.600', 'white') }/>
         <chakra.div
           className={ styles.thumb }
-          data-checked={ dataAttr(isOn) }
+          data-checked={ dataAttr(state.isChecked) }
           data-hover={ dataAttr(state.isHovered) }
           __css={ thumbStyles }
         />

ui/navigation/NavFooter.tsx

@@ -6,6 +6,7 @@ import ghIcon from '../../icons/social/git.svg';
 import twIcon from '../../icons/social/tweet.svg';
 import tgIcon from '../../icons/social/telega.svg';
 import statsIcon from '../../icons/social/stats.svg';
+import getDefaultTransitionProps from '../../theme/utils/getDefaultTransitionProps';
 
 const SOCIAL_LINKS = [
   { link: '#gh', icon: ghIcon },
@@ -20,12 +21,13 @@ const NavFooter = () => {
       as="footer"
       spacing={ 8 }
       borderTop="1px solid"
-      borderColor={ useColorModeValue('gray.200', 'whiteAlpha.200') }
+      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
       paddingTop={ 8 }
       w="100%"
       alignItems="baseline"
       color="gray.500"
       fontSize="xs"
+      { ...getDefaultTransitionProps() }
     >
       <HStack>
         { SOCIAL_LINKS.map(sl => {

ui/navigation/Navigation.tsx

@@ -8,20 +8,35 @@ import NavFooter from './NavFooter'
 import logoIcon from '../../icons/logo.svg';
 import networksIcon from '../../icons/networks.svg';
 
+import getDefaultTransitionProps from '../../theme/utils/getDefaultTransitionProps';
+
 const Navigation = () => {
   return (
     <VStack
       alignItems="flex-start"
       spacing={ 12 }
       borderRight="1px solid"
-      borderColor={ useColorModeValue('gray.200', 'whiteAlpha.200') }
+      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
       px={ 10 }
       py={ 12 }
       width="300px"
+      { ...getDefaultTransitionProps() }
     >
       <HStack as="header" justifyContent="space-between" w="100%" px={ 4 } mb={ 2 } h={ 10 } alignItems="center">
-        <Icon as={ logoIcon } width="142px" height="26px" color={ useColorModeValue('blue.600', 'white') }/>
-        <Icon as={ networksIcon } width="20px" height="20px" color={ useColorModeValue('gray.500', 'white') }/>
+        <Icon
+          as={ logoIcon }
+          width="142px"
+          height="26px"
+          color={ useColorModeValue('blue.600', 'white') }
+          { ...getDefaultTransitionProps() }
+        />
+        <Icon
+          as={ networksIcon }
+          width="20px"
+          height="20px"
+          color={ useColorModeValue('gray.500', 'white') }
+          { ...getDefaultTransitionProps() }
+        />
       </HStack>
       <MainNavigation/>
       <AccountNavigation/>