From 23f68a8df29a4f7b864a73c6b0aaabeb6fe67235 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Fri, 20 Sep 2024 11:13:24 +0200
Subject: [PATCH 1/3] disable system color mode

---
 src/@chakra-ui/theme.ts          |  2 +-
 src/components/Nav/useNav.ts     | 18 +++---------------
 src/components/ThemeProvider.tsx |  4 ++--
 3 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/src/@chakra-ui/theme.ts b/src/@chakra-ui/theme.ts
index ddafd133eee..00e4fd2ce6e 100644
--- a/src/@chakra-ui/theme.ts
+++ b/src/@chakra-ui/theme.ts
@@ -6,7 +6,7 @@ import semanticTokens from "./semanticTokens"
 
 const config: ThemeConfig = {
   cssVarPrefix: "eth",
-  initialColorMode: "system",
+  initialColorMode: "light",
   /**
    * Disable Chakra's system color subscription, as it works differently from
    * `next-themes` and causes a desync with it.
diff --git a/src/components/Nav/useNav.ts b/src/components/Nav/useNav.ts
index a996a3ac7c4..1ad2f03c654 100644
--- a/src/components/Nav/useNav.ts
+++ b/src/components/Nav/useNav.ts
@@ -1,4 +1,3 @@
-import { useEffect } from "react"
 import { useTranslation } from "next-i18next"
 import { useTheme } from "next-themes"
 import {
@@ -29,7 +28,7 @@ import type { NavSections } from "./types"
 
 export const useNav = () => {
   const { t } = useTranslation("common")
-  const { setTheme, resolvedTheme, systemTheme } = useTheme()
+  const { setTheme, resolvedTheme } = useTheme()
   const { setColorMode } = useColorMode()
 
   const linkSections: NavSections = {
@@ -462,23 +461,12 @@ export const useNav = () => {
     },
   }
 
-  // Listen for changes to systemTheme and update theme accordingly
-  // Important if the user has not engaged the color mode toggle yet, and
-  // toggles system color preferences
-  useEffect(() => {
-    setTheme("system")
-    setColorMode(systemTheme)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [systemTheme])
-
   const toggleColorMode = () => {
-    // resolvedTheme: "light" | "dark" = Current resolved color mode from useTheme
     const targetTheme = resolvedTheme === "dark" ? "light" : "dark"
-    // If target theme matches the users system pref, set ls theme to "system"
-    const lsTheme = targetTheme === systemTheme ? "system" : targetTheme
 
-    setTheme(lsTheme)
+    setTheme(targetTheme)
     setColorMode(targetTheme)
+
     trackCustomEvent({
       eventCategory: "nav bar",
       eventAction: "click",
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
index 8f380f583ad..b57903c4472 100644
--- a/src/components/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@@ -28,8 +28,8 @@ const ThemeProvider = ({ children }: Pick<ThemeProviderProps, "children">) => {
   return (
     <NextThemesProvider
       attribute="class"
-      defaultTheme="system"
-      enableSystem
+      defaultTheme="light"
+      enableSystem={false}
       disableTransitionOnChange
       storageKey={COLOR_MODE_STORAGE_KEY}
     >

From b8b5c1d3f7b13a82808b629241ea83f6247fbc00 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Fri, 20 Sep 2024 11:37:14 +0200
Subject: [PATCH 2/3] use data attr color mode selector instead of class for
 better compatibility with chakra

---
 src/components/ThemeProvider.tsx | 2 +-
 src/styles/docsearch.css         | 4 ++--
 src/styles/global.css            | 2 +-
 src/styles/semantic-tokens.css   | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
index b57903c4472..c5225546072 100644
--- a/src/components/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@@ -27,7 +27,7 @@ const ThemeProvider = ({ children }: Pick<ThemeProviderProps, "children">) => {
   const theme = useMemo(() => merge(customTheme, { direction }), [direction])
   return (
     <NextThemesProvider
-      attribute="class"
+      attribute="data-theme"
       defaultTheme="light"
       enableSystem={false}
       disableTransitionOnChange
diff --git a/src/styles/docsearch.css b/src/styles/docsearch.css
index 791511b60c8..3c942d411ed 100644
--- a/src/styles/docsearch.css
+++ b/src/styles/docsearch.css
@@ -7,7 +7,7 @@
 }
 
 .DocSearch-Button-Container svg {
-  @apply size-3.5 group-hover:rotate-12 transition-transform duration-500 group-hover:transition-transform group-hover:duration-500;
+  @apply size-3.5 transition-transform duration-500 group-hover:rotate-12 group-hover:transition-transform group-hover:duration-500;
 }
 
 .DocSearch-Search-Icon,
@@ -39,7 +39,7 @@
   --docsearch-hit-height: fit-content;
 }
 
-.dark {
+[data-theme="dark"] {
   --docsearch-modal-background: theme(backgroundColor.background.DEFAULT);
   --docsearch-highlight-color: theme(colors.primary.hover);
 }
diff --git a/src/styles/global.css b/src/styles/global.css
index b5fd14135bd..8b8595dba5f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -51,7 +51,7 @@
     --search-background: var(--background);
   }
 
-  .dark {
+  [data-theme="dark"] {
     /* Semantic Colors: Dark mode */
     /* ! Deprecating primary-light */
     --primary-light: hsla(var(--orange-100));
diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css
index fae195633d3..a0b3a5ade94 100644
--- a/src/styles/semantic-tokens.css
+++ b/src/styles/semantic-tokens.css
@@ -122,7 +122,7 @@
   }
 
   /* Dark mode token declarations */
-  .dark {
+  [data-theme="dark"] {
     --body: var(--gray-100);
     --body-medium: var(--gray-400);
     --body-light: var(--gray-600);

From d8c82b30ce9deef9b6e383bf2fc6f62d6a69e39f Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Fri, 20 Sep 2024 14:26:12 +0200
Subject: [PATCH 3/3] fix duplicate key

---
 src/pages/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ae598ed2576..5904a6197af 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -605,7 +605,7 @@ const HomePage = ({
                     }
                     return (
                       <div
-                        key={title}
+                        key={title + date}
                         className="flex flex-col justify-between gap-6 border-t px-6 py-4 xl:flex-row"
                       >
                         <div className="flex flex-col gap-y-0.5 text-center text-base sm:text-start">