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 -}} - {{ end -}} diff --git a/layouts/partials/theme-toggler.html b/layouts/partials/theme-toggler.html index ee52aab5f..289222047 100644 --- a/layouts/partials/theme-toggler.html +++ b/layouts/partials/theme-toggler.html @@ -27,7 +27,9 @@ {{ if not $isExamples }}data-bs-display="static"{{ end }} aria-label="Toggle theme (auto)"> - Toggle theme + {{- /* Disable menu name for Docsy: + Toggle theme + */}}