path color mode sync by manually updating chakras context in order to keep using useColorModeValue from chakra

Author: pettinarip

src/components/ActionCard.tsx

@@ -8,14 +8,13 @@ import {
   LinkBox,
   type LinkBoxProps,
   LinkOverlay,
+  useColorModeValue,
 } from "@chakra-ui/react"
 
 import { Image } from "@/components/Image"
 import { BaseLink } from "@/components/Link"
 import Text from "@/components/OldText"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
-
 const linkBoxFocusStyles: BoxProps = {
   borderRadius: "base",
   boxShadow: "0px 8px 17px rgba(0, 0, 0, 0.15)",

src/components/Nav/useNav.ts

@@ -19,7 +19,7 @@ import {
   BsUiChecksGrid,
 } from "react-icons/bs"
 import { PiFlask, PiUsersFourLight } from "react-icons/pi"
-import { useDisclosure } from "@chakra-ui/react"
+import { useColorMode, useDisclosure } from "@chakra-ui/react"
 
 import { EthereumIcon } from "@/components/icons/EthereumIcon"
 
@@ -36,6 +36,7 @@ export const useNav = () => {
   const { isOpen, onToggle } = useDisclosure()
   const { t } = useTranslation("common")
   const { theme, setTheme } = useTheme()
+  const { setColorMode } = useColorMode()
 
   const colorToggleEvent = useColorModeValue("dark mode", "light mode") // This will be inverted as the state is changing
 
@@ -477,6 +478,7 @@ export const useNav = () => {
 
   const toggleColorMode = () => {
     setTheme(theme === "dark" ? "light" : "dark")
+    setColorMode(theme === "dark" ? "light" : "dark")
     trackCustomEvent({
       eventCategory: "nav bar",
       eventAction: "click",