diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx index a43784a7..11dabc68 100644 --- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx +++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx @@ -1,4 +1,4 @@ -import { useDarkMode } from "usehooks-ts"; +import { useTheme } from "next-themes"; import { useSwitchChain } from "wagmi"; import { ArrowsRightLeftIcon } from "@heroicons/react/24/solid"; import { getNetworkColor } from "~~/hooks/scaffold-eth"; @@ -9,7 +9,8 @@ type NetworkOptionsProps = { }; export const NetworkOptions = ({ hidden = false }: NetworkOptionsProps) => { - const { isDarkMode } = useDarkMode(); + const { resolvedTheme } = useTheme(); + const isDarkMode = resolvedTheme === "dark"; const { switchChain } = useSwitchChain(); const mainChainId = useAbiNinjaState(state => state.mainChainId); const chains = useGlobalState(state => state.chains); diff --git a/packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts b/packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts index faec9939..b2e0f777 100644 --- a/packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts +++ b/packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts @@ -1,5 +1,5 @@ import { useTargetNetwork } from "./useTargetNetwork"; -import { useDarkMode } from "usehooks-ts"; +import { useTheme } from "next-themes"; import { ChainWithAttributes } from "~~/utils/scaffold-eth"; export const DEFAULT_NETWORK_COLOR: [string, string] = ["#666666", "#bbbbbb"]; @@ -13,7 +13,8 @@ export function getNetworkColor(network: ChainWithAttributes, isDarkMode: boolea * Gets the color of the target network */ export const useNetworkColor = (network?: ChainWithAttributes) => { - const { isDarkMode } = useDarkMode(); + const { resolvedTheme } = useTheme(); + const isDarkMode = resolvedTheme === "dark"; const { targetNetwork } = useTargetNetwork(); return getNetworkColor(network || targetNetwork, isDarkMode);