fix: add color mode script runtime safeguard (#5639)

* fix: add color mode script runtime safeguard * chore: add changeset
chakra-ui · Feb 28, 2022 · 0017511 · 0017511
1 parent 5cd5cff
commit 0017511
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/.changeset/poor-llamas-obey.md b/.changeset/poor-llamas-obey.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/color-mode": patch
+---
+
+Adds a runtime safeguard for `ColorModeScript`.
diff --git a/packages/color-mode/src/color-mode-script.tsx b/packages/color-mode/src/color-mode-script.tsx
@@ -52,7 +52,14 @@ interface ColorModeScriptProps {
  * to help prevent flash of color mode that can happen during page load.
  */
 export const ColorModeScript = (props: ColorModeScriptProps) => {
-  const { initialColorMode = "light" } = props
+  let { initialColorMode = "light" } = props
+
+  // Runtime safeguard against invalid color mode values.
+  const validColorModeValues = ["dark", "light", "system"] as const
+  if (!validColorModeValues.includes(initialColorMode)) {
+    initialColorMode = "light"
+  }
+
   const html = `(${String(setScript)})('${initialColorMode}')`
   return (
     <script nonce={props.nonce} dangerouslySetInnerHTML={{ __html: html }} />