Merge pull request #13670 from ethereum/master

`master` to `dev`

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>

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",

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

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",