add nonce prop

packages/mode-watcher/src/lib/mode-watcher.svelte

@@ -25,6 +25,7 @@
 	export let disableTransitions = true;
 	export let darkClassNames: string[] = ['dark'];
 	export let lightClassNames: string[] = [];
+	export let nonce: string = '';
 
 	themeColorsStore.set(themeColors);
 	disableTransitionsStore.set(disableTransitions);
@@ -51,6 +52,8 @@
 	const args = `"${defaultMode}"${
 		themeColors ? `, ${JSON.stringify(themeColors)}` : ', undefined'
 	}, ${JSON.stringify(darkClassNames)}, ${JSON.stringify(lightClassNames)}`;
+
+	$: trueNonce = typeof window === 'undefined' ? nonce : '';
 </script>
 
 <svelte:head>
@@ -60,10 +63,12 @@
 		<!-- but that snippet does not run in vitest -->
 		<meta name="theme-color" content={themeColors.dark} />
 	{/if}
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-	{@html `<script nonce="%sveltekit.nonce%">(` +
-		setInitialMode.toString() +
-		`)(` +
-		args +
-		`);</script>`}
+
+	{#if trueNonce}
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html `<script nonce=${trueNonce}>(` + setInitialMode.toString() + `)(` + args + `);</script>`}
+	{:else}
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html `<script>(` + setInitialMode.toString() + `)(` + args + `);</script>`}
+	{/if}
 </svelte:head>

packages/mode-watcher/src/lib/types.ts

@@ -42,4 +42,12 @@ export type ModeWatcherProps = {
 	 * @defaultValue `[]`
 	 */
 	lightClassNames?: string[];
+
+	/**
+	 * An optional nonce to use for the injected script tag to allow-list mode-watcher
+	 * if you are using a Content Security Policy.
+	 *
+	 * @defaultValue `undefined`
+	 */
+	nonce?: string;
 };

sites/docs/content/api-reference/mode-watcher.md

@@ -61,6 +61,14 @@ By default, `ModeWatcher` will add the `dark` class to the root `html` element w
 
 Now, when the mode is dark, the root `html` element will have the `dddd` class, and when the mode is light, the root `html` element will have the `fff` class.
 
+### Nonce
+
+You can use the `nonce` prop to allow-list mode-watcher if you are using a Content Security Policy. This will be applied to the `<script>` tag responsible for setting the initial mode before a FOUC occurs.
+
+```svelte
+<ModeWatcher nonce="my-secure-nonce" />
+```
+
 ## Props
 
 The `ModeWatcher` component accepts the following props: