color mode improve

src/html/components/docs/color-mode.mdx

@@ -1,14 +1,14 @@
 ```html
-<!-- Navbar -->
-<nav class="app-header navbar navbar-expand bg-body">
+<!--begin::Header-->
+<nav class="navbar navbar-expand bg-body">
   <!--begin::Container-->
   <div class="container-fluid">
-    <!-- Start navbar links -->
+    <!--begin::Start Navbar links-->
     <ul class="navbar-nav">
       <li class="nav-item">
-        <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
-          <i class="fa-solid fa-bars"></i>
-        </a>
+        <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"
+          ><i class="fa-solid fa-bars"></i
+        ></a>
       </li>
       <li class="nav-item d-none d-md-block">
         <a href="#" class="nav-link">Home</a>
@@ -17,6 +17,8 @@
         <a href="#" class="nav-link">Contact</a>
       </li>
     </ul>
+    <!--end::Start Navbar links-->
+    <!--begin::End Navbar links-->
     <ul class="navbar-nav ms-auto">
       <li class="nav-item dropdown">
         <button
@@ -30,10 +32,11 @@
           <span class="theme-icon-active">
             <i class="my-1"></i>
           </span>
+          <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
         </button>
         <ul
           class="dropdown-menu dropdown-menu-end"
-          aria-labelledby="bd-theme"
+          aria-labelledby="bd-theme-text"
           style="--bs-dropdown-min-width: 8rem;"
         >
           <li>
@@ -41,6 +44,7 @@
               type="button"
               class="dropdown-item d-flex align-items-center active"
               data-bs-theme-value="light"
+              aria-pressed="false"
             >
               <i class="fa-regular fa-sun me-2"></i>
               Light
@@ -52,6 +56,7 @@
               type="button"
               class="dropdown-item d-flex align-items-center"
               data-bs-theme-value="dark"
+              aria-pressed="false"
             >
               <i class="fa-solid fa-moon me-2"></i>
               Dark
@@ -63,6 +68,7 @@
               type="button"
               class="dropdown-item d-flex align-items-center"
               data-bs-theme-value="auto"
+              aria-pressed="true"
             >
               <i class="fa-solid fa-circle-half-stroke me-2"></i>
               Auto
@@ -72,24 +78,30 @@
         </ul>
       </li>
     </ul>
+    <!--end::End Navbar links-->
   </div>
   <!--end::Container-->
 </nav>
+<!--end::Header-->
 ```
 
 ```js
 // Color Mode Toggler
 (() => {
   "use strict";
+
   const storedTheme = localStorage.getItem("theme");
+
   const getPreferredTheme = () => {
     if (storedTheme) {
       return storedTheme;
     }
+
     return window.matchMedia("(prefers-color-scheme: dark)").matches
       ? "dark"
       : "light";
   };
+
   const setTheme = function (theme) {
     if (
       theme === "auto" &&
@@ -100,19 +112,39 @@
       document.documentElement.setAttribute("data-bs-theme", theme);
     }
   };
+
   setTheme(getPreferredTheme());
-  const showActiveTheme = (theme) => {
+
+  const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector("#bd-theme");
+
+    if (!themeSwitcher) {
+      return;
+    }
+
+    const themeSwitcherText = document.querySelector("#bd-theme-text");
     const activeThemeIcon = document.querySelector(".theme-icon-active i");
     const btnToActive = document.querySelector(
-      '[data-bs-theme-value="' + theme + '"]'
+      `[data-bs-theme-value="${theme}"]`
     );
     const svgOfActiveBtn = btnToActive.querySelector("i").getAttribute("class");
-    document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
+
+    for (const element of document.querySelectorAll("[data-bs-theme-value]")) {
       element.classList.remove("active");
-    });
+      element.setAttribute("aria-pressed", "false");
+    }
+
     btnToActive.classList.add("active");
+    btnToActive.setAttribute("aria-pressed", "true");
     activeThemeIcon.setAttribute("class", svgOfActiveBtn);
+    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
+    themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
+
+    if (focus) {
+      themeSwitcher.focus();
+    }
   };
+
   window
     .matchMedia("(prefers-color-scheme: dark)")
     .addEventListener("change", () => {
@@ -120,16 +152,18 @@
         setTheme(getPreferredTheme());
       }
     });
+
   window.addEventListener("DOMContentLoaded", () => {
     showActiveTheme(getPreferredTheme());
-    document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
+
+    for (const toggle of document.querySelectorAll("[data-bs-theme-value]")) {
       toggle.addEventListener("click", () => {
         const theme = toggle.getAttribute("data-bs-theme-value");
         localStorage.setItem("theme", theme);
         setTheme(theme);
-        showActiveTheme(theme);
+        showActiveTheme(theme, true);
       });
-    });
+    }
   });
 })();
 ```