createInitialModeExpression

Creates a secure inline script to set the initial mode (light, dark, or system) before hydration.

createInitialModeExpression outputs a small, inline JavaScript snippet as a string.

It's typically used alongside server-rendered HTML and injected into the page head securely using SvelteKit's transformPageChunk.

When to Use

Use createInitialModeExpression when:

You're operating under a Content Security Policy (CSP) that requires a nonce for inline scripts.
You're rendering the initial page via SvelteKit server hooks and want to inject logic at render time.

This approach is ideal for security-sensitive environments or platforms with strict CSP headers, where inline scripts must include a trusted nonce.

Usage

To use createInitialModeExpression, you need two things:

1. Modify `app.html`

Add the following placeholder in the <head> of your app.html file:

app.html

		<script nonce="%sveltekit.nonce%">
	%modewatcher.snippet%
</script>

This placeholder will be replaced server-side at render time.

2. Update `hooks.server.ts`

Inject the snippet during SSR using transformPageChunk:

hooks.server.ts

		import { createInitialModeExpression } from "mode-watcher";
 
export const handle: Handle = async ({ event, resolve }) => {
	return resolve(event, {
		transformPageChunk: ({ html }) =>
			html.replace("%modewatcher.snippet%", createInitialModeExpression()),
	});
};

Tip

If you're planning to inject multiple types of initial client-side logic (e.g., directionality, locale), consider using a shared %placeholder% strategy with transformPageChunk.

Credits

Thanks to @fnimick for contributing and validating this approach.