diff --git a/app/root.tsx b/app/root.tsx
index 9704d3e..b69de47 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -165,14 +165,18 @@ function getMarkup(
 
       return (
         <html
+          data-theme={loaderData.theme}
           lang="en-US"
-          {...(loaderData.theme && {
-            "data-theme": loaderData.theme,
-            style: { colorScheme: loaderData.theme },
-          })}
         >
           <head>
             <Links />
+            <style nonce={loaderData.nonce}>
+              {`
+                :root {
+                  color-scheme: ${loaderData.theme};
+                }
+              `}
+            </style>
             {serverStyleData?.map(({ key, ids, css }) => (
               <style
                 key={key}
