diff --git a/.changeset/brown-tomatoes-destroy.md b/.changeset/brown-tomatoes-destroy.md
new file mode 100644
index 00000000000..e35bae33bd8
--- /dev/null
+++ b/.changeset/brown-tomatoes-destroy.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/color-mode": patch
+---
+
+Add optional `nonce` back to ColorModeScript
diff --git a/packages/components/color-mode/src/color-mode-script.tsx b/packages/components/color-mode/src/color-mode-script.tsx
index 3d7aa5e158d..c28aadbb11f 100644
--- a/packages/components/color-mode/src/color-mode-script.tsx
+++ b/packages/components/color-mode/src/color-mode-script.tsx
@@ -2,6 +2,7 @@ export type ColorModeScriptProps = {
   type?: "localStorage" | "cookie"
   initialColorMode?: "light" | "dark" | "system"
   storageKey?: string
+  nonce?: string
 }
 
 const VALID_VALUES = new Set(["dark", "light", "system"])
@@ -38,9 +39,14 @@ export function getScriptSrc(props: ColorModeScriptProps = {}) {
 }
 
 export function ColorModeScript(props: ColorModeScriptProps = {}) {
+  const {
+    nonce,
+  } = props
+
   return (
     <script
       id="chakra-script"
+      nonce={nonce}
       dangerouslySetInnerHTML={{ __html: getScriptSrc(props) }}
     />
   )