diff --git a/assets/js/dark-mode.js b/assets/js/dark-mode.js index 48148e9a8..2b480b1c9 100644 --- a/assets/js/dark-mode.js +++ b/assets/js/dark-mode.js @@ -54,8 +54,10 @@ btnToActive.classList.add('active') btnToActive.setAttribute('aria-pressed', 'true') activeThemeIcon.setAttribute('href', svgOfActiveBtn) - const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})` - themeSwitcher.setAttribute('aria-label', themeSwitcherLabel) + if (themeSwitcherText) { + const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})` + themeSwitcher.setAttribute('aria-label', themeSwitcherLabel) + } if (focus) { themeSwitcher.focus() diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss index c518f7503..dde0e276c 100644 --- a/assets/scss/_nav.scss +++ b/assets/scss/_nav.scss @@ -92,15 +92,20 @@ } } - // Support for showLightDarkModeMenu: - .bi { - width: 1em; - height: 1em; - vertical-align: -.125em; - fill: currentcolor; - } - .td-navbar .dropdown-menu .active .bi { - display: block !important + .td-light-dark-menu { + .bi { + // Adapted from: https://github.com/twbs/bootstrap/blob/main/site/layouts/_default/examples.html + width: 1em; + height: 1em; + vertical-align: -.125em; + fill: currentcolor; + } + + &.dropdown { + @include media-breakpoint-down(lg) { + position: unset; + } + } } } diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index 0690aca5d..3ac3a365d 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -58,7 +58,7 @@ {{ end -}} {{ if .Site.Params.ui.showLightDarkModeMenu -}} -