From fce74cb9f224489337b27e6c609567af730739a4 Mon Sep 17 00:00:00 2001
From: Chris Markiewicz <effigies@gmail.com>
Date: Mon, 5 Jun 2023 11:45:54 -0400
Subject: [PATCH] ENH: Set default theme based on browser preference

---
 toggle.js | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/toggle.js b/toggle.js
index 741e1d8..cb852ee 100644
--- a/toggle.js
+++ b/toggle.js
@@ -3,7 +3,7 @@
 
 // Replicated from https://github.com/quarto-dev/quarto-cli/blob/84d4659/src/resources/formats/html/templates/quarto-html.ejs
 const getColorSchemeSentinel = () => {
-  const localAlternateSentinel = 'alternate';
+  const localAlternateSentinel = 'default';
   if (window.location.protocol !== 'file:') {
     const storageValue = window.localStorage.getItem('quarto-color-scheme');
     return storageValue != null ? storageValue : localAlternateSentinel;
@@ -26,8 +26,23 @@ const toggleColorSchemeElements = () => {
   }
 };
 
-// Add event listener for when the readyState is complete (and default toggler is set)
+// Function to check if the user's browser prefers dark themes
+const prefersDarkTheme = () => {
+  if (window.matchMedia) {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+  return false;
+};
+
 document.addEventListener('readystatechange', function() {
+  // Set the default color scheme based on browser preference
+  if (document.readyState === 'interactive' && window.location.protocol !== 'file:') {
+    const storageValue = window.localStorage.getItem('quarto-color-scheme');
+    if (storageValue == null && prefersDarkTheme()) {
+      window.localStorage.setItem('quarto-color-scheme', 'alternate');
+    }
+  }
+  // Add event listener for when the readyState is complete (and default toggler is set)
   if (document.readyState === 'complete') {
     // Toggle scheme once
     toggleColorSchemeElements();
@@ -39,4 +54,5 @@ document.addEventListener('readystatechange', function() {
     }
   }
 });
+
 </script>