From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Tue, 23 Jul 2024 07:18:00 +0000 (+0200)
Subject: Merge branch 'main' into main-lmp-contextual-theme-switcher
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=0816e952ead4fc395253489e9942182c92f28c47;p=thirdparty%2Fbootstrap.git

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

0816e952ead4fc395253489e9942182c92f28c47
diff --cc site/layouts/shortcodes/example.html
index ffb3400b56,5b398e6814..fb9ba000bf
--- a/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 31ae959e85,8a0dabf181..be4b178ebf
--- a/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)
      }
    }