diff --git a/packages/docs/src/routes/docs/cookbook/theme-management/index.mdx b/packages/docs/src/routes/docs/cookbook/theme-management/index.mdx
index 1d4000f0a9b..cce3b5dd0bd 100644
--- a/packages/docs/src/routes/docs/cookbook/theme-management/index.mdx
+++ b/packages/docs/src/routes/docs/cookbook/theme-management/index.mdx
@@ -56,23 +56,25 @@ module.exports = {
 Then we have to add this code in the head tag of our ```root.tsx``` file.
 
 ```js
-<script
+       <script
           dangerouslySetInnerHTML={`
         (function() {
           function setTheme(theme) {
             document.documentElement.className = theme;
             localStorage.setItem('theme', theme);
           }
-          var theme = localStorage.getItem('theme');
-          console.log(theme);
+          const theme = localStorage.getItem('theme');
+
           if (theme) {
             setTheme(theme);
           } else {
-            setTheme('light');
-          }
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+              setTheme('dark');}
+              else {
+                setTheme('light');}}
         })();
         window.addEventListener('load', function() {
-          var themeSwitch = document.getElementById('hide-checkbox');
+          const themeSwitch = document.getElementById('hide-checkbox');
           themeSwitch.checked = localStorage.getItem('theme') === 'light'? true: false;
         }
         );