Dark mode: add new navbar mode selector example (#2436)

Co-authored-by: louismaxime.piton <[email protected]>

site/content/docs/5.3/examples/navbar-mode-selector/index.html

@@ -0,0 +1,24 @@
+---
+layout: examples
+title: Navbar with mode selector
+theme_selector: false
+aliases:
+  - "/examples/navbar-mode-selector"
+  - "/docs/examples/navbar-mode-selector"
+---
+
+<main>
+  <header class="sticky-top" data-bs-theme="dark">
+    {{< orange-supra mode="languages" aria_label="Supra navigation - Mode selector example" >}}
+    {{< /orange-supra >}}
+
+    {{< orange-global-headers id="global-header-1" mode="theme" supra=true demo=true aria_label="Global navigation - Mode selector example">}}
+    {{< /orange-global-headers >}}
+  </header>
+  <div class="container-xxl pt-4">
+    <h1>Title</h1>
+    <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum mollitia provident fuga animi voluptatem consequatur perspiciatis cum quos maiores, nesciunt dicta et dolor repellat eum odio id nihil, eos nostrum?</p>
+    <button type="button" class="btn btn-primary">Primary</button>
+    <button type="button" class="btn btn-secondary">Secondary</button>
+  </div>
+</main>

site/data/examples.yml

@@ -68,6 +68,8 @@
       description: "Demonstration of all responsive and container options for the navbar."
     - name: Navbar sticky
       description: "Single navbar example of a sticky-top navbar along with some additional content."
+    - name: Navbar mode selector
+      description: "Single navbar example with a mode selector to switch between light and dark mode."
 
 - category: Pages
   description: "Complete reusable pages that can be found in the Design Guidelines."