From 03c69253a27b258663d9ab62ac7396bc41ab9194 Mon Sep 17 00:00:00 2001
From: UltralyticsAssistant <web@ultralytics.com>
Date: Thu, 21 Nov 2024 22:48:22 +0000
Subject: [PATCH] Deployed a78ee83 with MkDocs version: 1.6.1

---
 javascript/extra.js           | 46 ++++++++++++-----------------------
 overrides/javascript/extra.js | 46 ++++++++++++-----------------------
 2 files changed, 32 insertions(+), 60 deletions(-)

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