From 8835bdc47e6a23acbdb6d2961d63bffee8c2c548 Mon Sep 17 00:00:00 2001
From: Tyler Mandry <tmandry@gmail.com>
Date: Fri, 7 Mar 2025 23:10:41 -0700
Subject: [PATCH 1/3] Switch theme when preferred color scheme changes

---
 src/theme/book.js   | 22 ++++++++++++++++------
 src/theme/index.hbs |  6 ++++--
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/theme/book.js b/src/theme/book.js
index 327c09fb51..9551a49552 100644
--- a/src/theme/book.js
+++ b/src/theme/book.js
@@ -346,12 +346,20 @@ aria-label="Show hidden lines"></button>';
             // ignore error.
         }
         if (theme === null || theme === undefined || !themeIds.includes(theme)) {
-            return default_theme;
+            if (typeof default_dark_theme === 'undefined') {
+                // A customized index.hbs might not define this, so fall back to
+                // old behavior of determining the default on page load.
+                return default_theme;
+            }
+            return window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? default_dark_theme
+                : default_light_theme;
         } else {
             return theme;
         }
     }
 
+    var previousTheme = default_theme;
     function set_theme(theme, store = true) {
         let ace_theme;
 
@@ -383,8 +391,6 @@ aria-label="Show hidden lines"></button>';
             });
         }
 
-        const previousTheme = get_theme();
-
         if (store) {
             try {
                 localStorage.setItem('mdbook-theme', theme);
@@ -395,13 +401,17 @@ aria-label="Show hidden lines"></button>';
 
         html.classList.remove(previousTheme);
         html.classList.add(theme);
+        previousTheme = theme;
         updateThemeSelected();
     }
 
-    // Set theme
-    const theme = get_theme();
+    const query = window.matchMedia("(prefers-color-scheme: dark)");
+    query.onchange = function(event) {
+      set_theme(get_theme(), false);
+    };
 
-    set_theme(theme, false);
+    // Set theme.
+    set_theme(get_theme(), false);
 
     themeToggleButton.addEventListener('click', function() {
         if (themePopup.style.display === 'block') {
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index eade5ec7c2..6035750e7b 100644
--- a/src/theme/index.hbs
+++ b/src/theme/index.hbs
@@ -53,10 +53,11 @@
         <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
         {{/if}}
 
-        <!-- Provide site root to javascript -->
+        <!-- Provide site root and default themes to javascript -->
         <script>
             const path_to_root = "{{ path_to_root }}";
-            const default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "{{ preferred_dark_theme }}" : "{{ default_theme }}";
+            const default_light_theme = "{{ default_theme }}";
+            const default_dark_theme = "{{ preferred_dark_theme }}";
         </script>
         <!-- Start loading toc.js asap -->
         <script src="{{ resource "toc.js" }}"></script>
@@ -81,6 +82,7 @@
 
         <!-- Set the theme before any content is loaded, prevents flash -->
         <script>
+            const default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? default_dark_theme : default_light_theme;
             let theme;
             try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
             if (theme === null || theme === undefined) { theme = default_theme; }

From 20eea0b41e39e58bdb9ea5103aba06cb19bfe01f Mon Sep 17 00:00:00 2001
From: Tyler Mandry <tmandry@gmail.com>
Date: Sat, 8 Mar 2025 00:02:16 -0700
Subject: [PATCH 2/3] Add "Auto" option to theme menu

This switches between light and dark based on the OS, and provides a way
to remove a saved preference.
---
 src/theme/book.js   | 28 ++++++++++++++++++++++++----
 src/theme/index.hbs |  1 +
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/theme/book.js b/src/theme/book.js
index 9551a49552..6070e3af8c 100644
--- a/src/theme/book.js
+++ b/src/theme/book.js
@@ -329,7 +329,13 @@ aria-label="Show hidden lines"></button>';
         themePopup.querySelectorAll('.theme-selected').forEach(function(el) {
             el.classList.remove('theme-selected');
         });
-        themePopup.querySelector('button#' + get_theme()).classList.add('theme-selected');
+        const selected = get_saved_theme() ?? "default_theme";
+        var element = themePopup.querySelector("button#" + selected);
+        if (element === null) {
+            // Fall back in case there is no "Default" item.
+            element = themePopup.querySelector("button#" + get_theme());
+        }
+        element.classList.add('theme-selected');
     }
 
     function hideThemes() {
@@ -338,13 +344,22 @@ aria-label="Show hidden lines"></button>';
         themeToggleButton.focus();
     }
 
-    function get_theme() {
-        let theme;
+    function get_saved_theme() {
+        var theme = null;
         try {
             theme = localStorage.getItem('mdbook-theme');
         } catch (e) {
             // ignore error.
         }
+        return theme;
+    }
+
+    function delete_saved_theme() {
+        localStorage.removeItem('mdbook-theme');
+    }
+
+    function get_theme() {
+        var theme = get_saved_theme();
         if (theme === null || theme === undefined || !themeIds.includes(theme)) {
             if (typeof default_dark_theme === 'undefined') {
                 // A customized index.hbs might not define this, so fall back to
@@ -430,7 +445,12 @@ aria-label="Show hidden lines"></button>';
         } else {
             return;
         }
-        set_theme(theme);
+        if (theme === "default_theme" || theme == null) {
+            delete_saved_theme();
+            set_theme(get_theme(), false);
+        } else {
+            set_theme(theme);
+        }
     });
 
     themePopup.addEventListener('focusout', function(e) {
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index 6035750e7b..98f3b886c9 100644
--- a/src/theme/index.hbs
+++ b/src/theme/index.hbs
@@ -134,6 +134,7 @@
                             <i class="fa fa-paint-brush"></i>
                         </button>
                         <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
+                            <li role="none"><button role="menuitem" class="theme" id="default_theme">Auto</button></li>
                             <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
                             <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
                             <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>

From 54d8d37b77200fa2648ac4ee883916bb686d770f Mon Sep 17 00:00:00 2001
From: Eric Huss <eric@huss.org>
Date: Mon, 31 Mar 2025 11:50:13 -0700
Subject: [PATCH 3/3] Fix eslint errors

This updates the ecmaVersion due to the ?? nullish coalescing operator.
---
 .eslintrc.json    |  2 +-
 src/theme/book.js | 24 ++++++++++++------------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 32efe898a0..c97f384cf5 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -10,7 +10,7 @@
         "require": "readonly"
     },
     "parserOptions": {
-        "ecmaVersion": 2018,
+        "ecmaVersion": 2021,
         "requireConfigFile": false,
         "sourceType": "module"
     },
diff --git a/src/theme/book.js b/src/theme/book.js
index 6070e3af8c..160ee93700 100644
--- a/src/theme/book.js
+++ b/src/theme/book.js
@@ -1,6 +1,6 @@
 'use strict';
 
-/* global default_theme, hljs, ClipboardJS */
+/* global default_theme, default_dark_theme, default_light_theme, hljs, ClipboardJS */
 
 // Fix back button cache problem
 window.onunload = function() { };
@@ -329,11 +329,11 @@ aria-label="Show hidden lines"></button>';
         themePopup.querySelectorAll('.theme-selected').forEach(function(el) {
             el.classList.remove('theme-selected');
         });
-        const selected = get_saved_theme() ?? "default_theme";
-        var element = themePopup.querySelector("button#" + selected);
+        const selected = get_saved_theme() ?? 'default_theme';
+        let element = themePopup.querySelector('button#' + selected);
         if (element === null) {
             // Fall back in case there is no "Default" item.
-            element = themePopup.querySelector("button#" + get_theme());
+            element = themePopup.querySelector('button#' + get_theme());
         }
         element.classList.add('theme-selected');
     }
@@ -345,7 +345,7 @@ aria-label="Show hidden lines"></button>';
     }
 
     function get_saved_theme() {
-        var theme = null;
+        let theme = null;
         try {
             theme = localStorage.getItem('mdbook-theme');
         } catch (e) {
@@ -359,14 +359,14 @@ aria-label="Show hidden lines"></button>';
     }
 
     function get_theme() {
-        var theme = get_saved_theme();
+        const theme = get_saved_theme();
         if (theme === null || theme === undefined || !themeIds.includes(theme)) {
             if (typeof default_dark_theme === 'undefined') {
                 // A customized index.hbs might not define this, so fall back to
                 // old behavior of determining the default on page load.
                 return default_theme;
             }
-            return window.matchMedia("(prefers-color-scheme: dark)").matches
+            return window.matchMedia('(prefers-color-scheme: dark)').matches
                 ? default_dark_theme
                 : default_light_theme;
         } else {
@@ -374,7 +374,7 @@ aria-label="Show hidden lines"></button>';
         }
     }
 
-    var previousTheme = default_theme;
+    let previousTheme = default_theme;
     function set_theme(theme, store = true) {
         let ace_theme;
 
@@ -420,9 +420,9 @@ aria-label="Show hidden lines"></button>';
         updateThemeSelected();
     }
 
-    const query = window.matchMedia("(prefers-color-scheme: dark)");
-    query.onchange = function(event) {
-      set_theme(get_theme(), false);
+    const query = window.matchMedia('(prefers-color-scheme: dark)');
+    query.onchange = function() {
+        set_theme(get_theme(), false);
     };
 
     // Set theme.
@@ -445,7 +445,7 @@ aria-label="Show hidden lines"></button>';
         } else {
             return;
         }
-        if (theme === "default_theme" || theme == null) {
+        if (theme === 'default_theme' || theme === null) {
             delete_saved_theme();
             set_theme(get_theme(), false);
         } else {