Update extra.js (#17705)

.github/workflows/docs.yml

@@ -48,7 +48,7 @@ jobs:
           python-version: "3.x"
       - uses: astral-sh/setup-uv@v3
       - name: Install Dependencies
-        run: uv pip install --system ruff black tqdm minify-html mkdocs-material "mkdocstrings[python]" mkdocs-jupyter mkdocs-redirects mkdocs-ultralytics-plugin mkdocs-macros-plugin
+        run: uv pip install --system ruff black tqdm mkdocs-material "mkdocstrings[python]" mkdocs-jupyter mkdocs-redirects mkdocs-ultralytics-plugin mkdocs-macros-plugin
       - name: Ruff fixes
         continue-on-error: true
         run: ruff check --fix --unsafe-fixes --select D --ignore=D100,D104,D203,D205,D212,D213,D401,D406,D407,D413 .

docs/overrides/javascript/extra.js

@@ -1,39 +1,25 @@
-// Light/Dark Mode -----------------------------------------------------------------------------------------------------
+// Apply theme colors based on dark/light mode -------------------------------------------------------------------------
-const applyTheme = (isDark) => {
+  document.body.setAttribute('data-md-color-scheme', isDark ? 'slate' : 'default');
-  document.body.setAttribute(
+  document.body.setAttribute('data-md-color-primary', isDark ? 'black' : 'indigo');
-    "data-md-color-scheme",
-    isDark ? "slate" : "default",
-  );
-  document.body.setAttribute(
-    "data-md-color-primary",
-    isDark ? "black" : "indigo",
-  );
 };
 
-// Check and apply auto theme
+// Check and apply appropriate theme based on system/user preference
-const checkAutoTheme = () => {
+const checkTheme = () => {
-  const palette = JSON.parse(localStorage.getItem(".__palette") || "{}");
+  const palette = JSON.parse(localStorage.getItem('.__palette') || '{}');
-
+  if (palette.index === 0) {  // Auto mode is selected
-  if (palette.index === 0) {
+    applyTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
-    applyTheme(window.matchMedia("(prefers-color-scheme: dark)").matches);
   }
 };
 
-// Event listeners for theme changes
+// Watch for system theme changes
-const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', checkTheme);
-mediaQueryList.addListener(checkAutoTheme);
-
-// Initial theme check
-checkAutoTheme();
 
-// Auto theme input listener
+// Initialize theme handling on page load
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener('DOMContentLoaded', () => {
-  const autoThemeInput = document.getElementById("__palette_1");
+  document.getElementById('__palette_1')?.addEventListener('change', e =>
-  autoThemeInput?.addEventListener("click", () => {
+    e.target.checked && setTimeout(checkTheme)
-    if (autoThemeInput.checked) {
+  );
-      setTimeout(checkAutoTheme);
+  checkTheme();
-    }
-  });
 });
 
 // Inkeep --------------------------------------------------------------------------------------------------------------