add custom useColorModeValue using next-themes context and replace all the instances

pettinarip · pettinarip · commit 7354f370823e · 2024-07-11T10:54:35.000+02:00
diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
@@ -7,14 +7,15 @@ import {
   Heading,
   LinkBox,
   type LinkBoxProps,
-  LinkOverlay,
-  useColorModeValue,
+  LinkOverlay
 } 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)",
diff --git a/src/components/AdoptionChart.tsx b/src/components/AdoptionChart.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from "next-i18next"
-import { Box, type BoxProps, Flex, useColorMode } from "@chakra-ui/react"
+import { useTheme } from "next-themes"
+import { Box, type BoxProps, Flex } from "@chakra-ui/react"
 
 import type { ChildOnlyProp } from "@/lib/types"
 
@@ -48,8 +49,8 @@ const ColumnName = ({ children }: ChildOnlyProp) => (
 
 const AdoptionChart = () => {
   const { t } = useTranslation("page-what-is-ethereum")
-  const { colorMode } = useColorMode()
-  const isDark = colorMode === "dark"
+  const { theme } = useTheme()
+  const isDark = theme === "dark"
 
   return (
     <Flex>
diff --git a/src/components/CardList.tsx b/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 = {
diff --git a/src/components/CodeModal.tsx b/src/components/CodeModal.tsx
@@ -6,9 +6,10 @@ import {
   ModalContent,
   ModalHeader,
   ModalOverlay,
-  useColorModeValue,
 } from "@chakra-ui/react"
 
+import useColorModeValue from "@/hooks/useColorModeValue"
+
 type CodeModalProps = {
   title: string
   children: ReactNode
diff --git a/src/components/Codeblock.tsx b/src/components/Codeblock.tsx
@@ -6,12 +6,15 @@ import Highlight, {
   PrismTheme,
 } from "prism-react-renderer"
 import Prism from "prism-react-renderer/prism"
-import { Box, BoxProps, Flex, useColorModeValue } from "@chakra-ui/react"
+import { Box, BoxProps, Flex } from "@chakra-ui/react"
 
 import CopyToClipboard from "@/components/CopyToClipboard"
 import Emoji from "@/components/Emoji"
 // https://github.com/FormidableLabs/prism-react-renderer/tree/master#custom-language-support
-;(typeof global !== "undefined" ? global : window).Prism = Prism
+;
+
+import useColorModeValue from "@/hooks/useColorModeValue"
+(typeof global !== "undefined" ? global : window).Prism = Prism
 require("prismjs/components/prism-solidity")
 
 const LINES_BEFORE_COLLAPSABLE = 8
diff --git a/src/components/DataProductCard.tsx b/src/components/DataProductCard.tsx
@@ -6,13 +6,14 @@ import {
   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
diff --git a/src/components/EnergyConsumptionChart/index.tsx b/src/components/EnergyConsumptionChart/index.tsx
@@ -17,14 +17,14 @@ import {
   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
diff --git a/src/components/EthVideo.tsx b/src/components/EthVideo.tsx
@@ -1,4 +1,6 @@
-import { Box, useColorModeValue } from "@chakra-ui/react"
+import { Box } from "@chakra-ui/react"
+
+import useColorModeValue from "@/hooks/useColorModeValue"
 
 const EthVideo = () => {
   const src = useColorModeValue(
diff --git a/src/components/Leaderboard.tsx b/src/components/Leaderboard.tsx
@@ -7,7 +7,6 @@ import {
   LinkOverlay,
   List,
   ListItem,
-  useColorModeValue,
   VisuallyHidden,
 } from "@chakra-ui/react"
 
@@ -16,6 +15,7 @@ import { BaseLink } from "@/components/Link"
 
 import { GITHUB_URL } from "@/lib/constants"
 
+import useColorModeValue from "@/hooks/useColorModeValue"
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
 type Person = {
diff --git a/src/components/Logo.tsx b/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"
 
diff --git a/src/components/MeetupList.tsx b/src/components/MeetupList.tsx
@@ -7,7 +7,6 @@ import {
   LinkOverlay,
   List,
   ListItem,
-  useColorModeValue,
   useToken,
   VisuallyHidden,
 } from "@chakra-ui/react"
@@ -23,6 +22,7 @@ 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 {
diff --git a/src/components/Nav/Desktop/index.tsx b/src/components/Nav/Desktop/index.tsx
@@ -9,7 +9,6 @@ import {
   Icon,
   MenuButton,
   Text,
-  useColorModeValue,
   useDisclosure,
   useEventListener,
 } from "@chakra-ui/react"
@@ -19,6 +18,8 @@ import LanguagePicker from "@/components/LanguagePicker"
 
 import { DESKTOP_LANGUAGE_BUTTON_NAME } from "@/lib/constants"
 
+import useColorModeValue from "@/hooks/useColorModeValue"
+
 type DesktopNavMenuProps = {
   toggleColorMode: () => void
 }
diff --git a/src/components/Nav/Mobile/MenuFooter.tsx b/src/components/Nav/Mobile/MenuFooter.tsx
@@ -5,7 +5,6 @@ import {
   DrawerFooter,
   Grid,
   MenuButton,
-  useColorModeValue,
 } from "@chakra-ui/react"
 
 import LanguagePicker from "@/components/LanguagePicker"
@@ -15,6 +14,8 @@ 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
diff --git a/src/components/Nav/useNav.ts b/src/components/Nav/useNav.ts
@@ -20,7 +20,6 @@ import {
 } from "react-icons/bs"
 import { PiFlask, PiUsersFourLight } from "react-icons/pi"
 import {
-  useColorModeValue,
   useDisclosure,
 } from "@chakra-ui/react"
 
@@ -32,6 +31,8 @@ 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()
diff --git a/src/components/ProductList.tsx b/src/components/ProductList.tsx
@@ -3,14 +3,15 @@ import {
   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
diff --git a/src/components/Simulator/screens/ConnectWeb3/Web3App.tsx b/src/components/Simulator/screens/ConnectWeb3/Web3App.tsx
@@ -6,13 +6,14 @@ import {
   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
diff --git a/src/components/Simulator/screens/CreateAccount/HomeScreen.tsx b/src/components/Simulator/screens/CreateAccount/HomeScreen.tsx
@@ -1,12 +1,14 @@
 import React from "react"
 import { AnimatePresence, motion } from "framer-motion"
 import { MdArrowDownward } from "react-icons/md"
-import { Box, Grid, GridProps, Icon, useColorModeValue } from "@chakra-ui/react"
+import { Box, Grid, GridProps, Icon  } 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) => {
diff --git a/src/components/Simulator/screens/SendReceive/ReceiveEther.tsx b/src/components/Simulator/screens/SendReceive/ReceiveEther.tsx
@@ -1,13 +1,14 @@
 import React from "react"
 import { motion } from "framer-motion"
-import { Button, useColorModeValue } from "@chakra-ui/react"
+import { Button } from "@chakra-ui/react"
 import { Box, Flex, Text } 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"
 
diff --git a/src/components/StablecoinBoxGrid.tsx b/src/components/StablecoinBoxGrid.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
-import { Box, Flex, useColorModeValue } from "@chakra-ui/react"
+import { Box, Flex } from "@chakra-ui/react"
 
 import { ChildOnlyProp } from "@/lib/types"
 
@@ -11,6 +11,8 @@ 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
diff --git a/src/components/Staking/StakingProductsCardGrid/useStakingProductsCardGrid.ts b/src/components/Staking/StakingProductsCardGrid/useStakingProductsCardGrid.ts
@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react"
 import { shuffle } from "lodash"
-import { useColorModeValue } from "@chakra-ui/react"
 
 import stakingProducts from "@/data/staking-products.json"
 
@@ -21,6 +20,8 @@ import {
   getTagProperties,
 } from "./utils"
 
+import useColorModeValue from "@/hooks/useColorModeValue"
+
 export const useStakingProductsCardGrid = ({
   category,
 }: {
diff --git a/src/components/TitleCardList.tsx b/src/components/TitleCardList.tsx
@@ -7,7 +7,6 @@ import {
   Icon,
   LinkBox,
   LinkOverlay,
-  useColorModeValue,
 } from "@chakra-ui/react"
 
 import { TranslationKey } from "@/lib/types"
@@ -16,6 +15,8 @@ import { Image } from "@/components/Image"
 import { BaseLink } from "@/components/Link"
 import Translation from "@/components/Translation"
 
+import useColorModeValue from "@/hooks/useColorModeValue"
+
 export interface ITitleCardItem {
   title: string
   description: string
diff --git a/src/components/TranslationChartImage.tsx b/src/components/TranslationChartImage.tsx
@@ -1,7 +1,6 @@
-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"
 
diff --git a/src/components/TranslationLeaderboard.tsx b/src/components/TranslationLeaderboard.tsx
@@ -7,7 +7,6 @@ import {
   Button as ChakraButton,
   Flex,
   Img,
-  useColorModeValue,
   useRadio,
   useRadioGroup,
 } from "@chakra-ui/react"
@@ -17,6 +16,8 @@ import type { CostLeaderboardData } from "@/lib/types"
 import Emoji from "./Emoji"
 import Text from "./OldText"
 
+import useColorModeValue from "@/hooks/useColorModeValue"
+
 const Button = (props) => {
   return (
     <ChakraButton
diff --git a/src/components/UpgradeStatus.tsx b/src/components/UpgradeStatus.tsx
@@ -1,11 +1,13 @@
 import React from "react"
 import { useTranslation } from "next-i18next"
-import { Heading, useColorModeValue, VStack } from "@chakra-ui/react"
+import { Heading, VStack } from "@chakra-ui/react"
 
 import type { TranslationKey } from "@/lib/types"
 
 import Text from "./OldText"
 
+import useColorModeValue from "@/hooks/useColorModeValue"
+
 export interface IStyledContainer {
   isShipped: boolean
 }
diff --git a/src/hooks/useColorModeValue.ts b/src/hooks/useColorModeValue.ts
@@ -0,0 +1,18 @@
+import { useTheme } from "next-themes"
+
+/**
+ * Returns the value for the current color mode.
+ * 
+ * @param light The value to return when the color mode is light.
+ * @param dark The value to return when the color mode is dark.
+ * 
+ * @example
+ * const color = useColorModeValue("white", "black")
+ */
+function useColorModeValue<TLight = unknown, TDark = unknown>(light: TLight, dark: TDark) {
+  const { theme } = useTheme()
+
+  return theme === "light" ? light : dark
+}
+
+export default useColorModeValue
diff --git a/src/hooks/useNavMenuColors.ts b/src/hooks/useNavMenuColors.ts
diff --git a/src/pages/assets.tsx b/src/pages/assets.tsx
diff --git a/src/pages/bug-bounty.tsx b/src/pages/bug-bounty.tsx
diff --git a/src/pages/developers/index.tsx b/src/pages/developers/index.tsx
