From d89d1fdf868bb0f26854c867e8942afd7ed71a44 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Fri, 16 Aug 2024 10:13:37 +0200
Subject: [PATCH] use resolvedTheme state instead of theme to resolve just
 light or dark themes

---
 src/components/AdoptionChart.tsx | 4 ++--
 src/components/Nav/useNav.ts     | 6 +++---
 src/hooks/useColorModeValue.ts   | 4 ++--
 src/hooks/useNavMenuColorsTw.ts  | 4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/AdoptionChart.tsx b/src/components/AdoptionChart.tsx
index a69e139e1e4..e8e8deba903 100644
--- a/src/components/AdoptionChart.tsx
+++ b/src/components/AdoptionChart.tsx
@@ -49,8 +49,8 @@ const ColumnName = ({ children }: ChildOnlyProp) => (
 
 const AdoptionChart = () => {
   const { t } = useTranslation("page-what-is-ethereum")
-  const { theme } = useTheme()
-  const isDark = theme === "dark"
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === "dark"
 
   return (
     <Flex>
diff --git a/src/components/Nav/useNav.ts b/src/components/Nav/useNav.ts
index 4265832f2c9..32759b79e9c 100644
--- a/src/components/Nav/useNav.ts
+++ b/src/components/Nav/useNav.ts
@@ -30,7 +30,7 @@ import useColorModeValue from "@/hooks/useColorModeValue"
 
 export const useNav = () => {
   const { t } = useTranslation("common")
-  const { theme, setTheme } = useTheme()
+  const { resolvedTheme, setTheme } = useTheme()
   const { setColorMode } = useColorMode()
 
   const colorToggleEvent = useColorModeValue("dark mode", "light mode") // This will be inverted as the state is changing
@@ -466,8 +466,8 @@ export const useNav = () => {
   }
 
   const toggleColorMode = () => {
-    setTheme(theme === "dark" ? "light" : "dark")
-    setColorMode(theme === "dark" ? "light" : "dark")
+    setTheme(resolvedTheme === "dark" ? "light" : "dark")
+    setColorMode(resolvedTheme === "dark" ? "light" : "dark")
     trackCustomEvent({
       eventCategory: "nav bar",
       eventAction: "click",
diff --git a/src/hooks/useColorModeValue.ts b/src/hooks/useColorModeValue.ts
index 3c1c35402be..48f1e9fe5da 100644
--- a/src/hooks/useColorModeValue.ts
+++ b/src/hooks/useColorModeValue.ts
@@ -13,9 +13,9 @@ function useColorModeValue<TLight = unknown, TDark = unknown>(
   light: TLight,
   dark: TDark
 ) {
-  const { theme } = useTheme()
+  const { resolvedTheme } = useTheme()
 
-  return theme === "light" ? light : dark
+  return resolvedTheme === "light" ? light : dark
 }
 
 export default useColorModeValue
diff --git a/src/hooks/useNavMenuColorsTw.ts b/src/hooks/useNavMenuColorsTw.ts
index 22aff7df459..0571b58d28e 100644
--- a/src/hooks/useNavMenuColorsTw.ts
+++ b/src/hooks/useNavMenuColorsTw.ts
@@ -23,8 +23,8 @@ type NavMenuColors = {
  * TODO: rename to useNavMenuColors when the desktop menu is migrated.
  */
 export const useNavMenuColorsTw = (): NavMenuColors => {
-  const { theme } = useTheme()
-  const isLight = theme === "light"
+  const { resolvedTheme } = useTheme()
+  const isLight = resolvedTheme === "light"
 
   return {
     body: "text-body",