diff --git a/.changeset/poor-llamas-obey.md b/.changeset/poor-llamas-obey.md
new file mode 100644
index 00000000000..239d6e5e7b6
--- /dev/null
+++ 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
index a3373ae4009..8025a27ce77 100644
--- 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 }} />