Fix detecting dark theme leftovers

Removed useDarkMode leftovers after c1e7ca0. Related to scaffold-eth/scaffold-eth-2#707.
BuidlGuidl · Sep 6, 2024 · 3d59135 · 3d59135
1 parent 3c9017d
commit 3d59135
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git 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
@@ -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);