control themes with next-themes and sync with chakra provider

Author: pettinarip

package.json

@@ -51,6 +51,7 @@
     "next-i18next": "^14.0.3",
     "next-mdx-remote": "^3.0.8",
     "next-sitemap": "^4.2.3",
+    "next-themes": "^0.3.0",
     "prism-react-renderer": "1.1.0",
     "prismjs": "^1.27.0",
     "react": "^18.2.0",

src/components/ChakraThemeProvider.tsx

@@ -0,0 +1,34 @@
+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 customTheme from "@/@chakra-ui/theme"
+
+import { useLocaleDirection } from "@/hooks/useLocaleDirection"
+
+function ChakraThemeProvider({ children }: PropsWithChildren) {
+  // get the theme from next-themes
+  const { resolvedTheme } = useNextTheme()
+
+  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,
+        }}
+      >
+        {children}
+      </ColorModeContext.Provider>
+    </ThemeProvider>
+  )
+}
+
+export default ChakraThemeProvider

src/components/Nav/useNav.ts

@@ -1,5 +1,6 @@
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
+import { useTheme } from "next-themes"
 import {
   BsBook,
   BsBuildings,
@@ -19,7 +20,6 @@ import {
 } from "react-icons/bs"
 import { PiFlask, PiUsersFourLight } from "react-icons/pi"
 import {
-  useColorMode,
   useColorModeValue,
   useDisclosure,
 } from "@chakra-ui/react"
@@ -36,9 +36,9 @@ export const useNav = () => {
   const { asPath } = useRouter()
   const { isOpen, onToggle } = useDisclosure()
   const { t } = useTranslation("common")
+  const { theme, setTheme } = useTheme()
 
   const colorToggleEvent = useColorModeValue("dark mode", "light mode") // This will be inverted as the state is changing
-  const { toggleColorMode: chakraToggleColorMode } = useColorMode()
 
   const linkSections: NavSections = {
     learn: {
@@ -477,7 +477,7 @@ export const useNav = () => {
       : ""
 
   const toggleColorMode = () => {
-    chakraToggleColorMode()
+    setTheme(theme === "dark" ? "light" : "dark")
     trackCustomEvent({
       eventCategory: "nav bar",
       eventAction: "click",

src/pages/_app.tsx

@@ -1,22 +1,20 @@
 import { useEffect } from "react"
-import { merge } from "lodash"
 import { appWithTranslation } from "next-i18next"
-// ChakraProvider import updated as recommended on https://github.com/chakra-ui/chakra-ui/issues/4975#issuecomment-1174234230
-// to reduce bundle size. Should be reverted to "@chakra-ui/react" in case on theme issues
-import { ChakraProvider } from "@chakra-ui/provider"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
 import { init } from "@socialgouv/matomo-next"
 
-import customTheme from "@/@chakra-ui/theme"
-
 import { AppPropsWithLayout } from "@/lib/types"
 
+import ChakraThemeProvider from "@/components/ChakraThemeProvider"
+
 import "@/styles/global.css"
 import "@/styles/main.css"
 
-import { useLocaleDirection } from "@/hooks/useLocaleDirection"
 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) {
@@ -31,10 +29,6 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
   // Use the layout defined at the page level, if available
   const getLayout = Component.getLayout ?? ((page) => page)
 
-  const direction = useLocaleDirection()
-
-  const theme = merge(customTheme, { direction })
-
   return (
     <>
       <style jsx global>
@@ -45,15 +39,23 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
           }
         `}
       </style>
-      <ChakraProvider theme={theme}>
-        <RootLayout
-          contentIsOutdated={!!pageProps.frontmatter?.isOutdated}
-          contentNotTranslated={pageProps.contentNotTranslated}
-          lastDeployLocaleTimestamp={pageProps.lastDeployLocaleTimestamp}
-        >
-          {getLayout(<Component {...pageProps} />)}
-        </RootLayout>
-      </ChakraProvider>
+      <NextThemesProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+        storageKey={STORAGE_KEY}
+      >
+        <ChakraThemeProvider>
+          <RootLayout
+            contentIsOutdated={!!pageProps.frontmatter?.isOutdated}
+            contentNotTranslated={pageProps.contentNotTranslated}
+            lastDeployLocaleTimestamp={pageProps.lastDeployLocaleTimestamp}
+          >
+            {getLayout(<Component {...pageProps} />)}
+          </RootLayout>
+        </ChakraThemeProvider>
+      </NextThemesProvider>
     </>
   )
 }

src/pages/_document.tsx

@@ -7,12 +7,12 @@ import NextDocument, {
 } from "next/document"
 import { ColorModeScript } from "@chakra-ui/react"
 
-import theme from "@/@chakra-ui/theme"
-
 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,7 +39,11 @@ class Document extends NextDocument {
           />
         </Head>
         <body>
-          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+          {/*
+            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>

yarn.lock

@@ -11019,6 +11019,11 @@ next-sitemap@^4.2.3:
     fast-glob "^3.2.12"
     minimist "^1.2.8"
 
+next-themes@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.3.0.tgz#b4d2a866137a67d42564b07f3a3e720e2ff3871a"
+  integrity sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==
+
 next@^14.2.3:
   version "14.2.3"
   resolved "https://registry.yarnpkg.com/next/-/next-14.2.3.tgz#f117dd5d5f20c307e7b8e4f9c1c97d961008925d"