Merge pull request #13490 from ethereum/patch-color-mode-sync

Patch color mode sync

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/CardList.tsx

@@ -8,13 +8,13 @@ import {
   LinkBox,
   LinkOverlay,
   type StackProps,
+  useColorModeValue,
 } from "@chakra-ui/react"
 
 import { BaseLink } from "@/components/Link"
 
 import * as url from "@/lib/utils/url"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
 export type CardListItem = {

src/components/CodeModal.tsx

@@ -6,10 +6,9 @@ import {
   ModalContent,
   ModalHeader,
   ModalOverlay,
+  useColorModeValue,
 } from "@chakra-ui/react"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
-
 type CodeModalProps = {
   title: string
   children: ReactNode

src/components/Codeblock.tsx

@@ -6,15 +6,13 @@ import Highlight, {
   PrismTheme,
 } from "prism-react-renderer"
 import Prism from "prism-react-renderer/prism"
-import { Box, BoxProps, Flex } from "@chakra-ui/react"
+import { Box, BoxProps, Flex, useColorModeValue } from "@chakra-ui/react"
 
+// https://github.com/FormidableLabs/prism-react-renderer/tree/master#custom-language-support
 import CopyToClipboard from "@/components/CopyToClipboard"
 import Emoji from "@/components/Emoji"
 
 import { LINES_BEFORE_COLLAPSABLE } from "@/lib/constants"
-
-// https://github.com/FormidableLabs/prism-react-renderer/tree/master#custom-language-support
-import useColorModeValue from "@/hooks/useColorModeValue"
 ;(typeof global !== "undefined" ? global : window).Prism = Prism
 require("prismjs/components/prism-solidity")
 

src/components/DataProductCard.tsx

@@ -1,13 +1,18 @@
 import React from "react"
 import { StaticImageData } from "next/image"
-import { Box, Flex, Heading, LinkBox, LinkOverlay } from "@chakra-ui/react"
+import {
+  Box,
+  Flex,
+  Heading,
+  LinkBox,
+  LinkOverlay,
+  useColorModeValue,
+} from "@chakra-ui/react"
 
 import { Image } from "@/components/Image"
 
 import Text from "./OldText"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
-
 export interface DataRow {
   logo: StaticImageData
   coin: string

src/components/EnergyConsumptionChart/index.tsx

@@ -12,14 +12,19 @@ import ChartDataLabels from "chartjs-plugin-datalabels"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { Bar } from "react-chartjs-2"
-import { Box, Center, Text, useBreakpointValue } from "@chakra-ui/react"
+import {
+  Box,
+  Center,
+  Text,
+  useBreakpointValue,
+  useColorModeValue,
+} from "@chakra-ui/react"
 
 import type { Lang } from "@/lib/types"
 
 import { wrapLabel } from "@/lib/utils/charts"
 import { isLangRightToLeft } from "@/lib/utils/translations"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
 import { useIsClient } from "@/hooks/useIsClient"
 
 // ChartDataLabels required to display y-labels on top of bars

src/components/EthVideo.tsx

@@ -1,6 +1,5 @@
 import { Box } from "@chakra-ui/react"
-
-import useColorModeValue from "@/hooks/useColorModeValue"
+import { useColorModeValue } from "@chakra-ui/react"
 
 const EthVideo = () => {
   const src = useColorModeValue(

src/components/Leaderboard.tsx

@@ -7,6 +7,7 @@ import {
   LinkOverlay,
   List,
   ListItem,
+  useColorModeValue,
   VisuallyHidden,
 } from "@chakra-ui/react"
 
@@ -15,7 +16,6 @@ import { BaseLink } from "@/components/Link"
 
 import { GITHUB_URL } from "@/lib/constants"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
 type Person = {

src/components/Logo.tsx

@@ -1,8 +1,8 @@
 import { useTranslation } from "next-i18next"
+import { useColorModeValue } from "@chakra-ui/react"
 
 import { Image } from "@/components/Image"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
 import darkImage from "@/public/images/ef-logo.png"
 import lightImage from "@/public/images/ef-logo-white.png"
 

src/components/MeetupList.tsx

@@ -7,6 +7,7 @@ import {
   LinkOverlay,
   List,
   ListItem,
+  useColorModeValue,
   useToken,
   VisuallyHidden,
 } from "@chakra-ui/react"
@@ -22,7 +23,6 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import meetups from "@/data/community-meetups.json"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
 export interface Meetup {

src/components/Nav/Desktop/index.tsx

@@ -9,6 +9,7 @@ import {
   Icon,
   MenuButton,
   Text,
+  useColorModeValue,
   useDisclosure,
   useEventListener,
 } from "@chakra-ui/react"
@@ -18,8 +19,6 @@ import LanguagePicker from "@/components/LanguagePicker"
 
 import { DESKTOP_LANGUAGE_BUTTON_NAME } from "@/lib/constants"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
-
 type DesktopNavMenuProps = {
   toggleColorMode: () => void
 }

src/components/Nav/Mobile/MenuFooter.tsx

@@ -1,7 +1,12 @@
 import { useTranslation } from "next-i18next"
 import { BsTranslate } from "react-icons/bs"
 import { MdBrightness2, MdSearch, MdWbSunny } from "react-icons/md"
-import { DrawerFooter, Grid, MenuButton } from "@chakra-ui/react"
+import {
+  DrawerFooter,
+  Grid,
+  MenuButton,
+  useColorModeValue,
+} from "@chakra-ui/react"
 
 import LanguagePicker from "@/components/LanguagePicker"
 
@@ -10,8 +15,6 @@ import { MOBILE_LANGUAGE_BUTTON_NAME } from "@/lib/constants"
 import FooterButton from "./FooterButton"
 import FooterItemText from "./FooterItemText"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
-
 type MenuFooterProps = {
   onToggle: () => void
   toggleColorMode: () => void

src/components/Nav/useNav.ts

@@ -19,7 +19,11 @@ import {
   BsUiChecksGrid,
 } from "react-icons/bs"
 import { PiFlask, PiUsersFourLight } from "react-icons/pi"
-import { useDisclosure } from "@chakra-ui/react"
+import {
+  useColorMode,
+  useColorModeValue,
+  useDisclosure,
+} from "@chakra-ui/react"
 
 import { EthereumIcon } from "@/components/icons/EthereumIcon"
 
@@ -29,13 +33,12 @@ import { FROM_QUERY } from "@/lib/constants"
 
 import type { NavSections } from "./types"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
-
 export const useNav = () => {
   const { asPath } = useRouter()
   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 +480,7 @@ export const useNav = () => {
 
   const toggleColorMode = () => {
     setTheme(theme === "dark" ? "light" : "dark")
+    setColorMode(theme === "dark" ? "light" : "dark")
     trackCustomEvent({
       eventCategory: "nav bar",
       eventAction: "click",

src/components/ProductList.tsx

@@ -1,11 +1,16 @@
-import { Box, Flex, List, ListItem, VisuallyHidden } from "@chakra-ui/react"
+import {
+  Box,
+  Flex,
+  List,
+  ListItem,
+  useColorModeValue,
+  VisuallyHidden,
+} from "@chakra-ui/react"
 
 import { ButtonLink } from "@/components/Buttons"
 import { Image, type ImageProps } from "@/components/Image"
 import OldHeading from "@/components/OldHeading"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
-
 type Content = {
   title: string
   description: string

src/components/Simulator/screens/ConnectWeb3/Web3App.tsx

@@ -1,13 +1,18 @@
 import React from "react"
 import { GrMenu } from "react-icons/gr"
-import { Box, type BoxProps, Flex, Icon, Text } from "@chakra-ui/react"
+import {
+  Box,
+  type BoxProps,
+  Flex,
+  Icon,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react"
 
 import { FAKE_DEMO_ADDRESS } from "../../constants"
 import { EthGlyphIcon } from "../../icons"
 import { NotificationPopover } from "../../NotificationPopover"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
-
 type Web3AppProps = BoxProps & {
   displayUrl: string
   appName?: string

src/components/Simulator/screens/CreateAccount/HomeScreen.tsx

@@ -1,14 +1,12 @@
 import React from "react"
 import { AnimatePresence, motion } from "framer-motion"
 import { MdArrowDownward } from "react-icons/md"
-import { Box, Grid, GridProps, Icon } from "@chakra-ui/react"
+import { Box, Grid, GridProps, Icon, useColorModeValue } from "@chakra-ui/react"
 
 import type { SimulatorNavProps } from "@/lib/types"
 
 import { EthGlyphIcon } from "../../icons"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
-
 type HomeScreenProps = GridProps & SimulatorNavProps
 
 export const HomeScreen = ({ nav, ...props }: HomeScreenProps) => {

src/components/Simulator/screens/SendReceive/ReceiveEther.tsx

@@ -1,14 +1,13 @@
 import React from "react"
 import { motion } from "framer-motion"
 import { Button } from "@chakra-ui/react"
-import { Box, Flex, Text } from "@chakra-ui/react"
+import { Box, Flex, Text, useColorModeValue } from "@chakra-ui/react"
 
 import { Image } from "@/components/Image"
 
 import { FAKE_DEMO_ADDRESS } from "../../constants"
 import { NotificationPopover } from "../../NotificationPopover"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
 import QRDark from "@/public/images/qr-code-ethereum-org-dark.png"
 import QRLight from "@/public/images/qr-code-ethereum-org-light.png"
 

src/components/StablecoinBoxGrid.tsx

@@ -2,6 +2,7 @@ import { useState } from "react"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { Box, Flex } from "@chakra-ui/react"
+import { useColorModeValue } from "@chakra-ui/react"
 
 import { ChildOnlyProp } from "@/lib/types"
 
@@ -11,8 +12,6 @@ import Emoji from "./Emoji"
 import InlineLink from "./Link"
 import OldHeading from "./OldHeading"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
-
 // Represent string as 32-bit integer
 const hashCode = (string: string): number => {
   let hash = 0

src/components/Staking/StakingProductsCardGrid/useStakingProductsCardGrid.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react"
 import { shuffle } from "lodash"
+import { useColorModeValue } from "@chakra-ui/react"
 
 import stakingProducts from "@/data/staking-products.json"
 
@@ -20,8 +21,6 @@ import {
   getTagProperties,
 } from "./utils"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
-
 export const useStakingProductsCardGrid = ({
   category,
 }: {

src/components/TitleCardList.tsx

@@ -1,6 +1,14 @@
 import React from "react"
 import { IoCodeOutline } from "react-icons/io5"
-import { Box, Flex, Hide, Icon, LinkBox, LinkOverlay } from "@chakra-ui/react"
+import {
+  Box,
+  Flex,
+  Hide,
+  Icon,
+  LinkBox,
+  LinkOverlay,
+  useColorModeValue,
+} from "@chakra-ui/react"
 
 import { TranslationKey } from "@/lib/types"
 import { ITitleCardItem } from "@/lib/interfaces"
@@ -9,8 +17,6 @@ import { Image } from "@/components/Image"
 import { BaseLink } from "@/components/Link"
 import Translation from "@/components/Translation"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
-
 export type TitleCardListProps = {
   content: Array<ITitleCardItem>
   className?: string

src/components/TranslationChartImage.tsx

@@ -1,6 +1,7 @@
+import { useColorModeValue } from "@chakra-ui/react"
+
 import { Image } from "@/components/Image"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
 import pageviewsDark from "@/public/images/translation-program/pageviews-dark.png"
 import pageviewsLight from "@/public/images/translation-program/pageviews-light.png"
 

src/components/TranslationLeaderboard.tsx

@@ -7,6 +7,7 @@ import {
   Button as ChakraButton,
   Flex,
   Img,
+  useColorModeValue,
   useRadio,
   useRadioGroup,
 } from "@chakra-ui/react"
@@ -16,8 +17,6 @@ import type { CostLeaderboardData } from "@/lib/types"
 import Emoji from "./Emoji"
 import Text from "./OldText"
 
-import useColorModeValue from "@/hooks/useColorModeValue"
-
 const Button = (props) => {
   return (
     <ChakraButton