Enhance the javascript

site/assets/js/code-examples.js

@@ -17,6 +17,7 @@
   // Insert copy to clipboard button before .highlight
   const btnTitle = 'Copy to clipboard'
   const btnEdit = 'Edit on StackBlitz'
+  // const btnTheme = 'Toggle local theme'
 
   const btnHtml = [
     '<div class="bd-code-snippet">',
@@ -51,6 +52,7 @@
 
   snippetButtonTooltip('.btn-clipboard', btnTitle)
   snippetButtonTooltip('.btn-edit', btnEdit)
+  // snippetButtonTooltip('.btn-theme', btnTheme)
 
   const clipboard = new ClipboardJS('.btn-clipboard', {
     target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight'),

site/assets/scss/_clipboard-js.scss

@@ -18,7 +18,8 @@
 }
 
 .btn-clipboard,
-.btn-edit {
+.btn-edit,
+.btn-theme > .dropdown-toggle {
   display: block;
   padding: .5em;
   line-height: 1;

site/layouts/shortcodes/example.html

@@ -31,13 +31,8 @@
       <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
         <small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
         <div class="d-flex ms-auto">
-          <div class="position-relative">
+          <div class="btn-theme dropdown" title="Toggle local theme">
-            <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+            <button class="dropdown-toggle d-flex align-items-center" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (auto)">
-                    type="button"
-                    aria-expanded="false"
-                    data-bs-toggle="dropdown"
-                    data-bs-display="static"
-                    aria-label="Toggle theme (auto)">
               <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
             </button>
             <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">

site/static/docs/5.3/assets/js/color-modes.js

@@ -19,27 +19,29 @@
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
   }
 
-  const setTheme = theme => {
+  const setTheme = (theme, element = document.documentElement) => {
     if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      document.documentElement.setAttribute('data-bs-theme', 'dark')
+      element.setAttribute('data-bs-theme', 'dark')
     } else {
-      document.documentElement.setAttribute('data-bs-theme', theme)
+      element.setAttribute('data-bs-theme', theme)
     }
   }
 
   setTheme(getPreferredTheme())
 
-  const showActiveTheme = (theme, focus = false, themeSwitcher = document.querySelector('#bd-theme')) => {
+  const showActiveTheme = (theme, focus = false, selectedToggler = document.querySelector('#bd-theme')) => {
+    const themeSwitcher = selectedToggler.closest('.dropdown')
     if (!themeSwitcher) {
       return
     }
 
+    const themeSwitcherButton = themeSwitcher.querySelector('.dropdown-toggle')
     const themeSwitcherText = document.querySelector('#bd-theme-text')
-    const activeThemeIcon = themeSwitcher.parentElement.querySelector('.theme-icon-active use')
+    const activeThemeIcon = themeSwitcher.querySelector('.theme-icon-active use')
-    const btnToActive = themeSwitcher.parentElement.querySelector(`[data-bs-theme-value="${theme}"]`)
+    const btnToActive = themeSwitcher.querySelector(`[data-bs-theme-value="${theme}"]`)
     const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
 
-    themeSwitcher.parentElement.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+    themeSwitcher.querySelectorAll('[data-bs-theme-value]').forEach(element => {
       element.classList.remove('active')
       element.setAttribute('aria-pressed', 'false')
     })
@@ -48,10 +50,10 @@
     btnToActive.setAttribute('aria-pressed', 'true')
     activeThemeIcon.setAttribute('href', svgOfActiveBtn)
     const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})${btnToActive.closest('.highlight-toolbar') ? ' (local)' : ''}`
-    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+    themeSwitcherButton.setAttribute('aria-label', themeSwitcherLabel)
 
     if (focus) {
-      themeSwitcher.focus()
+      themeSwitcherButton.focus()
     }
   }
 
@@ -70,8 +72,8 @@
         toggle.addEventListener('click', () => {
           const theme = toggle.getAttribute('data-bs-theme-value')
 
-          if (toggle.closest('.highlight-toolbar')) {
+          if (toggle.closest('.bd-code-snippet')) {
-            toggle.closest('.highlight-toolbar').previousElementSibling.setAttribute('data-bs-theme', theme)
+            setTheme(theme, toggle.closest('.bd-code-snippet').firstChild)
             showActiveTheme(theme, true, toggle.closest('.dropdown-menu').previousElementSibling)
           } else {
             setStoredTheme(theme)