preview-head.html

<script>
  ;(function setColorModeVar(initialValue) {
    const mql = window.matchMedia("(prefers-color-scheme: dark)")
    const systemPreference = mql.matches ? "dark" : "light"

    let persistedPreference

    try {
      persistedPreference = localStorage.getItem("chakra-ui-color-mode")
    } catch (error) {
      console.log(
        "Chakra UI: localStorage is not available. Color mode persistence might not work as expected",
      )
    }

    const isInStorage = typeof persistedPreference === "string"

    let colorMode

    if (isInStorage) {
      colorMode = persistedPreference
    } else {
      colorMode = initialValue === "system" ? systemPreference : initialValue
    }

    if (colorMode) {
      const root = document.documentElement
      root.style.setProperty("--chakra-ui-color-mode", colorMode)
    }
  })("light")
</script>