feat(nuxt): ssr color mode

Author: codebender828

examples/nuxt-app/app.vue

@@ -1,5 +1,25 @@
 <template>
-  <div>
-    <NuxtWelcome />
-  </div>
+  <chakra.div
+    display="flex"
+    min-h="600px"
+    justify-content="center"
+    align-items="center"
+  >
+    <chakra.button
+      @click="toggleColorMode"
+      px="4"
+      py="3"
+      bg="red"
+      color="white"
+      font-weight="bold"
+    >
+      Click me to toggle. ({{ colorMode }})
+    </chakra.button>
+  </chakra.div>
 </template>
+
+<script lang="ts" setup>
+import { chakra, useColorMode } from "@chakra-ui/vue-next"
+
+const { colorMode, toggleColorMode } = useColorMode()
+</script>

examples/nuxt-app/nuxt.config.ts

@@ -1,3 +1,12 @@
+import { extendTheme } from "@chakra-ui/vue-next"
+
 export default defineNuxtConfig({
   modules: ["@chakra-ui/nuxt-next"],
+  chakra: {
+    extendTheme: extendTheme({
+      colors: {
+        $brand: "#f5f",
+      },
+    }),
+  },
 })

packages/c-color-mode/src/color-mode-provider.tsx

@@ -96,7 +96,22 @@ export function setupColorModeContext(
 
   const managerValue = colorModeManager.get()
 
-  if (managerValue) {
+  // If this is SSR, we check to see if the cookie has been specified.
+  // Otherwise we should bail.
+  if (
+    // Is SSR
+    typeof document !== "undefined" &&
+    document.documentElement.dataset.chakraUiSsr === "true"
+    // !initialColorMode
+  ) {
+    // Bail and
+    // Forcefully hydrate client to match ccolor mode
+    const ssrColorMode = document.documentElement.dataset.theme
+    if (ssrColorMode) {
+      console.debug("chakra-ui-ssr color mode is", ssrColorMode)
+      setColorMode(ssrColorMode as ColorMode)
+    }
+  } else if (managerValue) {
     setColorMode(managerValue)
   } else if (initialColorMode === "system") {
     setColorMode("system")
@@ -108,7 +123,7 @@ export function setupColorModeContext(
 
   function setColorMode(value: ColorMode | "system") {
     const { setClassName, setDataset, getSystemTheme } = utils.value
-    const resolved = value === "system" ? getSystemTheme() : value
+    const resolved = value === "system" ? getSystemTheme()! : value
     colorMode.value = resolved
 
     setClassName(resolved === "dark")

packages/c-color-mode/src/color-mode-script.ts

@@ -1,10 +1,16 @@
 export type ColorModeScriptProps = {
   type?: "localStorage" | "cookie"
   initialColorMode?: "light" | "dark" | "system"
-  storageKey?: string
+  storageKey?: ColorModeConstants
   nonce?: string
 }
 
+export enum ColorModeConstants {
+  CookieStorageKey = "chakra-ui-color-mode",
+  LocalStorageKey = "chakra-ui-color-mode",
+  BaseStorageKey = "chakra-ui-color-mode",
+}
+
 const VALID_VALUES = new Set(["dark", "light", "system"])
 
 /**
@@ -20,7 +26,7 @@ export function getScriptSrc(props: ColorModeScriptProps = {}) {
   const {
     initialColorMode = "light",
     type = "localStorage",
-    storageKey: key = "chakra-ui-color-mode",
+    storageKey: key = ColorModeConstants.LocalStorageKey,
   } = props
 
   // runtime safe-guard against invalid color mode values
@@ -41,6 +47,8 @@ export function getScriptSrc(props: ColorModeScriptProps = {}) {
 export function mountColorModeScript(props: ColorModeScriptProps = {}) {
   const { nonce } = props
 
+  if (typeof document === "undefined") return
+
   const script = document.createElement("script")
   script.id = "chakra-script"
   script.nonce = nonce

packages/c-color-mode/src/color-mode.utils.ts

@@ -18,24 +18,29 @@ export function getColorModeUtils(options: UtilOptions = {}) {
 
   const utils = {
     setDataset: (value: ColorMode) => {
+      if (!globalThis?.document) return
       const cleanup = preventTransition ? utils.preventTransition() : undefined
       document.documentElement.dataset.theme = value
       document.documentElement.style.colorScheme = value
       cleanup?.()
     },
     setClassName(dark: boolean) {
+      if (!globalThis?.document) return
       document.body.classList.add(dark ? classNames.dark : classNames.light)
       document.body.classList.remove(dark ? classNames.light : classNames.dark)
     },
     query() {
+      if (!globalThis?.document) return
       return window.matchMedia("(prefers-color-scheme: dark)")
     },
     getSystemTheme(fallback?: ColorMode) {
-      const dark = utils.query().matches ?? fallback === "dark"
+      if (!globalThis?.document) return
+      const dark = utils.query()!.matches ?? fallback === "dark"
       return dark ? "dark" : "light"
     },
     addListener(fn: (cm: ColorMode) => unknown) {
       const mql = utils.query()
+      if (!globalThis?.document || !mql) return
       const listener = (e: MediaQueryListEvent) => {
         fn(e.matches ? "dark" : "light")
       }

packages/c-color-mode/src/index.tsx

@@ -1,2 +1,3 @@
 export * from "./color-mode-provider"
+export * from "./color-mode-script"
 export * from "./storage-manager"

packages/c-color-mode/src/storage-manager.ts

@@ -1,10 +1,10 @@
 import { __DEV__ } from "@chakra-ui/utils"
+import { ColorModeConstants } from "./color-mode-script"
 import { ColorMode } from "./color-mode.utils"
 
-export const STORAGE_KEY = "chakra-ui-color-mode"
+export const STORAGE_KEY = ColorModeConstants.BaseStorageKey
 
 const hasSupport = () => typeof Storage !== "undefined"
-export const storageKey = "chakra-ui-color-mode"
 
 type MaybeColorMode = ColorMode | undefined
 
@@ -60,6 +60,7 @@ export function createCookieStorageManager(
       return parseCookie(document.cookie, key) || init
     },
     set(value) {
+      if (typeof document === "undefined") return
       document.cookie = `${key}=${value}; max-age=31536000; path=/`
     },
   }

packages/core/README.md

@@ -1,2 +1,11 @@
-## Project Stats
-![Alt](https://repobeats.axiom.co/api/embed/40b60a8e21b08d97af5849ea7a8c7d7f46956824.svg "Repobeats analytics image")
+# @chakra-ui/vue-next
+
+Chakra UI on Vue 3
+
+## Installation
+
+```sh
+yarn add @chakra-ui/vue-next
+# or
+npm i @chakra-ui/vue-next
+```