Merge pull request #13915 from ethereum/hotfix-color-mode

Hotfix color mode

Author: pettinarip

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.

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

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}
     >

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);
 }

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));

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);