jesus/mdbook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add "Auto" option to theme menu

Browse source 
This switches between light and dark based on the OS, and provides a way
to remove a saved preference.
This commit is contained in:
Tyler Mandry 2025-03-08 00:02:16 -07:00 • committed by Eric Huss
parent 8835bdc47e
commit 20eea0b41e
2 changed files with 25 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/theme/book.js
View file

@ -329,7 +329,13 @@ aria-label="Show hidden lines"></button>';
themePopup.querySelectorAll('.theme-selected').forEach(function(el) { themePopup.querySelectorAll('.theme-selected').forEach(function(el) {
el.classList.remove('theme-selected'); 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() { function hideThemes() {
@ -338,13 +344,22 @@ aria-label="Show hidden lines"></button>';
themeToggleButton.focus(); themeToggleButton.focus();
} }
function get_theme() { function get_saved_theme() {
let theme; var theme = null;
try { try {
theme = localStorage.getItem('mdbook-theme'); theme = localStorage.getItem('mdbook-theme');
} catch (e) { } catch (e) {
// ignore error. // 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 (theme === null || theme === undefined || !themeIds.includes(theme)) {
if (typeof default_dark_theme === 'undefined') { if (typeof default_dark_theme === 'undefined') {
// A customized index.hbs might not define this, so fall back to // A customized index.hbs might not define this, so fall back to
@ -430,7 +445,12 @@ aria-label="Show hidden lines"></button>';
} else { } else {
return; 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) { themePopup.addEventListener('focusout', function(e) {

1
src/theme/index.hbs
View file

@ -134,6 +134,7 @@
<i class="fa fa-paint-brush"></i> <i class="fa fa-paint-brush"></i>
</button> </button>
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu"> <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="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="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="coal">Coal</button></li>