diff --git a/next-themes/README.md b/next-themes/README.md index a70b05b..ac5a58f 100644 --- a/next-themes/README.md +++ b/next-themes/README.md @@ -157,6 +157,7 @@ All your theme configuration is passed to ThemeProvider. - `value`: Optional mapping of theme name to attribute value - value is an `object` where key is the theme name and value is the attribute value ([example](#differing-dom-attribute-and-theme-name)) - `nonce`: Optional nonce passed to the injected `script` tag, used to allow-list the next-themes script in your CSP +- `scriptProps`: Optional props to pass to the injected `script` tag ([example](#using-with-cloudflare-rocket-loader)) ### useTheme @@ -267,6 +268,14 @@ document.documentElement.getAttribute('data-theme') // => "my-pink-theme" ``` +### Using with Cloudflare Rocket Loader + +[Rocket Loader](https://developers.cloudflare.com/fundamentals/speed/rocket-loader/) is a Cloudflare optimization that defers the loading of inline and external scripts to prioritize the website content. Since next-themes relies on a script injection to avoid screen flashing on page load, Rocket Loader breaks this functionality. Individual scripts [can be ignored](https://developers.cloudflare.com/fundamentals/speed/rocket-loader/ignore-javascripts/) by adding the `data-cfasync="false"` attribute to the script tag: + +```jsx + +``` + ### More than light and dark mode next-themes is designed to support any number of themes! Simply pass a list of themes: diff --git a/next-themes/__tests__/index.test.tsx b/next-themes/__tests__/index.test.tsx index c102403..7ebb831 100644 --- a/next-themes/__tests__/index.test.tsx +++ b/next-themes/__tests__/index.test.tsx @@ -460,3 +460,17 @@ describe('setTheme', () => { expect(result.current.resolvedTheme).toBe('light') }) }) + +describe('inline script', () => { + test('should pass props to script', () => { + act(() => { + render( + + + + ) + }) + + expect(document.querySelector('script[data-test="1234"]')).toBeTruthy() + }) +}) diff --git a/next-themes/src/index.tsx b/next-themes/src/index.tsx index 7c37224..0a53b02 100644 --- a/next-themes/src/index.tsx +++ b/next-themes/src/index.tsx @@ -33,7 +33,8 @@ const Theme = ({ attribute = 'data-theme', value, children, - nonce + nonce, + scriptProps }: ThemeProviderProps) => { const [theme, setThemeState] = React.useState(() => getTheme(storageKey, defaultTheme)) const [resolvedTheme, setResolvedTheme] = React.useState(() => getTheme(storageKey)) @@ -161,7 +162,8 @@ const Theme = ({ defaultTheme, value, themes, - nonce + nonce, + scriptProps }} /> @@ -180,7 +182,8 @@ const ThemeScript = React.memo( defaultTheme, value, themes, - nonce + nonce, + scriptProps }: Omit & { defaultTheme: string }) => { const scriptArgs = JSON.stringify([ attribute, @@ -195,6 +198,7 @@ const ThemeScript = React.memo( return (