simplify color mode sync by using the ChakraBaseProvider and data attr to set the theme

pettinarip · pettinarip · commit d83203a6f72f · 2024-07-08T19:22:50.000+02:00
diff --git a/src/components/ChakraThemeProvider.tsx b/src/components/ChakraThemeProvider.tsx
@@ -1,33 +1,24 @@
 import { PropsWithChildren, useMemo } from "react"
 import merge from "lodash/merge"
-import { useTheme as useNextTheme } from "next-themes"
-import { ColorMode, ColorModeContext, ThemeProvider } from "@chakra-ui/react"
+import { ChakraBaseProvider, createLocalStorageManager } from "@chakra-ui/react"
 
 import customTheme from "@/@chakra-ui/theme"
 
+import { COLOR_MODE_STORAGE_KEY } from "@/lib/constants"
+
 import { useLocaleDirection } from "@/hooks/useLocaleDirection"
 
-function ChakraThemeProvider({ children }: PropsWithChildren) {
-  // get the theme from next-themes
-  const { resolvedTheme } = useNextTheme()
+const colorModeManager = createLocalStorageManager(COLOR_MODE_STORAGE_KEY)
 
+function ChakraThemeProvider({ children }: PropsWithChildren) {
   const direction = useLocaleDirection()
 
   const theme = useMemo(() => merge(customTheme, { direction }), [direction])
 
   return (
-    <ThemeProvider theme={theme}>
-      <ColorModeContext.Provider
-        value={{
-          colorMode: resolvedTheme as ColorMode,
-          toggleColorMode: () => {},
-          setColorMode: () => {},
-          forced: true,
-        }}
-      >
+    <ChakraBaseProvider theme={theme} colorModeManager={colorModeManager}>
         {children}
-      </ColorModeContext.Provider>
-    </ThemeProvider>
+    </ChakraBaseProvider>
   )
 }
 
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -41,6 +41,7 @@ export const COINGECKO_API_BASE_URL =
 export const COINGECKO_API_URL_PARAMS =
   "&order=market_cap_desc&per_page=100&page=1&sparkline=false"
 export const BASE_TIME_UNIT = 3600 // 1 hour
+export const COLOR_MODE_STORAGE_KEY = "theme"
 
 // Quiz Hub
 export const PROGRESS_BAR_GAP = "4px"
@@ -148,4 +149,4 @@ export const DEFAULT_GLOSSARY_NS = "glossary"
 
 export const HAMBURGER_BUTTON_ID = "mobile-menu-button"
 export const MOBILE_LANGUAGE_BUTTON_NAME = "mobile-language-button"
-export const DESKTOP_LANGUAGE_BUTTON_NAME = "desktop-language-button"
+export const DESKTOP_LANGUAGE_BUTTON_NAME = "desktop-language-button"
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -7,14 +7,14 @@ import { AppPropsWithLayout } from "@/lib/types"
 
 import ChakraThemeProvider from "@/components/ChakraThemeProvider"
 
+import { COLOR_MODE_STORAGE_KEY } from "@/lib/constants"
+
 import "@/styles/global.css"
 import "@/styles/main.css"
 
 import { RootLayout } from "@/layouts/RootLayout"
 import { mono } from "@/lib/fonts"
 
-export const STORAGE_KEY = "theme"
-
 const App = ({ Component, pageProps }: AppPropsWithLayout) => {
   useEffect(() => {
     if (!process.env.IS_PREVIEW_DEPLOY) {
@@ -40,11 +40,11 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
         `}
       </style>
       <NextThemesProvider
-        attribute="class"
+        attribute="data-theme"
         defaultTheme="system"
         enableSystem
         disableTransitionOnChange
-        storageKey={STORAGE_KEY}
+        storageKey={COLOR_MODE_STORAGE_KEY}
       >
         <ChakraThemeProvider>
           <RootLayout
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -5,14 +5,11 @@ import NextDocument, {
   Main,
   NextScript,
 } from "next/document"
-import { ColorModeScript } from "@chakra-ui/react"
 
 import { Lang } from "@/lib/types"
 
 import { isLangRightToLeft } from "@/lib/utils/translations"
 
-import { STORAGE_KEY } from "./_app"
-
 class Document extends NextDocument {
   static async getInitialProps(ctx: DocumentContext) {
     return await NextDocument.getInitialProps(ctx)
@@ -39,11 +36,6 @@ class Document extends NextDocument {
           />
         </Head>
         <body>
-          {/*
-            Still needed to insert the chakra specific classname on the `body` (`chakra-ui-light` & `chakra-ui-dark`)
-            and avoid color mode flashing
-          */}
-          <ColorModeScript initialColorMode="system" storageKey={STORAGE_KEY} />
           <Main />
           <NextScript />
         </body>
