feat(ssr): parse nuxt ssr context

Author: codebender828

packages/nuxt/src/module.ts

@@ -8,6 +8,19 @@ import {
 import type * as NuxtSchema from "@nuxt/schema"
 import { ChakraPluginOptions } from "@chakra-ui/vue-next"
 
+/** Chakra UI Vue SSR Context State */
+export interface ChakraUISSRContext {
+  theme?: {
+    ssrColorMode: "light" | "dark"
+  }
+}
+
+declare global {
+  interface Window {
+    $chakraSSRContext: ChakraUISSRContext
+  }
+}
+
 export default defineNuxtModule<ChakraPluginOptions>({
   meta: {
     name: "@chakra-ui/nuxt-next",

packages/nuxt/src/runtime/chakra.server.ts

@@ -35,6 +35,15 @@ export default defineNitroPlugin((app) => {
       html.htmlAttrs.push(`data-theme="${colorMode}"`)
       html.htmlAttrs.push(`style="color-scheme: ${colorMode};"`)
       html.htmlAttrs.push(`data-chakra-ui-ssr="true"`)
+      html.head.push(
+        `<script data-chakra-ui-ssr-context>window.$chakraSSRContext=${JSON.stringify(
+          {
+            theme: {
+              ssrColorMode: colorMode,
+            },
+          }
+        )}</script>`
+      )
     }
   })
 })

packages/nuxt/src/runtime/chakra.universal.ts

@@ -2,17 +2,36 @@ import type * as NuxtAppTypes from "nuxt/app"
 import { defineNuxtPlugin } from "#imports"
 import Chakra, {
   chakra,
-  ChakraPluginOptions,
   cookieStorageManagerSSR,
   extendChakra,
   ColorModeConstants,
+  extendTheme,
+  ColorModeScriptProps,
 } from "@chakra-ui/vue-next"
 import { domElements } from "@chakra-ui/vue-system"
+import { parseCookies } from "h3"
+
+type AllowedSSRColorMode = Exclude<
+  ColorModeScriptProps["initialColorMode"],
+  "system"
+>
 
 export default defineNuxtPlugin((nuxtApp) => {
-  console.log("chakra-ui-nuxt:plugin_context")
+  let ssrColorMode: AllowedSSRColorMode
+  const event = nuxtApp.ssrContext?.event
+  if (event) {
+    const parsedCookies = parseCookies(event)
+    const colorMode = parsedCookies[ColorModeConstants.CookieStorageKey]
+    if (colorMode) {
+      ssrColorMode = colorMode as AllowedSSRColorMode
+    } else {
+      // TODO: Replace with options color mode
+      ssrColorMode = "light"
+    }
+  }
 
   const app = nuxtApp.vueApp
+  const isBrowser = typeof document !== "undefined"
 
   app.use(
     Chakra,
@@ -21,6 +40,13 @@ export default defineNuxtPlugin((nuxtApp) => {
       colorModeManager: cookieStorageManagerSSR(
         ColorModeConstants.CookieStorageKey
       ),
+      extendTheme: extendTheme({
+        config: {
+          initialColorMode: isBrowser
+            ? window.$chakraSSRContext?.theme?.ssrColorMode
+            : ssrColorMode,
+        },
+      }),
     })
   )