From 3d59135b53650eae4f7a3e209d555f6cb6b8364d Mon Sep 17 00:00:00 2001 From: lukaw3d Date: Fri, 6 Sep 2024 20:25:31 +0200 Subject: [PATCH] Fix detecting dark theme leftovers Removed useDarkMode leftovers after c1e7ca04e151f67dc00fd2edb95a8ce80a173b49. Related to https://github.com/scaffold-eth/scaffold-eth-2/pull/707. --- .../RainbowKitCustomConnectButton/NetworkOptions.tsx | 5 +++-- packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) 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);