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.
This commit is contained in:
parent
8835bdc47e
commit
20eea0b41e
2 changed files with 25 additions and 4 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue