Cleanup JS

site/assets/js/application.js

@@ -134,55 +134,58 @@
 
   // Toggle color modes
 
-  var currentTheme = localStorage.getItem('theme')
+  var root = document.documentElement
-  var currentThemeIcon = document.querySelector('#bd-theme > .bi use')
+  var activeTheme = localStorage.getItem('theme')
+  var activeThemeIcon = document.querySelector('.theme-icon-active use')
 
-  function checkMatchMedia() {
+  var checkSystemTheme = function () {
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches && !currentTheme) {
+    // if OS dark mode is set, and there's no stored theme, set the theme to dark (but don't store it)
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches && !activeTheme) {
       document.documentElement.setAttribute('data-theme', 'dark')
     } else {
+      // otherwise, set the theme to the default (light)
       document.documentElement.removeAttribute('data-theme')
     }
   }
 
-  document.querySelectorAll('.bd-theme-toggles .dropdown-item')
+  var setTheme = function (theme) {
+    document.querySelectorAll('[data-theme-value]').forEach(function (el) {
+      el.classList.remove('active')
+    })
+
+    var btnToActive = document.querySelector('[data-theme-value="' + theme + '"]')
+    var svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+    btnToActive.classList.add('active')
+    activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+  }
+
+  document.querySelectorAll('[data-theme-value]')
     .forEach(function (toggle) {
       toggle.addEventListener('click', function () {
         var theme = this.getAttribute('data-theme-value')
 
-        document.querySelector('.bd-theme-toggles .current').removeAttribute('class')
+        setTheme(theme)
-        toggle.parentElement.setAttribute('class', 'current')
-
-        var svg = toggle.querySelector('.theme-icon use').getAttribute('href')
-        currentThemeIcon.setAttribute('href', svg)
-
-        console.log(theme)
-
-        // in OS darkmode, going from light to auto doesn't make it dark
 
         if (theme === 'auto') {
-          document.documentElement.removeAttribute('data-theme')
+          root.removeAttribute('data-theme')
           localStorage.removeItem('theme')
-          checkMatchMedia()
+          checkSystemTheme()
         } else {
-          document.documentElement.setAttribute('data-theme', theme)
+          root.setAttribute('data-theme', theme)
           localStorage.setItem('theme', theme)
         }
       })
     })
 
-  if (currentTheme) {
+  if (activeTheme) {
-    var currentThemeButton = document.querySelector('.dropdown-item[data-theme-value="' + currentTheme + '"]')
+    root.setAttribute('data-theme', activeTheme)
-    document.documentElement.setAttribute('data-theme', currentTheme)
+    setTheme(activeTheme)
-    document.querySelector('.bd-theme-toggles .current').removeAttribute('class')
-    currentThemeButton.parentElement.setAttribute('class', 'current')
-    var svg = currentThemeButton.querySelector('.theme-icon use').getAttribute('href')
-    currentThemeIcon.setAttribute('href', svg)
   } else {
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
-      checkMatchMedia()
+      checkSystemTheme()
     })
-    checkMatchMedia()
+    checkSystemTheme()
   }
 
   // Insert copy to clipboard button before .highlight

site/assets/scss/_navbar.scss

@@ -74,27 +74,31 @@
     --bs-dropdown-padding: .25rem;
     --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
     --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
-    @include rfs(.875rem, --bs-dropdown-font-size);
+    @include font-size(.875rem);
     @include border-radius(.5rem);
     box-shadow: $dropdown-box-shadow;
 
-    .current {
-      font-weight: 600;
-
-      .bi {
-        display: block !important; // stylelint-disable-line declaration-no-important
-      }
-    }
-
     .dropdown-item {
       @include border-radius(.25rem);
 
+      + .dropdown-item {
+        margin-top: .125rem;
+      }
+
       &:active {
         .bi {
           color: inherit !important; // stylelint-disable-line declaration-no-important
         }
       }
     }
+
+    .active {
+      font-weight: 600;
+
+      .bi {
+        display: block !important; // stylelint-disable-line declaration-no-important
+      }
+    }
   }
 }
 

site/layouts/partials/docs-navbar.html

@@ -94,7 +94,7 @@
 
           <li class="nav-item dropdown">
             <a href="#" class="nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
-              <svg class="bi my-1"><use href="#circle-half"></use></svg>
+              <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
               <span class="d-lg-none ms-2">Toggle theme</span>
             </a>
             <ul class="dropdown-menu dropdown-menu-end bd-theme-toggles" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
@@ -112,8 +112,8 @@
                   <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
                 </button>
               </li>
-              <li class="current">
+              <li>
-                <button type="button" class="dropdown-item d-flex align-items-center" data-theme-value="auto">
+                <button type="button" class="dropdown-item d-flex align-items-center active" data-theme-value="auto">
                   <svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg>
                   Auto
                   <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
@@ -122,19 +122,6 @@
             </ul>
           </li>
         </ul>
-
-        <!-- <hr class="d-md-none text-white-50"> -->
-
-        <!-- <div class="vr d-none d-lg-flex mx-lg-2 my-lg-1 text-white"></div>
-
-        <div class="d-flex flex-row-reverse flex-lg-row">
-          <label class="bd-theme-toggle align-self-center ms-auto p-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Toggle mode">
-            <input type="checkbox" class="bd-theme-toggle-checkbox" id="checkbox">
-            <div class="visually-hidden">Toggle mode</div>
-            <svg class="bd-theme-toggle-dark bi"><use xlink:href="#moon-stars-fill"></use></svg>
-            <svg class="bd-theme-toggle-light bi"><use xlink:href="#sun-fill"></use></svg>
-          </label>
-        </div> -->
       </div>
     </div>
   </nav>

site/layouts/partials/docs-versions.html

@@ -9,7 +9,7 @@
   <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
     <li><h6 class="dropdown-header">v5 releases</h6></li>
     <li>
-      <a class="dropdown-item d-flex align-items-center justify-content-between current" aria-current="true" href="/docs/{{ .Site.Params.docs_version }}/">
+      <a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="/docs/{{ .Site.Params.docs_version }}/">
         Latest ({{ .Site.Params.docs_version }}.x)
         <svg class="bi"><use xlink:href="#check2"></use></svg>
       </a>