From 0f937fc08a79c132807eb23794ba4726b01f0e2f Mon Sep 17 00:00:00 2001
From: Shane-Donlon <130906067+Shane-Donlon@users.noreply.github.com>
Date: Mon, 2 Dec 2024 13:12:01 +0000
Subject: [PATCH] chore: improve theme-management cookbook (#7117)

---
 .../docs/cookbook/theme-management/index.mdx       | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

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;
         }
         );