rmosolgo
diff --git a/‎guides/_layouts/default.html‎
Lines changed: 39 additions & 1 deletion b/‎guides/_layouts/default.html‎
Lines changed: 39 additions & 1 deletion
@@ -13,11 +13,45 @@
     <link rel="icon" href="{{ site.baseurl }}/graphql-ruby-icon.png">
   </head>
   <body>
+    <script>
+      function detectDarkTheme(toggle) {
+        var prefersDarkSchemeSetting = localStorage.getItem("prefersDarkScheme")
+        if (prefersDarkSchemeSetting == null) {
+          prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+        } else {
+          prefersDarkScheme = prefersDarkSchemeSetting == "true"
+        }
+
+        if (toggle) {
+          if (prefersDarkScheme) {
+            prefersDarkScheme = false
+            localStorage.setItem("prefersDarkScheme", "false")
+          } else {
+            prefersDarkScheme = true
+            localStorage.setItem("prefersDarkScheme", "true")
+          }
+        }
+
+        if (prefersDarkScheme) {
+          document.body.classList.add('dark-theme');
+          document.querySelectorAll(".graphql-ruby-img").forEach(function(el) {
+            el.src = "{{ site.baseurl }}/graphql-ruby-dark.png"
+          })
+        } else {
+          document.body.classList.remove('dark-theme');
+          document.querySelectorAll(".graphql-ruby-img").forEach(function(el) {
+            el.src = "{{ site.baseurl }}/graphql-ruby.png"
+          })
+        }
+      }
+
+      detectDarkTheme(false)
+    </script>
     <div class="header">
       <div class="header-container">
         <div class="nav">
           <a href="{{ site.baseurl }}/" class="img-link">
-            <img src="{{ site.baseurl }}/graphql-ruby.png" alt="GraphQL Ruby Logo" />
+            <img class="graphql-ruby-img" src="{{ site.baseurl }}/graphql-ruby.png" alt="GraphQL Ruby Logo" />
           </a>
           <a href="{{ site.baseurl }}/getting_started">Get Started</a>
           <a href="{{ site.baseurl }}/guides">Guides</a>
@@ -31,6 +65,7 @@
             type="text"
             placeholder="Search the docs..."
           />
+          <a href="#" onclick="event.preventDefault(); detectDarkTheme(true)">☀</a>
         </div>
       </div>
       <div class="search-results-container">
@@ -43,5 +78,8 @@
     </div>
     <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearchLite.min.js"></script>
     <script src="{{ site.baseurl }}/js/search.js"></script>
+    <script>
+      detectDarkTheme(false) // do it again to update the images
+    </script>
   </body>
 </html>