No script injection when color sheme is set to light #303 (comment)

Author: garronej

src/next-appdir/DsfrHead.tsx

@@ -94,26 +94,30 @@ export function DsfrHead(props: DsfrHeadProps) {
                     <link rel="shortcut icon" href={getAssetUrl(FaviconIco)} type="image/x-icon" />
                 </>
             )}
-            <script
-                suppressHydrationWarning
-                nonce={nonce}
-                dangerouslySetInnerHTML={{
-                    "__html": getScriptToRunAsap({
-                        defaultColorScheme,
-                        nonce,
-                        trustedTypesPolicyName
-                    })
-                }}
-            />
-            {nonce !== undefined && (
-                <script
-                    suppressHydrationWarning
-                    key="nonce-setter"
-                    nonce={nonce}
-                    dangerouslySetInnerHTML={{
-                        __html: `window.ssrNonce = "${nonce}";`
-                    }}
-                />
+            {defaultColorScheme !== "light" && (
+                <>
+                    <script
+                        suppressHydrationWarning
+                        nonce={nonce}
+                        dangerouslySetInnerHTML={{
+                            "__html": getScriptToRunAsap({
+                                defaultColorScheme,
+                                nonce,
+                                trustedTypesPolicyName
+                            })
+                        }}
+                    />
+                    {nonce !== undefined && (
+                        <script
+                            suppressHydrationWarning
+                            key="nonce-setter"
+                            nonce={nonce}
+                            dangerouslySetInnerHTML={{
+                                __html: `window.ssrNonce = "${nonce}";`
+                            }}
+                        />
+                    )}
+                </>
             )}
         </>
     );

src/next-pagesdir.tsx

@@ -199,31 +199,37 @@ export function createNextDsfrIntegrationApi(
                                 />
                             </>
                         )}
-                        {!isBrowser && ( //NOTE: On browser we handle this manually
+                        {defaultColorScheme !== "light" && (
                             <>
-                                <style id={rootColorSchemeStyleTagId}>{`:root { color-scheme: ${
-                                    isDark ? "dark" : "light"
-                                }; }`}</style>
-                                <meta
-                                    name="theme-color"
-                                    content={
-                                        fr.colors.getHex({ isDark }).decisions.background.default
-                                            .grey.default
-                                    }
-                                />
+                                {!isBrowser && ( //NOTE: On browser we handle this manually
+                                    <>
+                                        <style
+                                            id={rootColorSchemeStyleTagId}
+                                        >{`:root { color-scheme: ${
+                                            isDark ? "dark" : "light"
+                                        }; }`}</style>
+                                        <meta
+                                            name="theme-color"
+                                            content={
+                                                fr.colors.getHex({ isDark }).decisions.background
+                                                    .default.grey.default
+                                            }
+                                        />
+                                    </>
+                                )}
+                                {isProduction && !isBrowser && (
+                                    <script
+                                        dangerouslySetInnerHTML={{
+                                            "__html": getScriptToRunAsap({
+                                                defaultColorScheme,
+                                                trustedTypesPolicyName,
+                                                "nonce": undefined
+                                            })
+                                        }}
+                                    />
+                                )}
                             </>
                         )}
-                        {isProduction && !isBrowser && (
-                            <script
-                                dangerouslySetInnerHTML={{
-                                    "__html": getScriptToRunAsap({
-                                        defaultColorScheme,
-                                        trustedTypesPolicyName,
-                                        "nonce": undefined
-                                    })
-                                }}
-                            />
-                        )}
                     </Head>
                     {isBrowser ? (
                         <App {...(props as any)} />