Fix detecting dark theme leftovers (#153)

Author: Luka Jeran

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);

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);