Add mode selector to download app and form examples

site/content/docs/5.3/examples/download-app/index.html

@@ -22,6 +22,9 @@
     <path d="m36.492 10.404 2.1-3.78a.432.432 0 0 0-.168-.576A.394.394 0 0 0 38.22 6a.454.454 0 0 0-.372.216l-2.112 3.816A14.141 14.141 0 0 0 30 8.832c-2.052 0-3.996.432-5.736 1.2l-2.112-3.816a.429.429 0 0 0-.576-.168.429.429 0 0 0-.168.576l2.1 3.78c-4.02 2.088-6.744 6.072-6.744 10.644h26.484c-.012-4.572-2.736-8.544-6.756-10.644Zm-12.6 5.796a1.101 1.101 0 0 1-1.104-1.104c0-.612.492-1.104 1.104-1.104.612 0 1.104.492 1.104 1.104 0 .612-.492 1.104-1.104 1.104Zm12.216 0a1.101 1.101 0 0 1-1.104-1.104c0-.612.492-1.104 1.104-1.104.612 0 1.104.492 1.104 1.104 0 .612-.492 1.104-1.104 1.104Z"/>
     <path d="M16.764 22.092V41.28a3.203 3.203 0 0 0 3.204 3.204h2.112v6.552A2.97 2.97 0 0 0 25.044 54a2.97 2.97 0 0 0 2.964-2.964v-6.552h3.96v6.552A2.97 2.97 0 0 0 34.932 54a2.97 2.97 0 0 0 2.964-2.964v-6.552h2.124a3.203 3.203 0 0 0 3.204-3.204V22.092h-26.46Z"/>
   </symbol>
+  <symbol viewBox="0 0 1000 1000" id="check2" >
+    <path d="M729.667 250 396.333 583.333l-125-125L188 541.667l125 125L396.333 750l83.334-83.333L813 333.333z"/>
+  </symbol>
   <symbol fill="currentColor" viewBox="0 0 24 24" id="designer">
     <path d="m10.535 13.74-1.43-.428-.545.544.428 1.429.252-.254 5.072 5.068.206-.207-5.071-5.068.62-.62 5.072 5.068.207-.207-5.072-5.068.26-.257Zm5.25-3.602a5.519 5.519 0 0 1-7.57 0 5.399 5.399 0 0 0-2.813 4.622H5.4v5.04a2.4 2.4 0 0 0 2.4 2.4h10.8v-7.32a5.399 5.399 0 0 0-2.815-4.742Zm-5.72 10.687a.587.587 0 0 1-.828 0l-1.24-1.241a.587.587 0 0 1 0-.827l1.86-1.861.207.207-.206.207.517.516a.146.146 0 0 1-.207.207l-.517-.517-.414.414.31.31a.146.146 0 0 1-.206.207l-.31-.31-.414.413.517.517a.146.146 0 1 1-.207.207l-.517-.517-.206.207a.293.293 0 0 0 0 .413l1.24 1.24c.115.115.3.115.414 0l1.86-1.86.207.207-1.86 1.86Zm5.643-1.295-.517.517-.408.407a.656.656 0 0 1-.465.193h-.001l-.06-.003h-.006a.646.646 0 0 1-.064-.01.661.661 0 0 1-.342-.17l-2.883-2.886-2.135-2.13-.425-1.422-.206-.677-.04-.162a.207.207 0 0 1-.005-.016v-.006c-.002-.003-.002-.007-.003-.01v-.007l-.002-.01v-.029l.001-.014v-.003l.003-.01v-.005l.003-.009.001-.005.002-.008a.128.128 0 0 1 .005-.013l.002-.005a.128.128 0 0 1 .004-.008l.002-.004a.181.181 0 0 1 .014-.023l.002-.004.005-.007.003-.004a.341.341 0 0 1 .006-.007l.003-.004a.22.22 0 0 1 .006-.006l.004-.003a.2.2 0 0 1 .006-.006l.004-.004a.156.156 0 0 1 .007-.006l.003-.002a.244.244 0 0 1 .01-.008l.003-.001a.19.19 0 0 1 .01-.006l.003-.003a.2.2 0 0 1 .008-.004l.005-.002a.158.158 0 0 1 .007-.004l.005-.002a.238.238 0 0 1 .008-.003l.005-.001a.235.235 0 0 1 .009-.003l.004-.001a.213.213 0 0 1 .011-.003h.003l.013-.003h.004l.01-.001H8.385l.009.001.005.001.01.002.005.001.015.004.486.139.353.107 1.421.426 5.013 5.01a.688.688 0 0 1 .162.252v.001a.662.662 0 0 1-.156.682Zm.353-4.702L14.2 16.69l-.207-.206 1.86-1.861a.293.293 0 0 0 0-.414l-1.24-1.24a.293.293 0 0 0-.413 0l-.207.206.517.517a.146.146 0 0 1-.207.207l-.517-.517-.413.414.31.31a.146.146 0 0 1-.207.207l-.31-.31-.414.413.517.517a.146.146 0 0 1-.206.207l-.517-.517-.207.206-.207-.206 1.861-1.861a.587.587 0 0 1 .827 0L16.06 14a.587.587 0 0 1 0 .827ZM12 10.44a4.32 4.32 0 1 0 0-8.64 4.32 4.32 0 0 0 0 8.64Z"/>
   </symbol>
@@ -31,12 +34,21 @@
   <symbol fill="currentColor" viewBox="0 0 30 30" id="tick">
     <path d="M26.76 6.205a2.017 2.017 0 00-3.4-1.481h-.001L11.41 16.356l-3.937-4.385a2.01 2.01 0 00-2.742.106l-.808.812a2.038 2.038 0 00-.149 2.704l6.463 8.122a2.012 2.012 0 003.153 0L26.318 7.473a2.028 2.028 0 00.443-1.268z"/>
   </symbol>
+  <symbol viewBox="0 0 1000 1000" id="ui-auto-mode">
+    <path d="M500 75C265.3 75 75 265.5 75 500.5S265.3 926 500 926s425-190.5 425-425.5S734.7 75 500 75m0 775V150c192.6.9 350 157.5 350 350.5S692.6 849.1 500 850"/>
+  </symbol>
+  <symbol viewBox="0 0 1000 1000" id="ui-dark-mode">
+    <path d="M675 649.88c-179.493 0-325-145.57-325-325.141A324.478 324.478 0 0 1 465.721 76C247.03 93.463 75 276.537 75 499.815 75 734.638 265.279 925 500 925c223.181 0 406.175-172.106 423.63-390.891A324.222 324.222 0 0 1 675 649.88Z"/>
+  </symbol>
+  <symbol viewBox="0 0 1000 1000" id="ui-light-mode">
+    <path d="M287.868 712.132a25.073 25.073 0 0 0-35.355 0l-53.033 53.033a25 25 0 0 0 35.355 35.355l53.033-53.033a25.073 25.073 0 0 0 0-35.355Zm424.264-424.264a25.073 25.073 0 0 0 35.355 0l53.033-53.033a25 25 0 0 0-35.355-35.355l-53.033 53.033a25.073 25.073 0 0 0 0 35.355Zm35.355 424.264a25.073 25.073 0 0 0-35.355 0 25.073 25.073 0 0 0 0 35.355l53.033 53.033a25 25 0 0 0 35.355-35.355ZM252.513 287.868a25.073 25.073 0 0 0 35.355 0 25.073 25.073 0 0 0 0-35.355l-53.033-53.033a25 25 0 0 0-35.355 35.355ZM200 500a25.073 25.073 0 0 0-25-25h-75a25 25 0 0 0 0 50h75a25.073 25.073 0 0 0 25-25Zm700-25h-75a25 25 0 0 0 0 50h75a25 25 0 0 0 0-50ZM500 800a25.073 25.073 0 0 0-25 25v75a25 25 0 0 0 50 0v-75a25.073 25.073 0 0 0-25-25Zm0-600a25.073 25.073 0 0 0 25-25v-75a25 25 0 0 0-50 0v75a25.073 25.073 0 0 0 25 25Zm0 50c-138.071 0-250 111.929-250 250s111.929 250 250 250 250-111.929 250-250-111.929-250-250-250Z"/>
+  </symbol>
 </svg>
 
 <header class="sticky-top" data-bs-theme="dark">
   <nav class="navbar navbar-expand-lg" aria-label="Global navigation of download app example page">
     <div class="container-xxl">
-      <div class="navbar-brand">
+      <div class="navbar-brand me-auto">
         <a class="stretched-link" href="/">
           <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Go to homepage" loading="lazy">
         </a>
@@ -46,6 +58,42 @@ <h1 class="two-lined">
           Mobile code libraries
         </h1>
       </div>
+      <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".global-header" aria-controls="global-header" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div id="global-header" class="navbar-collapse d-lg-flex global-header collapse">
+        <ul class="navbar-nav flex-row">
+          <li class="nav-item dropdown">
+            <button class="nav-link nav-icon dropdown-toggle" id="bd-theme" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle mode (auto)">
+              <svg class="theme-icon-active"><use href="#ui-auto-mode"></use></svg>
+              <span class="d-lg-none ms-2" id="bd-theme-text">Toggle mode</span>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end mb-2" 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="me-2"><use href="#ui-light-mode"></use></svg>
+                  Light
+                  <svg class="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="me-2"><use href="#ui-dark-mode"></use></svg>
+                  Dark
+                  <svg class="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="me-2"><use href="#ui-auto-mode"></use></svg>
+                  Auto
+                  <svg class="ms-auto d-none"><use href="#check2"></use></svg>
+                </button>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
     </div>
   </nav>
 </header>

site/content/docs/5.3/examples/form/index.html

@@ -10,9 +10,21 @@
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+  <symbol viewBox="0 0 1000 1000" id="check2" >
+    <path d="M729.667 250 396.333 583.333l-125-125L188 541.667l125 125L396.333 750l83.334-83.333L813 333.333z"/>
+  </symbol>
   <symbol fill="currentColor" viewBox="0 0 1000 1000" id="user">
     <path fill-rule="evenodd" d="M656.7,422.409a229.959,229.959,0,0,1-315.39.008A224.95,224.95,0,0,0,224.064,615H224V825A100,100,0,0,0,324,925H774V620A224.944,224.944,0,0,0,656.7,422.409ZM679,255A180,180,0,1,1,499,75,180,180,0,0,1,679,255Z"></path>
   </symbol>
+  <symbol viewBox="0 0 1000 1000" id="ui-auto-mode">
+    <path d="M500 75C265.3 75 75 265.5 75 500.5S265.3 926 500 926s425-190.5 425-425.5S734.7 75 500 75m0 775V150c192.6.9 350 157.5 350 350.5S692.6 849.1 500 850"/>
+  </symbol>
+  <symbol viewBox="0 0 1000 1000" id="ui-dark-mode">
+    <path d="M675 649.88c-179.493 0-325-145.57-325-325.141A324.478 324.478 0 0 1 465.721 76C247.03 93.463 75 276.537 75 499.815 75 734.638 265.279 925 500 925c223.181 0 406.175-172.106 423.63-390.891A324.222 324.222 0 0 1 675 649.88Z"/>
+  </symbol>
+  <symbol viewBox="0 0 1000 1000" id="ui-light-mode">
+    <path d="M287.868 712.132a25.073 25.073 0 0 0-35.355 0l-53.033 53.033a25 25 0 0 0 35.355 35.355l53.033-53.033a25.073 25.073 0 0 0 0-35.355Zm424.264-424.264a25.073 25.073 0 0 0 35.355 0l53.033-53.033a25 25 0 0 0-35.355-35.355l-53.033 53.033a25.073 25.073 0 0 0 0 35.355Zm35.355 424.264a25.073 25.073 0 0 0-35.355 0 25.073 25.073 0 0 0 0 35.355l53.033 53.033a25 25 0 0 0 35.355-35.355ZM252.513 287.868a25.073 25.073 0 0 0 35.355 0 25.073 25.073 0 0 0 0-35.355l-53.033-53.033a25 25 0 0 0-35.355 35.355ZM200 500a25.073 25.073 0 0 0-25-25h-75a25 25 0 0 0 0 50h75a25.073 25.073 0 0 0 25-25Zm700-25h-75a25 25 0 0 0 0 50h75a25 25 0 0 0 0-50ZM500 800a25.073 25.073 0 0 0-25 25v75a25 25 0 0 0 50 0v-75a25.073 25.073 0 0 0-25-25Zm0-600a25.073 25.073 0 0 0 25-25v-75a25 25 0 0 0-50 0v75a25.073 25.073 0 0 0 25 25Zm0 50c-138.071 0-250 111.929-250 250s111.929 250 250 250 250-111.929 250-250-111.929-250-250-250Z"/>
+  </symbol>
 </svg>
 
 <header class="sticky-top" data-bs-theme="dark">
@@ -32,7 +44,7 @@
         </a>
         <h1 class="title">Travel</h1>
       </div>
-      <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".global-header-1" aria-controls="global-header-1.1 global-header-1.2" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".global-header-1" aria-controls="global-header-1.1 global-header-1.2 global-header-1.3" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div id="global-header-1.1" class="navbar-collapse collapse me-lg-auto global-header-1">
@@ -47,7 +59,7 @@ <h1 class="title">Travel</h1>
           <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" lang="fr" hreflang="fr">FR</a></li>
         </ul>
       </div>
-      <div id="global-header-1.2" class="navbar-collapse collapse d-sm-flex global-header-1">
+      <div id="global-header-1.2" class="navbar-collapse collapse d-sm-flex global-header-1 me-lg-3">
         <ul class="navbar-nav flex-row">
           <li class="nav-item">
             <a href="#" class="nav-link nav-icon">
@@ -67,6 +79,39 @@ <h1 class="title">Travel</h1>
           </li>
         </ul>
       </div>
+      <div id="global-header-1.3" class="navbar-collapse d-lg-flex global-header-1 collapse ms-lg-3">
+        <ul class="navbar-nav flex-row">
+          <li class="nav-item dropdown">
+            <button class="nav-link nav-icon dropdown-toggle" id="bd-theme" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle mode (auto)">
+              <svg class="theme-icon-active"><use href="#ui-auto-mode"></use></svg>
+              <span class="d-lg-none ms-2" id="bd-theme-text">Toggle mode</span>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end mb-2" 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="me-2"><use href="#ui-light-mode"></use></svg>
+                  Light
+                  <svg class="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="me-2"><use href="#ui-dark-mode"></use></svg>
+                  Dark
+                  <svg class="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="me-2"><use href="#ui-auto-mode"></use></svg>
+                  Auto
+                  <svg class="ms-auto d-none"><use href="#check2"></use></svg>
+                </button>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
     </div>
   </nav>
 </header>