Add optional nonce back to ColorModeScript (#6641)

* Add optional `nonce` back to ColorModeScript * docs: add changelog * Fix nonce Co-authored-by: Segun Adebayo <joseshegs@gmail.com>
chakra-ui · Sep 9, 2022 · 1ce7017 · 1ce7017 · vercel · Sep 9, 2022
1 parent e626974
commit 1ce7017
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/.changeset/brown-tomatoes-destroy.md 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
@@ -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) }}
     />
   )