[Dark-mode] Fixes for mobile (#1917)

google · Apr 6, 2024 · 6018506 · 6018506
1 parent 4e56448
commit 6018506
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 13 deletions.
diff --git 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
@@ -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
@@ -58,7 +58,7 @@
       </li>
       {{ end -}}
       {{ if .Site.Params.ui.showLightDarkModeMenu -}}
-      <li class="nav-item dropdown">
+      <li class="td-light-dark-menu nav-item dropdown">
         {{ partial "theme-toggler" . }}
       </li>
       {{ end -}}

diff --git 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)">
   <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
-  <span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span>
+  {{- /* Disable menu name for Docsy:
+    <span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span>
+  */}}
 </button>
 <ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ end }}" aria-labelledby="bd-theme-text">
   <li>