feat(color-mode): add support for nonce

chakra-ui · Feb 8, 2021 · 7f3bb35 · 7f3bb35
1 parent b77049f
commit 7f3bb35
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/.changeset/hungry-coins-hang.md b/.changeset/hungry-coins-hang.md
@@ -0,0 +1,6 @@
+---
+"@chakra-ui/color-mode": minor
+---
+
+You can now customize the `nonce` of the `<script>` that `ColorModeScript`
+creates by passing `nonce` prop.
diff --git a/packages/color-mode/src/color-mode-script.tsx b/packages/color-mode/src/color-mode-script.tsx
@@ -35,6 +35,7 @@ function setScript(initialValue: Mode) {
 
 interface ColorModeScriptProps {
   initialColorMode?: Mode
+  nonce?: string
 }
 
 /**
@@ -44,5 +45,7 @@ interface ColorModeScriptProps {
 export const ColorModeScript = (props: ColorModeScriptProps) => {
   const { initialColorMode = "light" } = props
   const html = `(${String(setScript)})('${initialColorMode}')`
-  return <script dangerouslySetInnerHTML={{ __html: html }} />
+  return (
+    <script nonce={props.nonce} dangerouslySetInnerHTML={{ __html: html }} />
+  )
 }