feat: synchronize color mode

Author: codebender828

packages/nuxt/README.md

@@ -0,0 +1,15 @@
+# @chakra-ui/nuxt-next
+
+Nuxt.js Module for Chakra UI Vue
+
+## Installation
+
+```sh
+yarn add @chakra-ui/vue-next
+# or
+npm i @chakra-ui/vue-next
+```
+
+## Todo
+- [ ] Install emotion
+- [ ] Install plugin programmatically

packages/nuxt/package.json

@@ -29,6 +29,7 @@
     "build:types": "tsup src --dts-only"
   },
   "dependencies": {
+    "@chakra-ui/c-color-mode": "workspace:*",
     "@chakra-ui/vue-next": "workspace:*",
     "@emotion/css": "^11.10.5",
     "@emotion/server": "^11.10.0",

packages/nuxt/src/module.ts

@@ -6,24 +6,24 @@ import {
   installModule,
 } from "@nuxt/kit"
 import type * as NuxtSchema from "@nuxt/schema"
+import { ChakraPluginOptions } from "@chakra-ui/vue-next"
 
-export default defineNuxtModule({
+export default defineNuxtModule<ChakraPluginOptions>({
   meta: {
-    name: "@chakra-ui/nuxt-nect",
+    name: "@chakra-ui/nuxt-next",
     configKey: "chakra",
     compatibilty: ">=3.0.0",
   },
-  setup(_, nuxt) {
+  setup(_options, nuxt) {
     console.log("chakra-ui-nuxt:module")
-    /**
-     * Register emotion plugin
-     */
+    const theme = _options.extendTheme
 
+    // Install emotion module
     installModule("@nuxtjs/emotion")
     const { resolve } = createResolver(import.meta.url)
     const runtimeDir = resolve("./runtime")
     nuxt.options.build.transpile.push(runtimeDir)
     addServerPlugin(resolve(runtimeDir, "chakra.server"))
-    addPlugin(resolve(runtimeDir, "chakra.client"))
+    addPlugin(resolve(runtimeDir, "chakra.universal"))
   },
 })

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

@@ -1,4 +1,5 @@
 import type { NitroApp } from "nitropack"
+import { H3Event, parseCookies } from "h3"
 
 /**
  * Why are we declaring types for  `defineNitroPlugin`?
@@ -21,6 +22,19 @@ export function defineNitroPlugin(def: NitroAppPlugin): NitroAppPlugin {
   return def
 }
 
-export default defineNitroPlugin((nitroApp) => {
+const CHAKRA_UI_COLOR_MODE_COOKIE_KEY = "chakra-ui-color-mode"
+
+export default defineNitroPlugin((app) => {
   console.log("chakra-ui-nuxt:server_runtime")
+  app.hooks.hook("render:html", (html, { event: rawEvent }) => {
+    const event = new H3Event(rawEvent.node.req, rawEvent.node.res)
+    const parsedCookies = parseCookies(event)
+    const colorMode = parsedCookies[CHAKRA_UI_COLOR_MODE_COOKIE_KEY]
+
+    if (colorMode) {
+      html.htmlAttrs.push(`data-theme="${colorMode}"`)
+      html.htmlAttrs.push(`style="color-scheme: ${colorMode};"`)
+      html.htmlAttrs.push(`data-chakra-ui-ssr="true"`)
+    }
+  })
 })

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

@@ -0,0 +1,30 @@
+import type * as NuxtAppTypes from "nuxt/app"
+import { defineNuxtPlugin } from "#imports"
+import Chakra, {
+  chakra,
+  ChakraPluginOptions,
+  cookieStorageManagerSSR,
+  extendChakra,
+  ColorModeConstants,
+} from "@chakra-ui/vue-next"
+import { domElements } from "@chakra-ui/vue-system"
+
+export default defineNuxtPlugin((nuxtApp) => {
+  console.log("chakra-ui-nuxt:plugin_context")
+
+  const app = nuxtApp.vueApp
+
+  app.use(
+    Chakra,
+    extendChakra({
+      cssReset: true,
+      colorModeManager: cookieStorageManagerSSR(
+        ColorModeConstants.CookieStorageKey
+      ),
+    })
+  )
+
+  domElements.forEach((tag) => {
+    app.component(`chakra.${tag}`, chakra(tag))
+  })
+})