Merge branch 'main' into main-lmp-contextual-theme-switcher

diff --cc site/assets/js/partials/code-examples.js
Simple merge

diff --cc site/layouts/shortcodes/example.html
index ffb3400b56a8b9f6ae06415725cd7f19bf879e7b,5b398e6814fce25da5e3971c5289dd92e95d36ff..fb9ba000bfc85e31e18d9fe9d5543b61814b6962
--- 1/site/layouts/shortcodes/example.html
--- 2/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@@@ -29,36 -29,8 +29,36 @@@
    {{- if eq $show_markup true -}}
      {{- if eq $show_preview true -}}
        <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>
+         <small class="font-monospace text-body-secondary text-uppercase">{{ $lang }}</small>
          <div class="d-flex ms-auto">
 +          <div class="btn-theme dropdown" title="Toggle local theme">
 +            <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)">
 +              <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">
 +              <li>
 +                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
 +                  <svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg>
 +                  Light
 +                  <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
 +                </button>
 +              </li>
 +              <li>
 +                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
 +                  <svg class="bi me-2 opacity-50 theme-icon"><use href="#moon-stars-fill"></use></svg>
 +                  Dark
 +                  <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
 +                </button>
 +              </li>
 +              <li>
 +                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="body" aria-pressed="true">
 +                  <svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg>
 +                  Body
 +                  <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
 +                </button>
 +              </li>
 +            </ul>
 +          </div>
            <button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
              <svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
            </button>

diff --cc site/static/docs/5.3/assets/js/color-modes.js
index 31ae959e8533df7d1e0dcf7b048354f8807091d3,8a0dabf18164fd55277a3bddd50c3303d9877026..be4b178ebf15f383d3a170d80e4d370b369417d4
--- 1/site/static/docs/5.3/assets/js/color-modes.js
--- 2/site/static/docs/5.3/assets/js/color-modes.js
+++ b/site/static/docs/5.3/assets/js/color-modes.js
@@@ -19,11 -19,11 +19,11 @@@
      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) {
-       element.setAttribute('data-bs-theme', 'dark')
+     if (theme === 'auto') {
 -      document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
++      element.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
      } else {
 -      document.documentElement.setAttribute('data-bs-theme', theme)
 +      element.setAttribute('data-bs-theme', theme)
      }
    }