Prevent Cloudflare Rocket Loader deferring script

README.md

@@ -111,6 +111,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
+- `scriptAttribute`: Optional object used to pass custom pairs of attributes and their values to the injected `script` ([example](#using-with-cloudflare-rocket-loader))
 
 ### useTheme
 
@@ -221,6 +222,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:
+
+```js
+<ThemeProvider scriptAttribute={{'data-cfasync': 'false'}}>
+```
+
 ### More than light and dark mode
 
 next-themes is designed to support any number of themes! Simply pass a list of themes:

src/index.tsx

@@ -39,7 +39,8 @@ const Theme: React.FC<ThemeProviderProps> = ({
   attribute = 'data-theme',
   value,
   children,
-  nonce
+  nonce,
+  scriptAttribute
 }) => {
   const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme))
   const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey))
@@ -164,7 +165,8 @@ const Theme: React.FC<ThemeProviderProps> = ({
           value,
           children,
           attrs,
-          nonce
+          nonce,
+          scriptAttribute
         }}
       />
       {children}
@@ -182,7 +184,8 @@ const ThemeScript = memo(
     defaultTheme,
     value,
     attrs,
-    nonce
+    nonce,
+    scriptAttribute
   }: ThemeProviderProps & { attrs: string[]; defaultTheme: string }) => {
     const defaultSystem = defaultTheme === 'system'
 
@@ -262,7 +265,7 @@ const ThemeScript = memo(
       )};}${fallbackColorScheme}}catch(t){}}();`
     })()
 
-    return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: scriptSrc }} />
+    return <script {...scriptAttribute} nonce={nonce} dangerouslySetInnerHTML={{ __html: scriptSrc }} />
   },
   // Never re-render this component
   () => true

src/types.ts

@@ -2,6 +2,10 @@ interface ValueObject {
   [themeName: string]: string
 }
 
+interface ScriptAttributeObject {
+  [attributeName: string]: string
+}
+
 export interface UseThemeProps {
   /** List of all available theme names */
   themes: string[]
@@ -38,6 +42,8 @@ export interface ThemeProviderProps {
   value?: ValueObject
   /** Nonce string to pass to the inline script for CSP headers */
   nonce?: string
+  /** Object of attributes and their values to pass to the inline script */
+  scriptAttribute?: ScriptAttributeObject
 
   children?: React.ReactNode
 }