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.

Author: tmandry

src/theme/book.js

@@ -309,7 +309,13 @@ function playground_text(playground, hidden = true) {
         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() {
@@ -318,9 +324,18 @@ function playground_text(playground, hidden = true) {
         themeToggleButton.focus();
     }
 
-    function get_theme() {
-        var theme;
+    function get_saved_theme() {
+        var theme = null;
         try { theme = localStorage.getItem('mdbook-theme'); } catch (e) { }
+        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
@@ -402,7 +417,12 @@ function playground_text(playground, hidden = true) {
         } 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) {

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>