Merge pull request #13921 from ethereum/master

Master -> staging
ethereum · Sep 20, 2024 · 8b89842 · 8b89842
2 parents b93c5cb + 0effb97
commit 8b89842
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 24 deletions.
diff --git 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
@@ -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
@@ -27,9 +27,9 @@ const ThemeProvider = ({ children }: Pick<ThemeProviderProps, "children">) => {
   const theme = useMemo(() => merge(customTheme, { direction }), [direction])
   return (
     <NextThemesProvider
-      attribute="class"
-      defaultTheme="system"
-      enableSystem
+      attribute="data-theme"
+      defaultTheme="light"
+      enableSystem={false}
       disableTransitionOnChange
       storageKey={COLOR_MODE_STORAGE_KEY}
     >

diff --git 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">

diff --git 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
@@ -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
@@ -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);