From f32bd6f9458018cc0187efed2ae16a53856bd509 Mon Sep 17 00:00:00 2001
From: Eric Huss <eric@huss.org>
Date: Mon, 21 Nov 2022 15:27:39 -0800
Subject: [PATCH] Show the currently selected theme.

---
 src/renderer/html_handlebars/hbs_renderer.rs |  2 ++
 src/theme/book.js                            |  8 ++++++++
 src/theme/css/chrome.css                     |  9 ++++++++-
 src/theme/index.hbs                          | 10 +++++-----
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/renderer/html_handlebars/hbs_renderer.rs b/src/renderer/html_handlebars/hbs_renderer.rs
index 710449af..1b648dac 100644
--- a/src/renderer/html_handlebars/hbs_renderer.rs
+++ b/src/renderer/html_handlebars/hbs_renderer.rs
@@ -340,6 +340,7 @@ impl HtmlHandlebars {
         );
         handlebars.register_helper("previous", Box::new(helpers::navigation::previous));
         handlebars.register_helper("next", Box::new(helpers::navigation::next));
+        // TODO: remove theme_option in 0.5, it is not needed.
         handlebars.register_helper("theme_option", Box::new(helpers::theme::theme_option));
     }
 
@@ -630,6 +631,7 @@ fn make_data(
         );
     }
 
+    // TODO: remove default_theme in 0.5, it is not needed.
     let default_theme = match html_config.default_theme {
         Some(ref theme) => theme.to_lowercase(),
         None => "light".to_string(),
diff --git a/src/theme/book.js b/src/theme/book.js
index c8f52cc1..627a368e 100644
--- a/src/theme/book.js
+++ b/src/theme/book.js
@@ -300,6 +300,13 @@ function playground_text(playground) {
         themePopup.querySelector("button#" + get_theme()).focus();
     }
 
+    function updateThemeSelected() {
+        themePopup.querySelectorAll('.theme-selected').forEach(function (el) {
+            el.classList.remove('theme-selected');
+        });
+        themePopup.querySelector("button#" + get_theme()).classList.add('theme-selected');
+    }
+
     function hideThemes() {
         themePopup.style.display = 'none';
         themeToggleButton.setAttribute('aria-expanded', false);
@@ -355,6 +362,7 @@ function playground_text(playground) {
 
         html.classList.remove(previousTheme);
         html.classList.add(theme);
+        updateThemeSelected();
     }
 
     // Set theme
diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css
index ff3158ad..59eae11f 100644
--- a/src/theme/css/chrome.css
+++ b/src/theme/css/chrome.css
@@ -517,7 +517,7 @@ ul#searchresults span.teaser em {
     width: 100%;
     border: 0;
     margin: 0;
-    padding: 2px 10px;
+    padding: 2px 20px;
     line-height: 25px;
     white-space: nowrap;
     text-align: left;
@@ -529,3 +529,10 @@ ul#searchresults span.teaser em {
 .theme-popup .theme:hover {
     background-color: var(--theme-hover);
 }
+
+.theme-selected::before {
+    display: inline-block;
+    content: "✓";
+    margin-left: -14px;
+    width: 14px;
+}
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index d8955de4..147eb9af 100644
--- a/src/theme/index.hbs
+++ b/src/theme/index.hbs
@@ -121,11 +121,11 @@
                             <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="light">{{ theme_option "Light" }}</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="rust">{{ theme_option "Rust" }}</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="coal">{{ theme_option "Coal" }}</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="navy">{{ theme_option "Navy" }}</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="ayu">{{ theme_option "Ayu" }}</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>
+                            <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
                         </ul>
                         {{#if search_enabled}}
                         <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">